前端性能优化指南

前端必要性能优化么？

性能优化不停以来都是前端工程范畴中的一个紧张部门。许多资料表明，网站应用的性能优化对于提高用户留存、转化率等都有积极影响。可以明白为，提拔你的网站性能，就是提拔你的业务数据（甚至是业务收入）。
性能优化广义上包含前端优化和后端优化。后端优化的关注点更多的时间是在增加资源使用率、降低资源本钱以及提高稳定性上。相较于后端，前端的性能优化会更直接与用户的体验挂钩。从用户体验侧来说，前端服务 5s 的加载时间优化缩减 80%(1s) 与后端服务 50ms 的相应优化缩减 80%(10ms) 相比，用户的体验提拔会更大。因此许多时间，与体验相干的性能的瓶颈会出现在前端。
我和一些同砚接触的过程中，发现作为前端工程师，各人其实都具备一定的性能优化意识，同时也有自己的优化“武器库”，比方懒加载、资源归并、克制 reflow 等等。固然各人对性能优化都有自己的思绪，不外大多是分散在某几个点，较难形成一个完备的体系。业界也有许多优质的资料，比方雅虎的性能优化 35 条，但是性能优化作为一个体系性工程，各人想要体系性地去学习并不轻易。
一、html文档结构标签语义化

1、起首什么是语义化呢？

语义化是指用公道HTML标记以及其特有的属性去格式化文档内容。呆板在必要更少的人类干预的环境下可以或许研究和网络信息,让网页可以或许被呆板明白,终极让人类受益。即用精确的标签做精确的事。
2、语义化的长处大概说存在的意义

① 有利于搜刮引擎抓取
② 结构清晰的HTML在团队合作中的作用：代码可读、便于维护、提高开辟服从、快速达成共识、利于二次开辟。
③ 有利于瞽者屏幕阅读器
二、css、js文件数量及巨细

优化一般对于css、js是发起使用外联式来举行导入。我们可以对css、js做相应的规划也可以淘汰css、js的个数以淘汰http请求。同时也要注重淘汰重复代码，注重代码重复使用，以达到用最少的代码干最多的事。同时当项目要投入上线使用的时间，可以对css、js文件举行压缩，文件的减小可以加速文件的链接导入，以便加速网页的加载渲染。
通过在线网站对html，css，js文件压缩可参考资料：前端性能优化（一）-- 文件的压缩与归并
可通过使用webpack，gulp等工具对Js文件举行归并。
三、图片的数量和巨细

多个服务器请求会对站点的性能产生显着的影响。对一张图片举行导入又是一个http请求，因此我们应该淘汰图片的导入数量以便淘汰http请求。此处，我们必须提到一个名词“css精灵spirit”。css精灵是指包含多个差别的图标、按钮或图形的单个图像。因此我们可以把多张配景图片归并为一张然后对配景图片举行相应的定位。同时使用PNG8格式的图片相对于GIF来说比力少。而对于内容图片，可以对其举行得当的压缩，可以加速文档内容加载，大概如果是必要用户下载的图片，小的图片可以加速用户下载的速度。
使用较为广泛的web图片格式有：JPEG/JPG、PNG、WEBP、Base64、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标签中引入即可。

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格式
四、有效性验证

除了根据语义加标记之外，HTML文档还必要用有效的代码来编写，如果代码是无效的，浏览器会实验表明标记本身，偶尔候会产生错误的效果。更糟的是，如果发送具有精确的MIME类型的XHTML文档，明白XML的浏览器将不表现无效的页面。因为浏览器必要知道要使用什么DTD（文档类型界说）才气精确地处理页面，所以对页面举行有效性验证要求有DOCTYPE声明。
有效性验证工具径：
① W3C验证器（bookmarklet），这是一小段可以存储在浏览器的书签或收藏夹中的Javascript。单击这个书签就会触发Javascript动作。
②可以访问http://validator.w3.org/，通过输入自己的URL来对自己的站点来举行在线验证。
③使用firefox浏览器的可以下载插件Firefox Web Developer Extension
五、雅虎的Web优化最佳实践

1、内容优化
① 只管淘汰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没有找到页面）是完全没有须要的，它只会降低用户体验而不会有一点长处。
2、服务器优化
① 使用内容分发网络（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
3、Cookie优化
① 减小cookie巨细：去除不须要的coockie，并使coockie体积只管小以淘汰对用户相应的影响
② 针对Web组件使用域名无关的Cookie：对静态组件的Cookie读取是一种浪费，使用另一个无Cookie的域名来存放静态组件是一个好方法，大概也可以在Cookie中只存放带www的域名。
4、CSS优化
① 将CSS代码放在HTML页面的顶部
② 克制使用CSS表达式：CSS表达式在实行时间的运算量非常大，会对页面性能产生大的影响
③ 使用来取代@import
④ 克制使用Filters：IE独有属性AlphaImageLoader用于修正IE 7以下版本中PNG图片的半透明效果，但它的题目在于浏览器加载图片时它会终止内容的呈现而且冻结浏览器。
5、JavaScript优化
① 将JavaScript脚本放在页面的底部
② 将JavaScript和CSS作为外部文件来引用：在实际应用中使用外部文件可以提高页面速度，因为JavaScript和CSS文件都能在浏览器中产生缓存。
③ 缩小JavaScript和CSS
④ 删除重复的脚本
⑤ 最小化DOM的访问：使用JavaScript访问DOM元素比力慢
⑥ 开辟智能的事件处理程序
6、图像优化
① 优化图片巨细
② 通过CSS Sprites优化图片
③ 不要在HTML中使用缩放图片
④ favicon.ico要小而且可缓存
7、针对移动优化
① 保持组件巨细在25KB以下：主要是因为iPhone不能缓存大于25K的文件（留意这里指的是解压缩后的巨细）。
② 将组件打包成为一个复合文档：把页面内容打包成复合文本就如同带有多附件的Email，它可以或许使你在一个HTTP请求中获取多个组件。

参考资料：
https://www.cnblogs.com/diligenceday/p/4472035.html
https://developer.yahoo.com/performance/rules.html
https://github.com/creeperyang/blog/issues/1
https://developer.yahoo.com/performance/rules.html

来源：https://www.cnblogs.com/jing-tian/archive/2019/09/11/10995601.html