We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
技术社区中其实已经有较多的关于前端性能优化的相关文章，看了多篇之后总是觉得内容还有很多遗漏或写得不够完美，尽管还没接手过流量特别大的网站应用项目，但是本人认为日常项目中也需要尽可能地进行性能优化的工作，因为前端工程师的工作很大程度上可以描述为“用尽量少的代价为用户提供效率尽可能高、功能尽可能多、体验尽可能好的网页应用”，而性能优化很大程度上就是实现“尽可能少的代价”、“效率尽可能高”以及“体验尽可能好”。
因此，此文会根据网络请求到网页呈现的完整流程，针对性地提出相关阶段供开发决策者考虑采取的优化方案，因此本文更像是性能优化方案的决策树，而非标准方案：
网络请求到网页呈现的大致流程
发送网络请求 => 网络链路 => 返回资源(服务端) => 渲染资源(客户端)
在提出各层次的优化方案之前，有必要了解一下性能优化方案实际上解决了哪些性能问题以及解决这些问题的核心归结点。
以下部分关于优化关键渲染路径的建议摘录自 Google 开发者文档： 📖 Optimizing the Critical Rendering Path
为了尽快完成首次渲染，我们需要最大限度减小以下三种可变因素：
关键资源是可能阻止网页首次渲染的资源。这些资源越少，浏览器的工作量就越小，对 CPU 以及其他资源的占用也就越少。
同样，关键路径长度受所有关键资源与其字节大小之间依赖关系图的影响：某些资源只能在上一资源处理完毕之后才能开始下载，并且资源越大，下载所需的往返次数就越多。
最后，浏览器需要下载的关键字节越少，处理内容并让其出现在屏幕上的速度就越快。要减少字节数，我们可以减少资源数（将它们删除或设为非关键资源），此外还要压缩和优化各项资源，确保最大限度减小传送大小。
优化关键渲染路径的常规步骤如下：
网络链路作为网络资源和数据的传输通道，充分利用网络技术手段能有效地减少网页资源响应的速度、提升网页资源传输速度以及避免重复传输导致的资源浪费等问题。
DNS 域名解析协议简单来就说负责将域名 URL 转化为服务器主机 IP。了解更多 DNS 域名解析协议
DNS 查询能从两方面进行优化：
通过在文档中使用值为 http-equiv 的 <meta> 标签打开 DNS 预解析：
http-equiv
<meta>
<meta http-equiv="x-dns-prefetch-control" content="on">
通过 rel 属性值为 dns-prefetch 的 <link> 标签对特定域名进行预读取
rel
dns-prefetch
<link>
<link rel='dns-prefetch" href="//host_name_to_prefetch.com"/>
相关链接：
持久化连接：避免重复进行 TCP 的三次握手，HTTP/1.1 默认开启，HTTP/1.0 可以使用。
Keep-Alive 不会永久保持连接，开发者可通过服务器配置限定时间。
Connection: keep-alive
/
制定有效的缓存策略，很大程度上能实现资源的重复利用及传输路径的优化，减少客户端对服务端的网络请求压力，减轻宽度流量。
Expires: Thu, 21 Jan 2017 23:59:59 GMT
Cache-Control: max-age=3600
Expires: Wed, 26 Jan 2017 00:35:11 GMT
由于本文只涉及前端性能优化，但为求流程完整，简单罗列与服务端相关的优化方案的常见手段。
Accept-Encoding: gzip, deflate
Content-Encoding: gzip
<script type="module"> / <script type="module">
优化加载顺序
<head>
<body>
defer
async
style
script
资源加载方式
<textarea>
type
<script>
资源渲染
offsetWidth
offsetHeight
getComputedStyle
编码优化，指的就是在代码编写时的，通过一些 最佳实践，提升代码的执行性能。通常这并不会带来非常大的收益，但这属于程序员的自我修养，而且这也是面试中经常被问到的一个方面，考察自我管理与细节的处理。
import()
requestAnimationFrame
setTimeout
setInterval
.xxx-child-text{}
.xxx .child .text{}
font-color: expression((new Date()).getHours()%3?"#FFF":"#AAA")
<!DOCTYPE html>
src
href
<br/>
<hr/>
性能优化方案清单
优化方向
The text was updated successfully, but these errors were encountered:
No branches or pull requests
概要
技术社区中其实已经有较多的关于前端性能优化的相关文章，看了多篇之后总是觉得内容还有很多遗漏或写得不够完美，尽管还没接手过流量特别大的网站应用项目，但是本人认为日常项目中也需要尽可能地进行性能优化的工作，因为前端工程师的工作很大程度上可以描述为“用尽量少的代价为用户提供效率尽可能高、功能尽可能多、体验尽可能好的网页应用”，而性能优化很大程度上就是实现“尽可能少的代价”、“效率尽可能高”以及“体验尽可能好”。
因此，此文会根据网络请求到网页呈现的完整流程，针对性地提出相关阶段供开发决策者考虑采取的优化方案，因此本文更像是性能优化方案的决策树，而非标准方案：
网络请求到网页呈现的大致流程
关键渲染路径
在提出各层次的优化方案之前，有必要了解一下性能优化方案实际上解决了哪些性能问题以及解决这些问题的核心归结点。
以下部分关于优化关键渲染路径的建议摘录自 Google 开发者文档：
📖 Optimizing the Critical Rendering Path
为了尽快完成首次渲染，我们需要最大限度减小以下三种可变因素：
关键资源是可能阻止网页首次渲染的资源。这些资源越少，浏览器的工作量就越小，对 CPU 以及其他资源的占用也就越少。
同样，关键路径长度受所有关键资源与其字节大小之间依赖关系图的影响：某些资源只能在上一资源处理完毕之后才能开始下载，并且资源越大，下载所需的往返次数就越多。
最后，浏览器需要下载的关键字节越少，处理内容并让其出现在屏幕上的速度就越快。要减少字节数，我们可以减少资源数（将它们删除或设为非关键资源），此外还要压缩和优化各项资源，确保最大限度减小传送大小。
优化关键渲染路径的常规步骤如下：
网络链路层面
网络链路作为网络资源和数据的传输通道，充分利用网络技术手段能有效地减少网页资源响应的速度、提升网页资源传输速度以及避免重复传输导致的资源浪费等问题。
传输策略
DNS 查询
DNS 域名解析协议简单来就说负责将域名 URL 转化为服务器主机 IP。了解更多 DNS 域名解析协议
DNS 查询能从两方面进行优化：
通过在文档中使用值为
http-equiv的<meta>标签打开 DNS 预解析：通过
rel属性值为dns-prefetch的<link>标签对特定域名进行预读取相关链接：
TCP 连接
持久化连接：避免重复进行 TCP 的三次握手，HTTP/1.1 默认开启，HTTP/1.0 可以使用。
Keep-Alive 不会永久保持连接，开发者可通过服务器配置限定时间。
Connection: keep-aliveHTTP 请求
/但未添加相关链接：
缓存策略
制定有效的缓存策略，很大程度上能实现资源的重复利用及传输路径的优化，减少客户端对服务端的网络请求压力，减轻宽度流量。
Expires: Thu, 21 Jan 2017 23:59:59 GMT服务器和客户端时间可能不一致Cache-Control: max-age=3600Expires: Wed, 26 Jan 2017 00:35:11 GMT资源上次修改的时间相关链接：
服务端层面
由于本文只涉及前端性能优化，但为求流程完整，简单罗列与服务端相关的优化方案的常见手段。
客户端层面
资源渲染数量/大小
Accept-Encoding: gzip, deflateContent-Encoding: gzip<script type="module"> / <script type="module">进行条件引入用资源渲染路径
优化加载顺序
<head>标签中引入<head>中可以让页面渐进渲染，尽早呈现视觉反馈，给用户加载速度很快的感觉<body>标签底部引入defer属性的脚本文件是在 HTML 解析完之后才会执行。如果是多个，按照加载的顺序依次执行async属性的脚本文件是在加载之后立即执行，如果 HTML 还没解析完，会阻塞 HTML 继续解析。如果是多个，执行顺序和加载顺序无关<head>或<body>首子节点引入，甚至利用style或script内联资源加载方式
<textarea>，或者type属性为非执行脚本的<script>标签中，减少初始渲染的 DOM 元素数量，提高速度。等首屏加载完成或者用户操作时，再去渲染剩余的页面内容。资源渲染
offsetWidth、offsetHeight和getComputedStyle等相关链接：
用户体验
编码层面
编码优化，指的就是在代码编写时的，通过一些 最佳实践，提升代码的执行性能。通常这并不会带来非常大的收益，但这属于程序员的自我修养，而且这也是面试中经常被问到的一个方面，考察自我管理与细节的处理。
JavaScript 优化
import()DOM 优化
requestAnimationFrame来实现视觉变化：一般来说我们会使用setTimeout或setInterval来执行动画之类的视觉变化，但这种做法的问题是，回调将在帧中的某个时点运行，可能刚好在末尾，而这可能经常会使我们丢失帧，导致卡顿CSS 优化
.xxx-child-text{}优于.xxx .child .text{}<link>替代原生 @importfont-color: expression((new Date()).getHours()%3?"#FFF":"#AAA")这个表达式会持续地在页面上计算样式，影响页面性能HTML 优化
<!DOCTYPE html>这能确保浏览器按照最佳的相关规范进行渲染src和href：当src和href为空时，浏览器会默认填充链接，并将页面的内容加载进来作为它们的值，具体规则如下：<br/>与<hr/>参考资料
性能优化方案清单
优化方向
The text was updated successfully, but these errors were encountered: