一些网页性能优化知识

[amenzai]

web 前端性能优化

CSS JS 的加载与执行

• 理解浏览器端 html css js 的加载过程
• 结合 chrome 的能力学习掌握 css js 的加载过程中的优化点
• 通过案例分析和实战演练深入理解学习的优化点

一个网站在浏览器端是如何进行渲染的？

HTML 渲染过程的一些特点

• 顺序执行、并发加载（词法分析、并发加载、并发上限）
• 是否阻塞（css head 中阻塞页面的渲染、css 阻塞 JS 的执行、css 不阻塞外部脚本的加载） 直接引入的 JS 阻塞页面的渲染、JS不阻塞资源的加载、JS 顺序执行，阻塞后续 JS 逻辑的执行
• 依赖关系（页面渲染依赖 css 的加载、js 的执行顺序的依赖关系、js逻辑对于dom节点的依赖关系 ）
• 引入方式（直接引入、defer、async、异步动态引入）

回流：

• 当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)
• 当页面布局和几何属性改变时就需要回流

使用 performance 工具分析手淘页面的加载过程。

重绘： 当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

回流必将引起重绘、而重绘不一定会引起回流

触发页面重布局的属性：

• 盒子模型相关属性会触发重布局
• 定位属性及浮动也会触发重布局
• 改变节点内部文字结构也会触发重布局

只触发重绘的属性：和外观相关的属性

service worker

• chrome://serviceworker-internals/
• chrome://inspect/#service-workers

图片

• jpg有损压缩，压缩率高，不支持透明
• png支持透明，浏览器兼容好
• webp压缩程度更好，在ios webview有兼容性问题
• svg矢量图，代码内嵌，相对较小，图片样式相对简单的场景

请求过程中一些潜在的性能优化点

dns是否可以通过缓存减少dns查询时间？ 网络请求的过程走最近的网络环境？ 相同的静态资源是否可以缓存？ 能否减少请求http请求大小？ 减少http请求 服务端渲染

深入理解http请求的过程是前端性能优化的核心