性能优化(二)

4.开发者工具的Timeline面板使用和分析(还有待研究)

参考阮老师的网页性能管理详解

5.减少 JavaScript 对性能的影响的方法

Javascript的加载和执行的特点：
（1）载入后马上执行；
（2）执行时会阻塞页面后续的内容
（3）会操作dom

a.将所有的script标签放到页面底部，也就是body闭合标签之前，这能确保在脚本执行前页面已经完成了DOM树渲染。
b.尽可能地合并脚本。页面中的script标签越少，加载也就越快，响应也越迅速。
c.采用无阻塞下载 JavaScript 脚本的方法：
（1）使用script标签的 defer 属性；
（2）使用动态创建的script元素来下载并执行代码；

6.输入一个URL，Enter之后发生了什么

1.浏览器解析URL，再DNS解析
2.浏览器与网站建立TCP连接（三次握手）
3.请求和传输数据
4.浏览器渲染页面

7.页面DOM节点太多会出现前端页面卡顿，如何优化？

可以参考性能优化(一)/3

操作dom节点

1.在外部更新节点然后与原始节点互换
使用cloneNode在外部更新节点然后再通过replace与原始节点互换。
var orig = document.getElmentById('cont');
var clone = orig.cloneNode(true);
var list = ['a','b'];
var content;
for(var i=0;i < list.length;i++){
content = document.createTextNode(list[i]);
clone.appendChild(content);
}
orig.parentNode.replaceChild(clone,orig);

2.在对DOM操作之前，把要操作的元素，先从当前DOM结构中删除：设置该元素的display样式为“none”。
3.DOM 的多个读操作（或多个写操作），应该放在一起。不要两个读操作之间，加入一个写操作。

新增dom节点

1.在对当前DOM进行操作之前，尽可能多的做一些准备工作，保证N次创建，1次写入。
优化的方法是创建DocumentFragment，在其中插入节点后再添加到页面。
如JQuery中所有的添加节点的操作如append，都是最终调用DocumentFragment来实现的

2.添加的结构外元素尽量设置它们的位置为fixed或absolute。

操作样式

不要一条条地改变样式，而要通过改变class，或者csstext属性，一次性地改变样式。

 //bad
 element.style.fontWeight = 'bold' ;
 element.style.marginLeft= '30px' ;
 element.style.marginRight = '30px' ;
 // bad
 var left = 10;
 var top = 10;
 el.style.left = left + "px";
 el.style.top = top + "px";
 // good
 el.className += " theclassname";
 el.style.cssText += "; left: " + left + "px; top: " + top + "px;";
 

减少DOM元素数量

在console中执行命令查看DOM元素数量。
document.getElementsByTagName( '*' ).length
正常页面的DOM元素数量一般不应该超过1000。

其他

1.避免使用表格来布局,table元素的重排和重绘成本，要高于div元素。
2.将获取的DOM数据缓存起来。

8.实现页面加载进度条&&项目中加载loading

 .loading{
 position:fixed;
 top:0;
 z-index:99999;
 height:5px;
 background:#FF6100;
 }
 
 
 
 
$(document).ready(function(){
 $('.loading').fadeOut();
 });
 

9.如何对网站的文件和资源进行优化?

1.将需要频繁加载的多个图片合成为1个单独的图片，需要加载时可以采用：background:url(....) no-repeat x-offset y-offset或者background-position的形式加载即可将这部分图片加载的HTTP请求缩减为1个;
2.将静态资源压缩，最小化；
3.浏览器对于同一个域名的请求是有并发限制的，所以将资源放在多个域名下;
4.图片延迟加载;
5.使用 CDN 托管,Content Delivery Network，即内容分发网络。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度;