码迷,mamicode.com
首页 > 其他好文 > 详细

前端的杂谈(转)

时间:2015-01-28 17:22:01      阅读:233      评论:0      收藏:0      [点我收藏+]

标签:

浏览器加载和渲染html的顺序

1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件;
2. 浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部CSS文件;
3. 浏览器又发出CSS文件的请求,服务器返回这个CSS文件;
4. 浏览器继续载入html中<body>部分的代码,并且CSS文件已经拿到手了,可以开始渲染页面了;
5. 浏览器在代码中发现一个<img>标签引用了一张图片,向服务器发出请求。此时浏览器不会等到图片下载完,而是继续渲染后面的代码;
6. 服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排布,因此浏览器需要回过头来重新渲染这部分代码;
7. 浏览器发现了一个包含一行Javascript代码的<script>标签,赶快运行它; (浏览器发出js文件请求并一直等待请求的的返回,因为浏览器需要一个稳定的DOM树结构,而JS中很有可能有改变DOM树结构的代码,如append等,所以就会阻塞其他的下载和呈现)
8. Javascript脚本执行了这条语句,它命令浏览器隐藏掉代码中的某个<div> (style.display=”none”)。杯具啊,突然就少了这么一个元素,浏览器不得不重新渲染这部分代码;
9. 终于等到了</html>的到来,浏览器泪流满面……
10. 等等,还没完,用户点了一下界面中的“换肤”按钮,Javascript让浏览器换了一下<link>标签的CSS路径;
11. 浏览器召集了在座的各位<div><span><ul><li>们,“大伙儿收拾收拾行李,咱得重新来过……”,浏览器向服务器请求了新的CSS文件,重新渲染页面。 

JS CSS的加载影响

1、js的加载会阻塞此js文件下面的图片的加载,但不会阻塞其他js,css的加载
2、js的加载会阻塞浏览器的渲染,需要等待js加载执行完毕后才可以继续渲染
3、js的加载虽然是异步进行的,但是执行仍然会保持从上到下的顺序
(以上三点就是为何phpwind9.0采用了js文件底部异步加载的原因)
4、alert 直接会阻止页面的渲染,ff中不阻塞其他的js,css加载,但是会阻止img加载,chorme中会阻塞其他所有的加载。
5、边解析边更新DOM树和Style Object且重新绘制页面。
6、js的执行加载都会阻塞网页的渲染。
7、javascript会因为顺序执行而阻塞之后js的代码。
8、image、flash等组件的加载不会阻塞网页的解析。
9、css的加载也会阻止图片的加载和浏览器的渲染当不会阻止js的加载。
10、js的文件的加载会阻止dom的加载,但css文件则不会。

加快HTML页面加载的方法

1、页面减肥          页面的肥瘦是影响加载速度最重要的因素了,所以我可以删除不必要的空格、注释,内部的script
2、减少文件数量          减少页面上引用的文件数量可以减少HTTP连接数,可以合并的js和css文件尽量合并,图片可以用CSS Sprite技术合并拼接
3、优化页面元素加载顺序          与页面最初展示相关的js和css放在页面前面使其优先加载,与之无关的放到最后使其最后加载
5、指定图片和tables的大小          如果浏览器渲染的时候知道了图片或tables的大小,那么它可以给图片和tables做好布局,而不是图片拿到后回退重绘布局
4、减少域名查询          DNS查询和解析域名也是消耗时间的,所以尽量减少对外部JS、CSS、图片等资源的引用

CSS常用选择器

CSS的解析优先级:!Important > style=“” > #id > .class > tag
 
常用CSS选择器:
A + B         邻近选择器,选择的是紧邻在A元素后面的第一个B元素
A  > B         直接子元素选择器,只选择A元素下面的直接子元素
a[href*=“example”]          特定超链接选择器,选择链接到某个超链接的A标签
A:note(B)        选择除了在B元素内的所有A元素
A:first-child  /  A:last-child          选择父元素中的第一个子元素 / 最后一个子元素的选择器
A:nth-child(n)          按照顺序来选择A元素内的子元素,如 ul li:nth-child(3) 选择第三个列表元素

