前端性能优化总结

针对HTML，如何优化性能？

1. 对于资源加载，按需加载和异步加载
2. 预加载图片，将样式表放在顶部，将脚本放在底部，加上时间戳
3. 首次加载的资源不超过1024KB，即越小越好。
4. 压缩HTML、CSS、 JavaScript文件。
5. 减少DOM节点。
6. 避免空src（src属性为空，会重新加载当前页面，影响速度和效率）。
7. 尽量避免在HTML标签中写 style属性
8. 避免在页面的主体布局中使用表，表要在其中的内容完全下载之后才会显示出来，显示的速度比DIV+CSS布局慢。
9. 不滥用Web字体，Web字体需要下载、解析、重绘当前页面，尽量少使用
10. 避免30*、40*、50*请求错误
11. 添加 Favicon.ico，如果没有设置图标ico，则默认的图标会导致发送一个404或者500请求。

针对CSS，如何优化性能？

1. 正确使用 display属性， display属性会影响页面的渲染，因此要注意以下几方面。

display:inline后不应该再使用width、 height、margin、 padding和float;
display:inline- block后不应该再使用float;
display:block后不应该再使用vertical-align;
display:table-*后不应该再使用margin或者float。

2. 不滥用 float,float在渲染时计算量比较大，尽量少使用。
3. 不声明过多的font-size。
4. 当值为0时不需要单位。
5. 标准化各种浏览器前缀，并注意以下几方面。

浏览器无前缀应放在最后。
CSS动画只用（ -webkit-无前缀）两种即可。
其他前缀包括 -webkit-、-moz-、-ms-、无前缀（ Opera浏览器改用 blink内核，所以-0-被淘汰）

6. 避免让选择符看起来像是正则表达式。避免使用CSS表达式、高级选择器、通配选择器，高级选择器不容易读懂，执行时间也长。
7. 尽量使用id、 class选择器设置样式（避免使用 style属性设置行内样式）
8. 尽量使用CSS3动画。
9. 合理使用requestAnimation Frame动画代替 setTimeout
10. 避免使用CSS3渐变阴影效果
11. 减少重绘和回流。
12. 使用CSS图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载。
13. 为图片标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小。如果图片很多，浏览器需要不断地调整页面。这不但影响速度，而且影响浏览体验。当浏览器知道高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容，从而优化加载时间，提升浏览体验）。
14. 选择合适的图片格式（颜色数多用JPG格式，而很少使用PNG格式，如果能通过服务器端判断浏览器支持WebP就用WebP或SVG格式）。

图片懒加载

对于图片懒加载，可以为页面添加一个滚动条事件，判断图片是否在可视区域内或者即将进入可视区域，优先加载。
如果为幻灯片、相册文件等，可以使用图片预加载技术，对于当前展示图片的前一张图片和后一张图片优先下载。 如果图片为CSS图片，可以使用 CSS
Sprite、SVG sprite、 Icon font、Base64等技术。
如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩得特别小的缩略图，以提高用户体验。
如果图片展示区域小于图片的真实大小，则应在服务器端根据业务需要先行进行图片压缩，图片压缩后，图片大小与展示的就一致了。

哪些方法能提升移动端CSS3动画体验？

1. 尽可能多地利用硬件能力，如使用3D变形来开启GPU加速，例如以下代码。

-webkit-transform: translate 3d(0, 0, 0);
-moz-transform : translate3d(0,0, 0);
-ms-transform : translate 3d(0,0,0);
transform: translate3d(0,0,0)；

一个元素通过 translate3d右移500X的动画流畅度会明显优于使用left属性实现的动画移动，原因是CSS动画属性会触发整个页面重排、重绘、重组。paint通常是最耗性能的，尽可能避免使用触发 paint的CSS动画属性。

如果动画执行过程中有闪烁（通常发生在动画开始的时候），可以通过如下方式处理。

-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden；
-ms-backface-visibility:hidden ;
backface-visibility:hidden；
-webkit-perspective：1000；
-moz-perspective：1000；
-ms-perspective：1000；
perspective：1000;

