性能优化(二)

2017-06-14 本文已影响196人 zwj2024

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

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

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

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

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

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

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

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

<li>操作dom节点</li>
<blockquote>
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);
</blockquote>
<blockquote>
2.在对DOM操作之前，把要操作的元素，先从当前DOM结构中删除：设置该元素的display样式为“none”。
3.DOM 的多个读操作（或多个写操作），应该放在一起。不要两个读操作之间，加入一个写操作。
</blockquote>

<li>新增dom节点</li>
<blockquote>
1.在对当前DOM进行操作之前，尽可能多的做一些准备工作，保证N次创建，1次写入。
优化的方法是创建DocumentFragment，在其中插入节点后再添加到页面。
如JQuery中所有的添加节点的操作如append，都是最终调用DocumentFragment来实现的
</blockquote>
<blockquote>
2.添加的结构外元素尽量设置它们的位置为fixed或absolute。
</blockquote>
<li>操作样式</li>
<blockquote>
不要一条条地改变样式，而要通过改变class，或者csstext属性，一次性地改变样式。
</blockquote>
<pre>
//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;";
</pre>

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

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

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

<pre>
.loading{
position:fixed;
top:0;
z-index:99999;
height:5px;
background:#FF6100;
}

$(document).ready(function(){
$('.loading').fadeOut();
});
</pre>

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

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