CSS常用布局样式

float                定义元素浮动到左侧或右侧,浮动元素会生成一个块级元素

         浮动“塌陷”问题           包含浮动元素的父元素高度会塌陷为零,解决方法:

         1. 在使用float元素的父元素结束前加一个高为0宽为0且有clear:both样式的div;

         2. 在使用float元素的父元素添加overflow:hidden

         3. 使用after伪对象清除浮动  box:after{display:block;clear:both;content:"";visibility:hidden;height:0;}

详情见: http://niutuku.com/tech/css/250155.shtml

 

position            规定元素的定位类型

     position: absolute;   position: fixed; position: relative;

      z-index: 99;

jquery常用方法

.html()           读取或修改元素的html标签
.text()            读取或修改元素的纯文本内容
.val()              读取或修改表单元素的value值
.attr()            读取或修改元素的某个属性值
.css()             读取或修改元素的某个样式
.removeAttr()          删除元素的某个属性值
.addClass() /  .removeClass()           给元素增加 / 删除某个class
.toggleClass()            根据class是否存在来添加或删除
.show()  / .hide() / .toggle()         显示 / 隐藏 / 切换某个元素
.fadeIn() / .fadeOut()          淡入效果来显示  /  隐藏某个元素
.slideUp() / .slideDown()          上下滑动的效果来显示 /  隐藏某个元素
.append()  .appendTo()            在被选元素的结尾插入指定内容,两者区别: $(“p”).append(“content”) ;       $(“content”).appendTo(“p”);
 
 
$.inArray(“str”, Array)           获取某个字符串在数组中的位置,不在数组中返回 -1 
jquery 1.9以上的版本针对checkbox标签做了调整:$(“checkbox”).prop(“checked”)   而不是 $(“checkbox”).attr(“checked”)
$(“div:eq(0)”)  $(“div:first”) 获取第一个div元素
$(document).ready(function() {}); 简写 $(function() {})          DOM结构加载完后就执行(此时如图片、js引用、css引用等可能还未加载完)
$(window).load(function() {});           所有的资源完全加载后再执行
$(window).scroll()             滚动监控
JSON.parse()           从一个字符串中解析出json对象,如:                                                        var str =‘{“name”:”test”}’;  JSON.parse(str);             Object  {“name”:”test”}
JSON.stringify()           从一个对象解析出字符串,可用传值,如:                                                        var str ={“a”:”123”} ;  JSON.stringify(str);             String  ‘{“a”:”123”}’
| 0 和 ~~            可以将浮点转化成整型且效率比parseInt高
获取未选中的checkbox           $(‘input[type=“checkbox”]:not(:checked)’)

ajax简篇

技术分享
$.ajax({
    url: ‘url‘,                          // 请求地址
    dataType: ‘json‘,              //预期服务器返回的数据类型
    asyn: ‘false‘,                    //此项设置为false后,ajax请求同步
    timeout: 30000,                   //超时设置
    type: ‘POST‘,                //  请求方式
    data: { ‘param‘: ‘bbb‘ },              // 传递的参数
    success: function (e) {                           //请求返回成功后调用的回调函数
    },
    error: function (e) {                              // 请求失败时被调用的函数               
    },
    beforeSend: function () {                      // 请求发送前执行的函数
    },
    complete: function () {                            //请求完成后执行的函数,成功或失败均执行
    }
});
技术分享

 

具体参见http://blog.sina.com.cn/s/blog_4f925fc30100la36.html

 

jQuery Datatable 详情可见: http://www.guoxk.com/node/jquery-datatables
                                       http://www.cnblogs.com/nier/archive/2012/03/18/2404836.html
 
Autocomplete详情可见:http://www.jb51.net/article/24219.htm

前端的杂谈(转)

标签:

原文地址:http://www.cnblogs.com/wanliyuan/p/4256085.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!