前端优化

转发：https://www.cnblogs.com/xuniannian/p/7452440.html

 

性能优化的原则是什么？

一是多使用内存和缓存，

二是减少CPU计算，减少网络，减少I/O.

那身为前端人员，我们应该从哪入手呢？

一是在加载页面和静态资源的时候，

二是页面渲染时

具体方案如下

一 资源压缩合并，尽量减少 HTTP 请求

1.合并脚本跟样式文件，可以把多个 CSS 文件合成一个，把多个 JS 文件合成一个。

2.CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位,把多个图片合成一个图片。

二 使用浏览器缓存，缓存的分类，缓存的原理

   在用户浏览网站的不同页面时，很多内容是重复的，比如相同的JS、CSS、图片等。如果我们能够建议甚至强制浏览器在本地缓存这些文件，将大大降低页面产生的流量，从而降低页面载入时间。

   根据服务器端的响应header，一个文件对浏览器而言，有几级不同的缓存状态。

   1、服务器端告诉浏览器不要缓存此文件，每次都到服务器上更新文件。

   2、服务器端没有给浏览器任何指示。

   3、在上次传输中，服务器给浏览器发送了Last-Modified或Etag数据，再次浏览时浏览器将提交这些数据到服务器，验证本地版本是否最新的，如果为最新的则服务器返回304代码，告诉浏览器直接使用本地版本，否则下载新版本。一般来说，有且只有静态文件，服务            器端才会给出这些数据。

   4、服务器强制要求浏览器缓存文件，并设置了过期时间。在缓存未到期之前，浏览器将直接使用本地缓存文件，不会与服务器端产生任何通信。

        我们要做的是尽量强制浏览器到第四种状态，特别是对于JS、CSS、图片等变动较少的文件。

三 非核心代码异步加载

四  使用CDN 让资源加载更快

五 预解析DNS

六 将样式文件放在页面顶部，将脚本放在底部

七  图片的懒加载

八  减少DOM查询，对DOM 查询做缓存

九 减少DOM操作，多个操作尽量合并在一起执行

var oFragmeng = document.createDocumentFragment(); 

for(var i=0;i<10000;i++) {

　　 var op = document.createElement("span");

　　 var oText = document.createTextNode(i);

　　 op.appendChild(oText);

　　 //先附加在文档碎片中

　　 oFragmeng.appendChild(op);

}

　　//最后一次性添加到document中

　　document.body.appendChild(oFragmeng);

十 事件节流

$(document).ready(function() {

　　var timer = 0;

　　$(window).scroll(function() {

　　　　if (!timer) {

　　　　　　timer = setTimeout(function() {

　　　　　　checkScrollPosition(); timer = 0;

　　　　　　}, 250);

　　　　}

　　 }).trigger('scroll');

});

十一 尽早执行操作（如DOMContentLoaded）

1. 解析HTML结构。

2. 加载外部脚本和样式表文件。

3. 解析并执行脚本代码。

4. DOM树构建完成。//DOMContentLoaded

5. 加载图片等外部文件。

6. 页面加载完毕。//load