Picker Ready Go

# 前端页面性能优化

# 一、加载资源优化--（webpack）

减少请求资源大小和次数

# 1、 减少http请求

一个完整的请求都需要经过 DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个 “漫长” 而复杂的过程。

而每个请求都是需要成本，比如时间成本和资源成本

时间成本就是从网站加载到用户看到呈现结果的时间

资源成本就是我们网站加载是需要加载一些如图片脚本类的资源的，这些资源会占据一定的带宽，在资源特别多的情况下，还会分批加载，这个时候资源成本会加大，性能也就会变差，网页的加载的速度自然也会变慢

因此减少加载成本是优化的方法之一，那么如何减少http请求呢？

  • （1）、进行资源的合并压缩

也就是利用构件化工具对css、js、image进行压缩，使用webpack，较为成熟，适合现代开发，也可以使用其他的如Gulp等自动化构建工具。

webpack中mini-css-extract-plugin将css样式抽离到一个文件中；

optimize-css-assets-webpack-plugin压缩css

terser-webpack-plugin压缩js (开启多线程)

  • （2）、css Sprites（也被叫做css 精灵图）

css精灵图是对很多小图片或者小icon可以集中到一张图片上利用css定位来处理的方法，因为将10张小图片集中到一张图片上的话，就可以将http请求由10次减少为一次，大大提高了性能。

  • （3）、懒加载

并不能减少http请求，但是在视觉体验上会感觉良好。

目的为了，减少页面第一次加载的请求次数；防止并发加载资源过多造成页面阻塞

具体步骤：

1、页面开始加载时不去发送http请求，而是放置一张占位图；

2、当页面加载完(window.onload)时，并且图片在可视区域再去请求加载图片信息

原理：先将img 标签中的src链接设为同一张占位图，将其真正的图片地址存储再在自定义属性中（比如data-src）。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。

TIP

1、当 window.onload 事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了。 2、当 DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash。

  • （4）、使用cdn的方式加载

  • （5）、代码分割Code Splitting-为了减少HTTP 请求

把业务代码和第三方库代码分离出来，因为业务代码更新频率大，相反第三方库代码更新迭代相对较慢且可以锁版本，所以可以利用浏览器的缓存来加载这些第三方库。

代码的拆分，commonChunk 提取； 资源 externals/DLLPlugin 加载；

  • （6）、避免引入大量第三方的库

能用css做的效果，不要用js做；能用原生js做的，不要去使用第三方插件。

  • （7）、tree shaking

tree shaking 用于移除 JavaScript 中的未引用代码(dead-code)。它依赖于 ES2015 模块module语法的静态结构特性，例如import 和 export，能够编译时就能确定模块的依赖关系，以及输入和输出的变量。

# 二、 提高渲染效率

# 1、 css放在head标签中

# 2、 使用的字体图标或者SVG图标来代替传统png图

因为字体图标或者SVG是矢量图，是代码编写出来的，放大不会变形，而且渲染速度快

# 2、 事件的节流、防抖--提高js运行效率

# 4、 基于script标签下载js文件时，可以使用defer或者async来异步加载

# 5、较少重绘和回流

  • （1）减少dom操作，多个操作尽量合并到一起执行（浏览器会累积DOM 变动，然后一次性执行。）
  • （2）可将元素绝对定位脱离文档流，减少对其他元素的影响
  • （3）不要一项一项地改变样式，而是使用预先定义的CSS class（类名）一次性改变样式。
  • （4）使用window.requestAnimationFrame()，因为它可以把代码推迟到下一次重绘之前执行，而不是立即要求页面重绘

重绘和回流

# 6、首屏内容使用SSR(server side render)服务端渲染

# 三、存储

# 1、Ajax请求使用缓存

# 2、localStorage、Application Cache

利用h5的新特性（localStorage、Application Cache）做一些简单数据的存储，避免向后台请求数据或者说在离线状态下做一些数据展示

# 换个维度

# 一、HTML性能优化

    1. HTML标签有始终。 减少浏览器的判断时间
    1. 把script标签移到HTML文件末尾，因为JS会阻塞后面的页面的显示。
    1. 减少iframe的使用，因为iframe会增加一条http请求，阻止页面加载，即使内容为空，加载也需要时间
    1. id和class，在能看明白的基础上，简化命名，在含有关键字的连接词中连接符号用’-‘，不要用’_’
    1. 保持统一大小写，统一大小写有利于浏览器缓存，虽然浏览器不区分大小写，但是w3c标准为小写
    1. 清除空格，虽然空格有助于我们查看代码，但是每个空格相当于一个字符，空格越多，页面体积越大，像google、baidu等搜索引擎的首页去掉了所有可以去掉的空格、回车等字符，这样可以加快web页面的传输。可以借助于DW软件进行批量删除 html内标签之间空格，sublime text中ctrl+a，然后长按shift+tab全部左对齐，清除行开头的空格
    1. 减少不必要的嵌套，尽量扁平化，因为当浏览器编译器遇到一个标签时就开始寻找它的结束标签，直到它匹配上才能显示它的内容，所以当嵌套很多时打开页面就会特别慢。
    1. 减少注释，因为过多注释不光占用空间，如果里面有大量关键词会影响搜索引擎的搜索
    1. 使用css+div代替table布局，去掉格式化控制标签如：strong，b，i等，使用css控制
    1. 代码要结构化、语义化
    1. css和javascript尽量全部分离到单独的文件中

# 二、css性能优化

    1. 多利用继承，多个子元素公用的样式，如果该样式能继承的话就写在父元素身上
    1. 尽量减少重绘重排的次数
    1. 选择器命名规范，通过id寻找更快
    1. 动画区域开启独立的图层1） 定位： position: absolute/relative2） Will-change: xxx;
    1. 合并、压缩你的css文件，减少http请求，可以借助工具或者自动化构建。
    1. 使用CSS sprite来处理你的图片

# 三、JS性能优化

    1. 合并压缩js
    1. 减少对DOM的操作，避免重绘重排
    1. 减少请求的个数，节省网络资源
    1. 封装功能函数实现复用
    1. 循环语句中避免定义变量
    1. 慎用闭包
    1. 函数节流，函数防抖

← 收集面试题 →