前端性能优化指南

前端须要性能优化么？

性能优化一直以来都是前端工程领域中的一个重要部分。不少资料代表，网站应用的性能优化对于提升用户留存、转化率等都有积极影响。能够理解为，提高你的网站性能，就是提高你的业务数据（甚至是业务收入）。

性能优化广义上包含前端优化和后端优化。后端优化的关注点更多的时候是在增长资源利用率、下降资源成本以及提升稳定性上。相较于后端，前端的性能优化会更直接与用户的体验挂钩。从用户体验侧来讲，前端服务 5s 的加载时间优化缩减 80%(1s) 与后端服务 50ms 的响应优化缩减 80%(10ms) 相比，用户的体验提高会更大。所以不少时候，与体验相关的性能的瓶颈会出如今前端。

我和一些同窗接触的过程当中，发现做为前端工程师，你们其实都具有必定的性能优化意识，同时也有本身的优化“武器库”，例如懒加载、资源合并、避免 reflow 等等。虽然你们对性能优化都有本身的思路，不过大可能是分散在某几个点，较难造成一个完整的体系。业界也有不少优质的资料，例如雅虎的性能优化 35 条，可是性能优化做为一个系统性工程，你们想要系统性地去学习并不容易。

1、html文档结构标签语义化

一、首先什么是语义化呢？

语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。机器在须要更少的人类干预的状况下可以研究和收集信息,让网页可以被机器理解,最终让人类受益。即用正确的标签作正确的事。

二、语义化的好处或者说存在的意义

① 有利于搜索引擎抓取

② 结构清晰的HTML在团队合做中的做用：代码可读、便于维护、提升开发效率、快速达成共识、利于二次开发。

③ 有利于盲人屏幕阅读器

2、css、js文件数量及大小

优化通常对于css、js是建议使用外联式来进行导入。咱们能够对css、js作相应的规划也能够减小css、js的个数以减小http请求。同时也要注重减小重复代码，注重代码重复利用，以达到用最少的代码干最多的事。同时当项目要投入上线使用的时候，能够对css、js文件进行压缩，文件的减少能够加速文件的连接导入，以便加速网页的加载渲染。

经过在线网站对html，css，js文件压缩可参考资料：前端性能优化（一）-- 文件的压缩与合并

可经过使用webpack，gulp等工具对Js文件进行合并。

3、图片的数量和大小

多个服务器请求会对站点的性能产生显著的影响。对一张图片进行导入又是一个http请求，所以咱们应该减小图片的导入数量以便减小http请求。此处，咱们必须提到一个名词“css精灵spirit”。css精灵是指包含多个不一样的图标、按钮或图形的单个图像。所以咱们能够把多张背景图片合并为一张而后对背景图片进行相应的定位。同时使用PNG8格式的图片相对于GIF来讲比较少。而对于内容图片，能够对其进行适当的压缩，能够加快文档内容加载，或者若是是须要用户下载的图片，小的图片能够加快用户下载的速度。

使用较为普遍的web图片格式有：JPEG/JPG、PNG、WEBP、Base6四、SVG。

1.JPEG/JPG

特色是有损压缩，体积小，加载快，不支持透明。

使用场景：JPG适合用于呈现热菜丰富的图片，在平常的开发中，JPG图片常常做为大的背景图、轮播图或是Banner图。好比两大电商网站对大图片的处理，就是对JPG图片应用场景的最佳写照。用JPG来呈现大图片，既能够保留图片的质量，又不会担忧图片的体积，是一种比较普遍使用的方案。

缺点：在处理一些矢量图形和logo等这些线条感很强、颜色对比强烈的图片时，认为压缩就致使图片模糊很是明显。另外，JPG图像不支持透明度处理，透明图片只能用PNG来呈现了。

2.PNG-8和PNG-24

特色是无损压缩、质量高、体积大、支持透明

