前端性能优化问题汇总

 一、压缩、合并文件

l  压缩文件 -> 减少HTTP请求大小，可以减少请求时间；

l  文件合并 -> 减少HTTP请求数量。
 

1、使用在线网站进行压缩

2、使用 html-minifier、uglifyjs2 等工具对html/js文件内容进行压缩

3、对大文件启用gzip压缩：

Ø  安装依赖：npm install compression-webpack-plugin；

Ø  vue.config.js文件配置：

new CompressionWebpackPlugin({

   filename: '[path].gz[query]',  // 目标文件名

   algorithm: 'gzip', // 使用gzip压缩

   test: new RegExp(

     '\\.(js|css)$' // 压缩 js 与 css

   ),

   threshold: 10240,// 资源文件大于10240B=10kB时会被压缩

   minRatio: 0.8 // 最小压缩比达到0.8时才会被压缩

}),

Ø  Nginx配置：

gzip_static on;

4、JS/CSS文件合并
 

二、HTML优化

减少 DOM 元素数量和深度。语义化标签，避免乱嵌套，合理命名属性,使用高效简洁的css选择器等等。HTML 中标签元素越多，标签的层级越深，浏览器解析 DOM 并绘制到浏览器中所花的时间就越长，所以应尽可能保持 DOM 元素简洁和层级较少。

三、JS和CSS优化

JS和CSS尽量写在单独的文件中，引用外部资源可以有效利用浏览器的静态资源缓存，如果写在HTML中的话，只要地址不同浏览器就会认为是不同的网址，所以每次都需要重新加载这些JS和CSS。但有时候在移动端页面 CSS 或 JavaScript 比较简单的情况下为了减少请求，也会将 CSS 或 JavaScript 直接写到 HTML 里面，具体要根据 CSS 或 JavaScript 文件的大小和业务的场景来分析。（如果 CSS 或 JavaScript 文件内容较多，业务逻辑较复杂，建议放到外部文件引入。）

1、JS优化

l  减少重绘和回流；（减少DOM操作次数）

l  JS文件放置在文件底部；（JS 加载和执行会阻塞 HTML 解析）

l  上线后屏蔽一切日志代码，console.log对性能的影响还是比较大的；

2、CSS优化

l  减少内联样式的使用（style）；

l  css文件放在head中；

l  尽可能多的合并类似样式。（比如：如果2个class里面分别定义了10个CSS属性，其中只有1个不一样，那么就可以把这9个一样的拿出来写一个样式；）

l  合并一些分开写的样式。（比如：border-width、border-style、border-color合并成border；）

l  根据实际环境删除一些不必要的兼容性代码。（比如：如果你的项目只运行在移动端，那么诸如IE系列所有适配代码、-moz、-o等等这些玩意儿就不需要写了。）

l  CSS选择器优化：

u  尽量减少标签选择器的使用；

u  尽量少使用id选择器，多使用样式类选择器（通用性比较强）

u  减少选择器前面的前缀（选择器是从右向左查找的，前缀多，查询的时间多）

3、尽量使用css动画来代替js动画

css3的动画或者变形，性能比js动画，JS 直接操作 DOM 极容易引起页面的重排（transform 和 opacity 属性）

4、布局模型推荐使用flexbox，不滥用 float 

在 DOM 渲染树生成后的布局渲染阶段，使用 float 的元素布局计算比较耗性能，所以尽量减少 float 的使用。推荐使用固定布局或 flex-box 弹性布局的方式来实现页面元素布局，对于相同数量的元素和相同的视觉外观，布局的时间要少得多，性能比较好。（注：flexbox的兼容性还是有点问题，不是所有浏览器都支持它，所以要谨慎使用）

四、图片优化

1、尽量采用svg图片或者字体图标：

因为字体图标或者SVG是矢量图，代码编写出来的，放大不会失真，而且渲染速度快。字体图标使用时就跟字体一样，可以设置属性，例如 font-size、color 等等，非常方便，还有一个优点是生成的文件特别小。

2、图片压缩，降低图片质量

例如 JPG 格式的图片，100% 的质量和 90% 质量的通常看不出来区别，尤其是用来当背景图的时候。