2. 尽可能少使用box- shadows和 gradients，它们往往严重影响页面的性能，尤其是在一个元素中同时都使用时。
3. 尽可能让动画元素脱离文档流，以减少重排，如以下代码所示。

position:fixed；
position:absolute;

针对 JavaScript，如何优化性能？

1. 缓存DOM的选择和计算。
2. 少用全局变量
3. 减少DOM操作次数
4. 尽量使用事件委托模式，避免批量绑定事件。
5. 移动端使用 touch事件代替 click。
6. 合理使用 requestAnimationFrame动画代替 setTimeOut。
7. 适当使用 canvas动画。
8. 尽量避免在高频事件（如 TouchMove、 Scroll事件）中修改视图，这会导致多次渲染。
9. 避免使用with（with会创建自己的作用域，增加作用域链的长度）
10. 多个变量声明合并
11. 在前端用变量保存Ajax请求结果，每次操作本地变量时，不用请求，减少请求次数

如何优化服务器端？

1. 可以进行文件合并、文件压缩使文件最小化,启用Gzip压缩。
2. 延长资源缓存时间，合理设置资源的过期时间，对于一些长期不更新的静态资源过期时间设置得长一些。
3. 减少 cookie头信息的大小，头信息越大，资源传输速度越慢。
4. 可以使用CDN托管文件(图片、CSS、 JavaScript文件)，让用户更快速地访问
5. 使用多个域名来缓存静态文件 。

如何优化服务器端的接口？

1. 接口合并：如果一个页面需要请求两部分以上的数据接口，则建议合并成一个以减少HTTP请求数。
2. 减少数据量：去掉接口返回的数据中不需要的数据。
3. 缓存数据：首次加载请求后，缓存数据；对于非首次请求，优先使用上次请求的数据，这样可以提升非首次请求的响应速度。

如何优化脚本的执行？

脚本处理不当会阻塞页面加载、渲染，因此在使用时需注意。

1. 把CSS写在页面头部，把 JavaScript程序写在页面尾部或异步操作中。
2. 避免图片和 iFrame等的空src，空src会重新加载当前页面，影响速度和效率。
3. 尽量避免重设图片大小。重设图片大小是指在页面、CSS、 JavaScript文件等中多次重置图片大小，多次重设图片大小会引发图片的多次重绘，影响性能
4. 图片尽量避免使用 DataURL。DataURL图片没有使用图片的压缩算法，文件会变大，并且要在解码后再渲染，加载慢，耗时长。

如何优化渲染？

1. 通过HTML设置 viewport元标签， viewport可以加速页面的渲染，如以下代码所示。

<meta name="viewport" content="width=device=width,initial-scale=1">

2. 减少DOM节点数量，DOM节点太多会影响页面的渲染，应尽量减少DOM节点数量。
3. 尽量使用CSS3动画，合理使用 requestAnimationFrame动画代替 setTimeout，适当使用 canvas动画（5个元素以内使用CSS动画，5个元素以上使用 canvas动画（iOS 8中可使用 webGL））。
4. 对于高频事件优化 Touchmove, Scroll事件可导致多次渲染。使用 requestAnimationFrame监听帧变化，以便在正确的时间进行渲染，增加响应变化的时间间隔，减少重绘次数。使用节流模式（基于操作节流，或者基于时间节流），减少触发次数。
5. 提升GPU的速度，用CSS中的属性（CSS3 transitions、CSS3 3D transforms、 Opacity、 Canvas、 WebGL、Video）来触发GPU渲染.

如何设置DNS缓存？

在浏览器地址栏中输入URL以后，浏览器首先要查询域名（ hostname）对应服务器的IP地址，一般需要耗费20~120ms的时间。DNS查询完成之前，浏览器无法识别服务器IP，因此不下载任何数据。基于性能考虑，ISP运营商、局域网路由、操作系统、客户端（浏览器）均会有相应的DNS缓存机制。

1. 正IE缓存30min，可以通过注册表中 DnsCacheTimeout项设置。
2. Firefox混存1 min，通过 network.dnsCacheExpiration配置。
3. 在 Chrome中通过依次单击“设置”→“选项”→“高级选项”，并勾选“用预提取DNS提高网页载入速度”选项来配置缓存时间。