优势：无损压缩的高保真图片格式。8和24都是二进制数的位数，8位的PNG支持256中颜色，24位的PNG能够支持1600万种颜色。在不考虑文件大小只在意最佳的显示效果时，推荐使用PNG-24。可是在适合使用PNG时会优先选择PNG-8

应用场景：主要用PNG来呈现小的LOGO、颜色简单对比强烈的图片或是背景。

3.SVG

特色是文本文件，体积小，不失真，兼容性好

优势：SVG是一种基于XML语法的图像格式。SVG对图像的处理不是基于像素，而是基于对图像的形状描述。

和JPG、PNG相比较，SVG文件体积更小，可压缩性更强。SVG做为矢量图最大的优势在于图片能够无限放大还不失真，一张SVG图片能够适配多种分辨率。另外SVG是文本文件，能够像写代码同样定义SVG，放在HTML中称为DOM的一部分。也能够把对图像的描述写入以.svg为后缀的文件中，在img标签中引入便可。<img src="文件名.svg" alt="">

4.WebP

优势：WebP是一款比JPG、PNG等在压缩方面更加优越的图片格式，同时也不会影响其图片质量，使用该格式时最好将同名文件格式化，当检测浏览器不兼容时自动切换jpg格式

缺点：是一个相对较新的技术，因此对于目前市面上的浏览器可否完美的兼容，其可用和实用性就变得很现实了，再好的东西若是没有好的兼容性，也是很是难以普及和被普遍使用的

5.Base64

优势：减小请求，加快首屏数据显示。对于jpg格式的图片，每个图片至关于一次http请求，图片多了的话，服务器耗性能比较严重。而将jpg转化成base64格式的图片，则极大地减小了请求数，由于Base是文本格式。

缺点：base64格式图片比原图大，占用更多存储空间，同时，浏览器不会对该资源缓存。

使用方法：background:url(data:image/png;base64,{img_data})

应用场景：通常对于小于10KB大小的图片进行base64转码。

 

至于动态图有GIF与APNG：后者APNG这东西是mozilla搞出来的， 它是24位的，并且也是动图，能够容纳1680万种颜色，也是为了取代GIF，可是....也就火狐支持，IE10和chrome，safari所有不行， 若是说gif图片是卡片机的话， APNG就是单反， 测试浏览器是否支持apng格式

4、有效性验证

除了根据语义加标记以外，HTML文档还须要用有效的代码来编写，若是代码是无效的，浏览器会尝试解释标记自己，有时候会产生错误的结果。更糟的是，若是发送具备正确的MIME类型的XHTML文档，理解XML的浏览器将不显示无效的页面。由于浏览器须要知道要使用什么DTD（文档类型定义）才能正确地处理页面，因此对页面进行有效性验证要求有DOCTYPE声明。

有效性验证工具径：
① W3C验证器（bookmarklet），这是一小段能够存储在浏览器的书签或收藏夹中的Javascript。单击这个书签就会触发Javascript动做。

②能够访问http://validator.w3.org/，经过输入本身的URL来对本身的站点来进行在线验证。

③使用firefox浏览器的能够下载插件Firefox Web Developer Extension

5、雅虎的Web优化最佳实践

一、内容优化

① 尽可能减小HTTP请求：常见方法包括合并多个CSS文件和JavaScript文件，利用CSS Sprites整合图像，Image map（图像中不一样的区域设置不一样的连接），内联图象（使用 data: URL scheme 在实际的页面嵌入图像数据）等。
② 减小DNS查找，通常dns查找须要花费20-120ms，Windows的DNS缓存，能够经过ipconfig /displaydns 这个命令来查看。详细资料http://www.chinaz.com/web/2015/0417/399728.shtml
③ 避免重定向
④ 使Ajax可缓存
⑤ 延迟加载组件：考虑哪些内容是页面呈现时所必需首先加载的、哪些内容和结构能够稍后再加载，根据这个优先级进行设定。
⑥ 预加载组件：预加载是在浏览器空闲时请求未来可能会用到的页面内容（如图像、样式表和脚本）。当用户要访问下一个页面时，页面中的内容大部分已经加载到缓存中了，所以能够大大改善访问速度。
⑦ 减小DOM元素数量：页面中存在大量DOM 元素，会致使JavaScript遍历DOM的效率变慢。
⑧根据域名划分页面内容：把页面内容划分红若干部分可使你最大限度地实现平行下载。但要确保你使用的域名数量在2个到4个之间（不然与第2条冲突）。
⑨ 最小化iframe的数量：iframes 提供了一个简单的方式把一个网站的内容嵌入到另外一个网站中。但其建立速度比其余包括JavaScript和CSS的DOM元素的建立慢了1-2个数量级。
⑩ 避免404：HTTP请求时间消耗是很大的，所以使用HTTP请求来得到一个没有用处的响应（例如404没有找到页面）是彻底没有必要的，它只会下降用户体验而不会有一点好处。

