浏览器性能

[Amybiubiu]

浏览器性能

参考链接

• web dev
• 页面性能

  缩短白屏时长

• 通过内联 JavaScript、内联 CSS 来移除这两种类型的文件下载，这样获取到 HTML 文件之后就可以直接开始渲染流程了。
• 但并不是所有的场合都适合内联，那么还可以尽量减少文件大小，比如通过 webpack 等工具移除一些不必要的注释，并压缩 JavaScript 文件。
• 还可以将一些不需要在解析 HTML 阶段使用的 JavaScript 标记上 async 或者 defer。
• 对于大的 CSS 文件，可以通过媒体查询属性，将其拆分为多个不同用途的 CSS 文件，这样只有在特定的场景下才会加载特定的 CSS 文件。<link media="orientation:landscape" />

  性能分析

图片优化

• 使用适合的图片格式，如图标类的使用 vector graphics （如 svg）；复杂的图片选择 raster graphics （如png、jpeg）。
• 使用插件将图片压缩（如 mozjpeg）
• image CDNs

图片懒加载

• 设置 img 的 loading lazy 属性。
• 作为 background-image url。在构建 render-tree 的时候，浏览器检测到该样式不应用于当下时（eg: hover)，不会请求该资源。

[Amybiubiu]