3、大的背景图可采用图片切分

将过大的背景图切分成多张小图，通过html的方式拼到一起。利用浏览器的并发加载。

4、图片懒加载

在一些图片密集型的网站中运用较多，通过图片懒加载可以让一些不可视的图片不去加载，避免一次性加载过多的图片导致请求阻塞（浏览器一般对同一域名下的并发请求的连接数有限制），这样就可以提高网站的加载速度，提高用户体验。
 

<img data-src="test.jpg" >

等页面可见时，使用 JS 加载图片：

const img = document.querySelector('img');

img.src = img.getAttribute("data-src");

五、cookie优化

减小cookie体积。因为每次http请求都会携带当前path下所有的cookie发送到服务端，cookie太多无形中会造成一定的带宽浪费；

六、其他编码层面：

1、避免页面中空的 href 和 src

当 <link>标签的 href 属性为空，或 <script>、 <img>、 <iframe>标签的 src 属性为空时，浏览器在渲染的过程中仍会将 href 属性或 src 属性中的空内容进行加载，直至加载失败，这样就阻塞了页面中其他资源的下载进程，而且最终加载到的内容是无效的，因此要尽量避免。

<!--不推荐-->

<img src="" alt="photo" >

<a href="">点击链接</a>

2、switch语句相对if较快

当判断条件数量越来越多时，越倾向于使用 switch 而不是 if-else。通过将case语句按照最可能到最不可能的顺序进行组织。

3、keep-alive

vue2.0提供了一个keep-alive组件，用来缓存组件,避免多次加载相应的组件,减少性能消耗，但keep-alive是一把双刃剑，确实需要缓存组件的时候才使用。

4、v-show，v-if使用场景

只要涉及到权限相关的展示无疑要用 v-if；

在没有权限限制时根据用户点击的频次选择，频繁切换的使用 v-show，不频繁切换的使用 v-if（减少页面中 dom 数量）

5、减少页面重定向

页面每次重定向都会延长页面内容返回的等待延时，一次重定向大约需要 200 毫秒不等的时间开销（无缓存），为了保证用户尽快看到页面内容，要尽量避免页面重定向。

6、巧用||和&&布尔运算符

function eventHandler(e) { if (!e) e = window.event; } 

//可以替换为： function eventHandler(e) { e = e || window.event; }  if (myobj) { doSomething(myobj); } 

//可以替换为： myobj && doSomething(myobj); 

7、避免全局查找

在一个函数中会用到全局对象存储为局部变量来减少全局查找，因为访问局部变量的速度要比访问全局变量的速度更快些

function search() {  //当我要使用当前页面地址和主机域名 alert(window.location.href + window.location.host); 

}  

//最好的方式是如下这样 先用一个简单变量保存起来 

function search() {  

var location = window.location; 

alert(location.href + location.host); 

} 

8、提取公共代码

多次使用到的公共代码进行提取，打包成公共模块。如果项目中没有去将每个页面的第三方库和公共模块提取出来，则项目会存在以下问题：

l  相同的资源被重复加载，浪费用户的流量和服务器的成本。

l  每个页面需要加载的资源太大，导致网页首屏加载缓慢，影响用户体验。

七、如何让用户感觉很快

顾名思义，并没有实际上的提升速度，而是优化了用户体验，我们可以采用骨架屏、懒加载、合理loading，防抖、节流（减少不必要的请求）等方式让用户的等待变得舒服。

事件的节流与防抖：都以闭包的形式存在，它们通过对事件对应的回调函数进行包裹、以自由变量的形式缓存时间信息，最后用 setTimeout 来控制事件的触发频率；

节流：只触发第一次，并在计时结束时给予响应；

防抖：只触发最后一次；

八、查找性能瓶颈

使用 Chrome 开发者工具：

l  Network：页面中各种资源请求的情况，这里能看到资源的名称、状态、使用的协议、资源类型、资源大小、资源时间线等情况。

l  Performance面板：可以录制一段时间内的 js 执行细节及时间，能看到白屏时间、FPS、资源加载时间线、内存变化曲线等信息，分析页面性能。