网站性能优化·前端篇

时间 2019-11-07

标签网站性能优化前端栏目网站开发繁體版

原文原文链接

咱们的目标是优先显示与用户要在网页上执行的主要操做有关的内容。html

上面这句话出自《关键呈现路径》。前端

什么是前端性能？

前端性能，即页面性能，简单来讲就是能看到页面内容的时间以及能够开始在页面上操做的时间。web

前端性能与浏览器的运做方式密切相关，故想要优化性能就要从了解浏览器是如何显示页面的入手。浏览器

基本流程：数据结构

render tree（页面上所显示的最终结果）是由 DOM tree（开发工具中所显示的 HTML 所定义的内容结构）与 CSSOM tree（样式表所定义的规则结构）合并并剔除不可见的节点所造成的，其中不包含以下节点：框架

资源加载：dom

默认状况下，JavaScript 脚本会在引入它的位置执行（若是是外联脚本则还须要等待加载完毕），这时会阻断 DOM tree 的构建；若是在运行脚本时浏览器还没有完成 CSS 的下载和 CSSOM tree 的构建，浏览器会将脚本执行延迟到这些操做结束以后。异步

影响性能的因素：前端性能

提升如下几个方面，整体性能就会获得大幅度提高：工具

所要达到的理想指标：

为了在首次渲染时尽量快，咱们须要优化如下三个变量：

常规步骤：

经过 Navigation Timing API 能够获取浏览器在处理网页的关键步骤的时间戳。

其中，各步骤的意义以下：

domLoading 表示开始解析第一批收到的 HTML 文档的字节
domInteractive 表示完成所有 HTML 的解析而且 DOM 构建完毕
domContentLoaded 表示 DOM 与 CSSOM 皆已准备就绪
- 若是没有解析器阻塞 JavaScript，DOMContentLoaded 事件会在 domInteractive 以后当即触发
- 不少 JavaScript 框架会在执行它们本身的逻辑前等待这个事件的触发
domComplete 表示全部的处理都已完成而且全部的附属资源都已经下载完毕
loadEvent 做为网页加载的最后一步以便触发附加的应用逻辑

排除阻止呈现的 JavaScript 和 CSS
优化 JavaScript 的用法
- 推荐使用异步 JavaScript 资源
- Avoid synchronous server calls
- 延迟解析 JavaScript
- 避免运行时间长的 JavaScript
优化 CSS 的用法
- 将 CSS 放到文档头部
- 避免使用 CSS import
- 内联阻止呈现的 CSS