二、服务器优化

① 使用内容分发网络（CDN）：把你的网站内容分散到多个、处于不一样地域位置的服务器上能够加快下载速度。
添加Expires或Cache-Control信息头：对于静态内容，可设置文件头过时时间Expires的值为“Never expire（永不过时）”；对于动态内容，可以使用恰当的Cache-Control文件头来帮助浏览器进行有条件的请求。
② Gzip压缩
③ 设置ETag：ETags（Entity tags，实体标签）是web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制。
④ 提早刷新缓冲区：当用户请求一个页面时，服务器会花费200到500毫秒用于后台组织HTML文件。在这期间，浏览器会一直空闲等待数据返回。在PHP中，可使用flush()方法，它容许你把已经编译的好的部分HTML响应文件先发送给浏览器，这时浏览器就会能够下载文件中的内容（脚本等）然后台同⑤时处理剩余的HTML页面。
⑥ 对Ajax请求使用GET方法：当使用XMLHttpRequest时，浏览器中的POST方法会首先发送文件头，而后才发送数据。所以使用GET最为恰当。
⑦ 避免空的图像src

三、Cookie优化

① 减少cookie大小：去除没必要要的coockie，并使coockie体积尽可能小以减小对用户响应的影响
② 针对Web组件使用域名无关的Cookie：对静态组件的Cookie读取是一种浪费，使用另外一个无Cookie的域名来存放静态组件是一个好方法，或者也能够在Cookie中只存放带www的域名。

四、CSS优化

① 将CSS代码放在HTML页面的顶部
② 避免使用CSS表达式：CSS表达式在执行时候的运算量很是大，会对页面性能产生大的影响
③ 使用<link>来代替@import
④ 避免使用Filters：IE独有属性AlphaImageLoader用于修正IE 7如下版本中PNG图片的半透明效果，但它的问题在于浏览器加载图片时它会终止内容的呈现而且冻结浏览器。

五、JavaScript优化

① 将JavaScript脚本放在页面的底部
② 将JavaScript和CSS做为外部文件来引用：在实际应用中使用外部文件能够提升页面速度，由于JavaScript和CSS文件都能在浏览器中产生缓存。
③ 缩小JavaScript和CSS
④ 删除重复的脚本
⑤ 最小化DOM的访问：使用JavaScript访问DOM元素比较慢
⑥ 开发智能的事件处理程序

六、图像优化

① 优化图片大小
② 经过CSS Sprites优化图片
③ 不要在HTML中使用缩放图片
④ favicon.ico要小并且可缓存

七、针对移动优化

① 保持组件大小在25KB如下：主要是由于iPhone不能缓存大于25K的文件（注意这里指的是解压缩后的大小）。
② 将组件打包成为一个复合文档：把页面内容打包成复合文本就如同带有多附件的Email，它可以使你在一个HTTP请求中获取多个组件。

 

 参考资料：

http://www.javashuo.com/article/p-eferhlqu-v.html

https://developer.yahoo.com/performance/rules.html

https://github.com/creeperyang/blog/issues/1

https://developer.yahoo.com/performance/rules.html