做着网络前端工作的小伙伴们和编辑一起看看吧。 希望这篇文章能对从事网络前端工作的伙伴们有所帮助。
Web前端是否需要性能优化？
性能优化是前端工程的重要部分。 大量资料表明，站点APP优化性能对提高用户留存、转化率等有积极影响。 可以理解为，提高网站性能就是提高商业数据(乃至商业收入)。
性能优化广义上包括前端和后端优化。 后端优化的重点是提高资源利用率、降低资源成本和提高稳定性。 前端性能优化比后端更能直接影响用户体验。 从用户体验的角度看，前端服务器5s的加载时间优化减少80 % (1S )比后端服务器50ms的响应优化减少80 % (50m s )更好因此，体验相关的性能瓶颈往往出现在前端。
我在接触一些同学的过程中发现，作为前端工程师，大家其实都有一定的性能优化意识，同时也有自己的优化“军械库”，比如懒惰加载、资源整合、避免reflow等。 虽然大家对性能优化都有自己的想法，但大多分散在几个方面，很难形成完整的体系。
一. html文档结构标记语义化
1、首先什么是语义化呢？
语义是使用合理的HTML标记及其特定属性来格式化文档内容。 机器可以在需要较少人类干预的情况下研究和收集信息，使机器理解网页，最终造福人类。 用正确的标签做正确的事。
2、语义化的好处或存在意义
有助于通过搜索引擎抓住
结构清晰的HTML在团队合作中的作用：易于代码读取、维护，提高开发效率，快速达成共识，促进二次开发。
有利于盲人屏幕阅读器
二. css、js文件的数量和大小
一般建议对css、js使用外联网部署优化。 可以正确规划css、js，也可以通过减少css、js的数量来减少http请求。 另外，为了用最少的代码做最多的事情，必须重视减少重复代码，重视代码的重用。 此外，当联机使用项目时，还可以压缩css和js文件，这种压缩会加快链接到文件的速度，从而加快网页的加载渲染速度。
可以使用Webpack、gulp等工具合并Js文件。
三.照片的数量和大小
多个服务器请求对站点的性能有很大的影响。 因为导入一张图像还是一个http请求，所以为了减少http请求，必须减少图像的导入数量。 在这里，必须提到“css向导spirit”这个名词。 css向导是一个包含多个不同图标、按钮或图形的单个图像。 因此，可以将多个背景图像合并为一张，并适当地配置背景图像。 同时使用PNG8格式的图像比GIF少。 此外，对于内容图像，通过适当压缩可以加速文档内容的加载。 此外，对于用户需要下载的图像，小图像可以减少用户下载的时间。
较广泛使用的Web图像格式是JPEG/JPG、PNG、WEBP、Base64和SVG。
1.JPEG/JPG
其特点是有损压缩、体积小、加载快，不支持透明。
使用场景： JPG适合呈现热菜丰富的图片，在日常开发中，JPG图片常用作大背景图、传送带图、编号图。 例如，对两大电子商务网站大图像的处理是应用场景在JPG图像中的最佳写照。 用JPG表示大图像是一种比较广泛使用的方案，在保持图像质量的同时，不用担心图像的体积。
缺点：处理线条感强、颜色对比度强的图像(如矢量图形或徽标)时，压缩会导致图像模糊、显眼。 另外，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就是单反
四、有效性验证
除了根据语义加标记之外，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 这个命令来查看。
③ 避免重定向
④ 使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请求中获取多个组件。
以上就是小编今天为大家分享的关于Web前端工程师要掌握的Web前端性能优化方法的文章