Picker Ready Go

# 前端性能优化之白屏时间

性能优化之白屏时间 (opens new window)

前端可以做的性能优化 (opens new window)

# 白屏过程

# 1、DNS 查询

# 2、建立TCP请求连接

# 3、服务端请求处理响应

# 4、客户端下载、解析、渲染显示页面

# 白屏优化

# 1. 网络优化

  • 1、DNS预解析 dns-Prefetch；
  • 2、使用缓存 强缓存和协商缓存
  • 3、使用 CDN（内容分发网络）
  • 4、压缩响应
  • 5、使用多个域名 - 使用不同的域名可以最大化下载线程
  • 6、避免图片src为空

TIP

压缩组件通过减少 HTTP 请求产生的响应包的大小，从而降低传输时间的方式来提高性能。从 HTTP1.1 开始，Web 客户端可以通过 HTTP 请求中的 Accept-Encoding 头来标识对压缩的支持（这个请求头会列出一系列的压缩方法）

如果 Web 服务器看到请求中的这个头，就会使用客户端列出的方法中的一种来压缩响应。Web 服务器通过响应中的 Content-Encoding 头来告知 Web 客户端使用哪种方法进行的压缩

目前许多网站通常会压缩 HTML 文档，脚本和样式表的压缩也是值得的（包括 XML 和 JSON 在内的任何文本响应理论上都值得被压缩）。但是，图片和 PDF 文件不应该被压缩，因为它们本来已经被压缩了。

# 2、页面渲染优化

渲染引擎流程：

  • 处理 HTML 并构建 DOM 树

  • 处理 CSS 构建 CSS 规则树(CSSOM)

  • DOM Tree 和 CSSOM Tree 合成一棵渲染树 Render Tree。

  • 根据渲染树来布局，计算每个节点的位置

  • 调用 GPU 绘制，合成图层，显示在屏幕上

  • 1、避免css阻塞 - 将 CSS 放在 head 标签里；CDN 实现静态资源加载速度的优化；

  • 2、降低css选择器的复杂度

    • 2.1、减少嵌套：最多不要超过三层，并且后代选择器的开销较高，慎重使用
    • 2.2、避免使用通配符，对用到的元素进行匹配即可
    • 2.3、利用继承，避免重复匹配和定义
    • 2.4、正确使用类选择器和id选择器

  • 3、避免使用CSS 表达式

  • 4、避免js阻塞

    js可以修改CSSOM和DOM，因此js会阻塞页面的解析和渲染，并且会等待css资源的加载。也就是说js会抢走渲染引擎的控制权。所以我们需要给js资源添加defer或者async，延迟js脚本的执行。

  • 5、使用外链式的js和css ？？

  • 6、使用字体图标 iconfont 代替图片图标

  • 7、首屏加载优化

    • 7.1、使用骨架屏或者动画优化用户体验
    • 7.2、资源按需加载，首页不需要的资源延迟加载
    • 7.3、减小webpack 打包体积 - split chunk; externals 静态资源。webpack优化

  • 8、减少重绘和回流

    • 8.1、增加多个节点使用documentFragment：不是真实dom的部分，不会引起重绘和回流
    • 8.2、用 translate 代替 top ，因为 top 会触发回流，但是translate不会。所以translate会比top节省了一个layout的时间
    • 8.3、使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回流（改变了布局）；opacity 代替 visiability，visiability会触发重绘（paint），但opacity不会。
    • 8.4、把 DOM 离线后修改，比如：先把 DOM 给 display:none (有一次 Reflow)，然后你修改 100 次，然后再把它显示出来
    • 8.5、不要把 DOM 结点的属性值放在一个循环里当成循环里的变量
    • 8.6、尽量少用table布局，table布局的话，每次有单元格布局改变，都会进行整个tabel回流重绘；
    • 8.7、最好别频繁去操作DOM节点，最好把需要操作的样式，提前写成class，之后需要修改。只需要修改一次，需要修改的时候，直接修改className，做成一次性更新多条css DOM属性，一次回流重绘总比多次回流重绘要付出的成本低得多；
    • 8.8、动画实现的速度的选择，动画速度越快，回流次数越多，也可以选择使用 requestAnimationFrame
    • 8.9、每次访问DOM的偏移量属性的时候，例如获取一个元素的scrollTop、scrollLeft、scrollWidth、offsetTop、offsetLeft、offsetWidth、offsetHeight之类的属性，浏览器为了保证值的正确也会回流取得最新的值，所以如果你要多次操作，最取完做个缓存。更加不要for循环中访问DOM偏移量属性，而且使用的时候，最好定义一个变量，把要需要的值赋值进去，进行值缓存，把回流重绘的次数减少；
    • 8.10、将频繁运行的动画变为图层，图层能够阻止该节点回流影响别的元素。比如对于 video 标签，浏览器会自动将该节点变为图层。

以上部分是白屏优化！

# 3、JS中的性能优化

  • 1、使用事件委托
  • 2、防抖和节流
  • 3、尽量不要使用JS动画- css3动画和canvas动画都比JS动画性能好
  • 4、多线程 - 复杂的计算开启webWorker进行计算，避免页面假死
  • 5、计算结果缓存， 避免重复计算

# 4、图片优化

  • 1、雪碧图 -减少http请求次数
  • 2、图片懒加载
  • 3、使用CSS3代替图片
  • 4、图片压缩 - 一是通过在线网站进行压缩，二是通过 webpack 插件 image-webpack-loader
  • 5、使用渐进式jpeg??
  • 6、使用 webp 格式的图片

# 5、webpack打包优化

webpack优化

# 6、React

  • 1、map循环展示添加key
  • 2、路由懒加载
  • 3、第三方插件按需引入
  • 4、使用scu，memo或者pureComponent避免不必要的渲染
  • 5、合理使用useMemo、memo、useCallback

他们三个的应用场景都是缓存结果，当依赖值没有改变时避免不必要的计算或者渲染。

  • useCallback 是针对函数进行“记忆”的，当它依赖项没有发生改变时，那么该函数的引用并不会随着组件的刷新而被重新赋值。当我们觉得一个函数不需要随着组件的更新而更新引用地址的时候，我们就可以使用 useCallback 去修饰它。
  • React.memo 是对组件进行 “记忆”，当它接收的 props 没有发生改变的时候，那么它将返回上次渲染的结果，不会重新执行函数返回新的渲染结果。
  • React.useMemo是针对 值计算 的一种“记忆“，当依赖项没有发生改变时，那么无需再去计算，直接使用之前的值，对于组件而言，这带来的一个好处就是，可以减少一些计算，避免一些多余的渲染。当我们遇到一些数据需要在组件内部进行计算的时候，可以考虑一下 React.useMemo

针对DNS Lookup环节，我们可以针对性的进行DNS解析优化。

  • DNS缓存优化
  • DNS预加载策略 dns-Prefetch
  • 稳定可靠的DNS服务器

# 2. TCP网络链路优化

针对网络链路的优化，好像除了花钱没有什么更好的方式！

# 3. 服务端处理优化

服务端的处理优化，是一个非常庞大的话题，会涉及到如Redis缓存、数据库存储优化或是系统内的各种中间件以及Gzip压缩等...

# 4. 浏览器下载、解析、渲染页面优化

根据浏览器对页面的下载、解析、渲染过程，可以考虑一下的优化处理：

  • 尽可能的精简HTML的代码和结构
  • 尽可能的优化CSS文件和结构
  • 一定要合理的放置JS代码，尽量不要使用内联的JS代码

前端可以做的性能优化有哪些 (opens new window)

←