web前端性能优化方案

前端性能优化方案

测试代码性能的工具：

 

1. Profiler

2. JSPerf（http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout）

3. Dromaeo

目的：

① 从用户角度而言，优化能让页面加载得更快、对用户得操作响应更及时，能为用户提供更友好的体验

②从服务商角度而言，优化能减少页面请求次数，减少请求所占带宽，能够节省可观的资源。

前端优化的途径大致可以分为两种

①页面级别的优化：例如HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化

②代码级别的优化：js中的DOM操作，CSS选择符优化以及HTML结构优化

瓶颈：

1、缓存

分析：大多数页面没有对动态HTML页面进行缓存，因为html页面是变化的。这将对站点的Speed Index（速度参数）造成直接的影响，Speed Index能够反映视觉元素的平均完成程度，这是提升用户体验的一个重要方面

解决方案：

 

• 利用低TTL（Time To Live生存时间值）对基础页面进行缓存---减少HTML请求次数进而卸载资源站的负载
• ajax---利用ajax动态创建多页面组件，这使我们可以对多种存储进行缓存响应，包括session storage和local storage。可缓存的ajax可以减少发往源站服务器的请求次数

2、压缩

分析：很多站点没有对字体进行压缩

解决方案：

 

• 对于自有的字体，可以在源站服务器进行压缩，或者在使用代理和CDN的前提下，在最后一公里进行压缩。
• 使用GZIP

3、使用多重JS框架

解决方案：

• js脚本合并
• 将外部脚本置底
• 异步js
• Lazy Load Javascript和mini库

页面级优化（7个)

1、减少HTTP请求数

• 合理设置HTTP缓存：能缓存的越多越好，能缓存的越久越好。
• 资源合并和压缩：如果可以的话，尽可能的将外部的脚本、样式进行合并（CSS Sprites：合并css图片）；另外css、js、image都可以用相应的工具进行压缩
• Inline Images：使用data:URL scheme的方式将图片嵌入到页面或者CSS中

2、异步请求callback、异步执行脚本

3、Lazy Load Javascript：只有在需要加载的时候加载

随着js框架流行，越来越多的站点使用起了框架，不过一个框架往往包括很多的资源，这些功能并不是每个页面都需要的。为了节省资源和时间，目前有两种做法：mini版本和Lazy Load

4、避免重复的资源请求：这种情况主要是由于疏忽或者页面由多个模块拼接而成，然后每个模块都请求了同样的资源

代码级别优化（也可作为写代码的规范）

Javascript 

1、避免DOM操作，因为DOM操作很费时，如果脚本中包含大量的DOM操作需要注意以下几点：

a. HTML Collection（HTML收集器，返回的是一个数组内容信息）

在脚本中，docement.images、getElementByTagname()返回的都是一个HTMLCollection类型的集合，类似数组。不过在访问性能上则比数组差的多，因为这个集合并不是静态的。每次访问该集合都会重新执行这个查询从而更新查询结果

b. reflow 和repaint

不要使用document.write()---会重绘整个页面

2、不要使用eval（）、with（）语句

3、对象声明直接用{}，数组声明直接用[]，不需要实例化，因为浏览器对常用的数据类型做了优化处理

4、字符串拼接：在js中使用“+”来拼接效率比较低，因为每次运行都要开辟新的内存。可以使用join（）方法

5、事件委托，解决了“事件处理程序过多”的问题，因为每个函数都是对象，都会占用内存，内存的对象越多，性能就越差。利用事件委托可以设置更少的事件处理程序，来管理更多的事件

6、

• 能用原生js实现的，就不要用第三方的插件，因为原生的方法执行效率更高
• js代码压缩
• js文件写在body底部

jQuery

1、使用#id去寻找element

jQuery中最快的选择器是ID选择器（$("#id")）,因为他直接映射为js的getElementById（）方法，id唯一

2、在class前边使用Tags

<input class = "on">

$("input.on")

jQuery中最慢的选择器是class选择器，在IE中它循环整个DOM。

3、缓存jQuery对象

$(".id").css("font-size","20px");


//使用缓存
var $a = $(".id");     //保存jQuery变量到一个本地变量中
$a.css("font-size","20px");

4、利用链式结构

写更少的代码，是js更轻量

5、事件委托

6、

• 代码压缩
• js文件写在body底部

CSS

1、能使用css实现的效果，就不要使用js，因为css的性能比js的性能高

2、尽量将样式写在单独的css文件里，在head中引用：如果css放在其他的地方，浏览器可能还没有下载和解析到CSS就已经开始渲染页面了，这就导致页面从无CSS状态跳转到CSS状态，用户体验比较糟糕。

将代码写在单独的css文件中的好处：

• 内容和样式分离，易于管理和维护
• 减少页面体积
• css文件可以被缓存、重用，维护成本低

3、不使用@import

4、避免使用复杂的选择器，层级越少越好（最好不要超过三层）

5、精简页面的样式文件，去掉不用的样式

多个不同页面同时引用同一个css文件，会造成两个问题：

• 样式文件偏大，影响加载速度
• 浏览器依旧会进行多余的样式匹配，影响渲染时间

解决方法：根据当前页面需要的css去合并当前页面用到css文件

6、利用css继承减少代码量

7、慎重使用高性能属性：浮动、定位

HTML

确保占用最少的内存，可以让页面获得更好的性能，即优化内存占用，执行中的代码只保存必要的数据，一旦数据不再有用，最好将其值设置为null来释放引用---解除引用。