前端性能优化

前端性能优化

前端性能优化是指用户从开始访问网站开始到整个页面完整的展示出来的过程中，我们可以通过各种的优化策略和优化方法来加快页面的加载，让用户的操作响应更加及时，从而增强系统的用户使用感。

1.图片资源加载

图片格式

jpeg：一种针对彩色照片而广泛使用的有损压缩图片格式，是一种栅格图形，常用文件扩展名包括jpg，jpeg，jpe。在互联网中常被应用于存储和传输图片。该格式不适合图形和文字，图标图形，因为他的压缩算法不支持这种类型的图形，并且不支持透明度。常用于色彩丰富的照片，彩色图，大焦点图以及banner等结构不规则的图形。

png:便捷式网络图片，是一种无损压缩的位图图片格式，支持索引，灰度，RGB三种颜色，以及Alpha通道等特性。适合于纯色，透明，线条绘图，图标以及颜色较少的需要半透明的图。

gif:位图图形文件格式，8位色重现真色彩的图像，采用LZW压缩算法进行编码。支持256色，仅支持全透明和半透明，可以支持动图，不过每个像素只有8bit，不适合存储彩色图片。常用于动画个图标。

webp：是一种现代图像格式，可以提供无损和有损压缩，支持透明度。采用8位压缩算法，无损压缩比png小26%，有损压缩比jpeg小25-34%，比gif有更好的动画，常用于图形和半透明图像。

图片优化 

使用压缩工具进行图片压缩。

延迟加载图片

在真实的图片加载出来之前，可以使用一张公共的图片，把页面的整个布局撑起来，然后再换成真实的图片。 lqip工具可以把图片进行虚化，转化成很小的base64编码。

2. HTML优化

精简HTML代码 减少嵌套也就是层级关系，也可以减少DOM节点数，让浏览器渲染的DOM节点数最少。

减少一些无语义的代码，比如空标签清除浮动。

建议连接中删除http或者https，因为一般链接的协议头和页面的协议头都是一致的，所以可以省略。

可以删除多余的空格，换行符，缩进和不必要的注释，一般会用压缩工具来进行处理。

文件位置

css文件链接尽量放在页面头部，css加载不会阻塞DOM Tree解析，但是会阻塞DOM Tree的渲染，也会阻塞后面js的执行，所以在DOM Tree在渲染之前解析css，可以减少浏览器重排的次数 ，而且css放在底部会导致页面白屏的时间变长。

js文件一般放在页面的底部，这是为了防止js的加载和解析阻塞页面元素的正常渲染。

3.用户体验

设置favicon.icon,如何不设置控制台会报错 ，而且用户访问的时候地址栏是空的，不利于品牌记忆。

增加首屏必要的css和js。一般页面需要在等待所有的依赖加载完成之后才会展示，这样就会导致页面存在空白，可以增加背景图或者loading或者骨架屏。增强用户的体验。

4.css优化细则

提升css渲染性能

谨慎使用一些expensive的属性，比如nth-child伪类或者position：fixed定位，因为这些比较消耗浏览器的渲染性能。

尽量减少一些样式层级的级数，比如div ul li span i{color:red},可以直接给i标签设置class，直接书写样式。

避免使用占过多cpu和内存的属性，比如text-indent不要设置太大的值。

尽量避免使用耗电量大的属性，比较占用cpu，比如transform，opacity，transitions。

合适的使用css选择器，尽量避免使用通配符，避免使用css表达式 例如color：expression((new Date()).getHours() % 2 ? "#fff" : "#000")

避免类正则的属性选择器，*=，|=，^=,$=,使用外链的css，可以单独形成文件放在cdn，使用缓存形式加载，避免使用import，因为他的加载会阻塞进程，需要加载完毕后才会向下执行。

精简css代码，使用缩进的语法，比如margin-top可以整合统一写在margin中，比如如何值为0能删除就删除，删除不必要的单位值，删除过多的分号，删除空格和注释，尽量减少样式表的体积。对于这些删除也可以直接使用压缩工具来完成。

合理使用web fonts

可以将字体部署到cdn上，从而加快加载速度，也可以直接将字体以base64未的形式保存在css中，并且通过localStorage进行缓存。一些谷歌地址可以使用国内的托管服务，不要直接使用源地址。

css动画优化

避免同时使用动画，动画太多会干扰用户的正常浏览，也会影响浏览器的性能。

5.js优化

提升js文件的加载性能

css放在head标签，js放在body结尾。

变量和函数

尽量使用id选择器，因为id选择器查询效率快。

避免使用eval，这个方法比价消耗性能。

js函数尽可能保持简洁，不要把过多的内容写在一个函数中。

js动画

尽量避免使用大量的js动画，css3动画和canvas动画比js动画性能要好。

使用requestAnimationFrame来代替setTimeout和setIntervval，因为requestAnimationFrame可以在正确的时间进行渲染，setTimeout和setInterval无法保证渲染时机，不要在定时器里面绑定事件。

使用逻辑缓存

6.减少页面的回流和重绘

css

避免过多的样式嵌套，最好可以快速进行元素的定位。

避免使用css表达式，css表达式在css绘制的过程中都会执行，会增加重排和回流的次数。

可以使用绝对定位让动画元素脱离文档流。

js

为了减少回流发生次数，避免频繁的操作DOM，可以合并多次对DOM统一修改，一次性批量处理。

控制绘制过程和绘制区域，绘制过程开销比较大的属性设置应该避免。

7. 简化DOM操作

对DOM的操作最好统一处理之后再统一插入到DOM Tree中。

8. 静态文件压缩工具

可以使用压缩工具对html，css，js文件进行压缩。

9.浏览器渲染过程

首先浏览器会进行一系列的解析，生成DOM Tree和Css Tree，最后合并成Render Tree。

根据生成的渲染树进行回流，以计算每个节点的几何信息，报错位置，大小，样式等，然后根据渲染树和回流得到的几何信息，得到每个节点上的结对像素。

最后进行页面展示。

10.懒加载，预加载，预渲染

懒加载指长页面中延迟加载特定的元素，从而减少当前屏无效资源的加载。

预加载是让浏览器预先加载某些资源。

预渲染是进行资源的提前渲染。

11.接口服务调用优化

接口合并，指一个页面的众多业务接口和依赖的第三方接口统一使用一个部署在集群的接口统一调用，以减少页面接口请求数。

接口放在cdn，主要是基于性能考虑，可以把不需要实时更新的接口同步到cdn，接口内容变更自动同步cdn。