3-3 如何加快页面渲染速度，都有哪些方式？

提高Web页面渲染速度的7个技巧: https://blog.csdn.net/Taobaojishu/article/details/117458077
作为前端你可能要知道如何加快页面渲染速度的几点知识: https://www.jianshu.com/p/424f835c599a

1. content-visibility 提高页面渲染

CSS的content-visibility来跳过屏幕外的内容渲染。也就是说，如果你有大量的离屏内容（Off-screen Content），这将会大幅减少页面渲染时间。
content-visibility非常强大，提高页面渲染非常有用。换然话说，有了CSS的content-visibility属性，影响浏览器的渲染过程就变得更加容易。本质上，这个属性 改变了一个元素的可见性，并管理其渲染状态。

2. will-change 动画优化

will-change能提高性能，但这个属性应该被认为是最后的手段，它不是为了过早的优化。只有消退你必须处理性能问题时，你才应该使用它。如果你滥用的话，反而会降低Web的性能

3. contain

该属性允许我们指定特定的DOM元素和它的子元素，让它们能够独立于整个DOM树结构之外。目的是能够让浏览器有能力只对部分元素进行重绘、重排，而不必每次针对整个页面。

4. font-display 优化字体加载性能

  1. auto：默认值。典型的浏览器字体加载的行为会发生，也就是使用自定义字体的文本会先被隐藏，直到字体加载结束才会显示。即字体展示策略与浏览器一致，当前，大多数浏览器的默认策略类似block

  2. block：给予字体一个较短的阻塞时间（大多数情况下推荐使用 3s）和无限大的交换时间。换言之，如果字体未加载完成，浏览器将首先绘制“隐形”文本；一旦字体加载完成，立即切换字体。为此，浏览器将创建一个匿名字体，其类型与所选字体相似，但所有字形都不含“墨水”。使用特定字体渲染文本之后页面方才可用，只有这种情况下才应该使用 block。

  3. swap：使用 swap，则阻塞阶段时间为 0，交换阶段时间无限大。也就是说，如果字体没有完成加载，浏览器会立即绘制文字，一旦字体加载成功，立即切换字体。与 block 类似，如果使用特定字体渲染文本对页面很重要，且使用其他字体渲染仍将显示正确的信息，才应使用 swap。

  4. fallback：这个可以说是auto和swap的一种折中方式。需要使用自定义字体渲染的文本会在较短的时间不可见，如果自定义字体还没有加载结束，那么就先加载无样式的文本。一旦自定义字体加载结束，那么文本就会被正确赋予样式。使用 fallback时，阻塞阶段时间将非常小（多数情况下推荐小于 100ms），交换阶段也比较短（多数情况下建议使用 3s）。换言之，如果字体没有加载，则首先会使用后备字体渲染。一旦加载成功，就会切换字体。但如果等待时间过久，则页面将一直使用后备字体。如果希望用户尽快开始阅读，而且不因新字体的载入导致文本样式发生变动而干扰用户体验，fallback 是一个很好的选择。

  5. optional：效果和fallback几乎一样，都是先在极短的时间内文本不可见，然后再加载无样式的文本。不过optional选项可以让浏览器自由决定是否使用自定义字体，而这个决定很大程度上取决于浏览器的连接速度。如果速度很慢，那你的自定义字体可能就不会被使用。使用 optional 时，阻塞阶段时间会非常小（多数情况下建议低于 100ms），交换阶段时间为 0。

5. scroll-behavior让滚动更流畅

scroll-behavior是CSSOM View Module提供的一个新特性，可以轻易的帮助我们实现丝滑般的滚动效果。该属性可以为一个滚动框指定滚动行为，其他任何的滚动，例如那些由于用户行为而产生的滚动，不受这个属性的影响。

scroll-behavior接受两个值：

auto ：滚动框立即滚动

smooth ：滚动框通过一个用户代理定义的时间段使用定义的时间函数来实现平稳的滚动，用户代理平台应遵循约定，如果有的话

6. 将 CSS 分成多个文件

默认情况下，浏览器假设每个指定的样式表都是阻塞渲染的。通过添加 media属性附加媒体查询，告诉浏览器何时应用样式表。当浏览器看到一个它知道只会用于特定场景的样式表时，它仍会下载样式，但不会阻塞渲染。通过将 CSS 分成多个文件，主要的 阻塞渲染 文件 的大小变得更小，从而减少了渲染被阻塞的时间。

7. async || defer 异步加载

  1. async: 字面意思就是 异步，他将告诉浏览器，此js文件是异步加载的，也就意味着浏览器加载到此处时不会堵塞，
    会和其他元素节点同时进行；

  2. defer：字面意思是 推迟， 他规定浏览器是否对脚本执行进行延迟，直到页面加载为止。
    一旦页面加载完毕就会立即执行该文件；

8. 其他

  1. 处理好循环操作，比如将循环的数组赋值一个变量，去循环其变量；
  2. 如果要向页面追加数据，可使用:document.createDocumentFragment( ) 根据系统刷新不乏走，最大程度避免丢帧现象；
  3. 对源代码进行压缩；
  4. 懒加载；
  5. 防抖： 输入搜索时候，可以用debounce等优化方式，减少HTTP请求；
  6. 节流：简单解答：只允许一个函数在N秒内执行一次，从而减少HTTP请求；
  7. 图片编码优化，尽量使用svg和字体图标

9. 服务器

  1. 利用CDN
  2. 按需加载资源
  3. 在使用 DOM 操作库时用上 array-ids
  4. 缓存优化
  5. 避免重定向
  6. 启用 HTTP/2
  7. 应用性能分析
  8. 使用负载均衡方案
  9. 使用索引加速数据库查询
  10. 使用更快的转译方案
2022目标

相关

标签