老板说网站慢，我们总结了三大阶段提升性能 _网站

作者：李平
来源：https://www.cnblogs.com/leefreeman/p/3998757.html

前言

在前一篇随笔《大型网站系统架构的演化》中，介绍了大型网站的演化过程，期间穿插了一些技术和手段，我们可以从中看出一个大型网站的轮廓，但想要掌握设计开发维护大型网站的技术，需要我们一步一步去研究实践。所以我打算写一个系列，从理论到实践讲述大型网站的点滴，这也是一个共同学习的过程，希望自己能坚持下去。系列大概会分为两部分，理论和实践，理论部分尽量通俗易懂，也要讲一些细节。实践部分会抽取一些技术做实践，将方法、解决问题过程分享出来。
本文将讲述大型网站中一个重要的要素，性能。

什么是性能

有人说性能就是访问速度快慢，这是最直观的说法，也是用户的真实体验。一个用户从输入网址到按下回车键，看到网页的快慢，这就是性能。对于我们来说，需要去挖掘这个过程，因为这决定我们怎么去做性能优化。

这中间发生了什么

文章插图

用户访问网站的整个流程：用户输入网站域名，通过 DNS 解析，找到目标服务器 IP，请求数据经互联网达到目标服务器，目标服务器收到请求数据，进行处理（执行程序、访问数据库、文件服务器等）。处理完成，将响应数据又经互联网返回给用户浏览器，浏览器得到结果进行计算渲染显示给用户。
我们把整个过程，分为三段路径：
1、第一段在用户和浏览器端，主要负责发出用户请求，以及接受响应数据进行计算渲染显示给用户；
2、第二段在网络上，负责对请求数据、响应数据的传输；
3、第三段在网站服务器端，负责对请求数据进行处理（执行程序、访问数据库、文件等），并将结果返回；

第一路径

第一路径花费的时间包括输入域名发起请求的时间和浏览器收到响应后计算渲染的时间。输入域名发起请求，实质过程是：
1、用户在浏览器输入要访问的网站域名；
2、本地 DNS 请求网站授权的 DNS 服务器对域名进行解析，并得到解析结果即 IP 地址（并将 IP 地址缓存起来）。
3、向目标 IP 地址发出请求。
从这个过程我们可以看到，优化的地方主要是减少 DNS 解析次数，而如果用户浏览器设置了缓存，则再第二次访问相同域名的时候就不会去请求 DNS 服务器，直接用缓存中的 IP 地址发出请求。因此这个过程主要取决于浏览器的设置。现在主流的浏览器默认设置了 DNS 的预取功能（DNS Prefetch），当然你也可以主动告知浏览器我的网站需要做 DNS 预取：
<meta http-equiv="x-dns-prefetch-control" content="on" />浏览器将数据进行计算渲染的过程：
1、浏览器解析响应数据；
2、浏览器创建 DOM 树；
3、浏览器下载 css 样式，并应用到 DOM 树，进行渲染；
4、浏览器下载 JS 文件，开始解析执行；
5、显示给用户。
从这个过程，我们可以找出不少可以优化的地方。首先我们可以尽量控制页面大小，使得浏览器解析的时间更短；并且将多个 CSS 文件、JS 文件文件合并压缩减少文件下载的次数和大小；另外注意将 CSS 放在页面前面，JS 访问页面后面，这样便于页面首先能渲染出来，再执行 js 脚本，对于用户来说有更好的体验。最后我还可以设置浏览器缓存，下次访问时从缓存读取内容，减少 http 请求。
<meta http-equiv="Cache-Control" content="max-age=5" />该代码说明了浏览器启用了缓存并在 5 秒内不会再次访问服务器。注意缓存的设置需要结合你的业务特性来适当配置。
以下是京东商城的 HTML 简图：css 样式放在 html 前面，并且进行了合并。

文章插图

大多数的 JS 文件放在页尾。

文章插图

第二路径

第二路径在网络上，花费的时间同样包括请求数据的传输时间和响应数据的传输时间，这个两个时间取决于数据传输的速度，这里我们要讲一个名词 "带宽" 。什么是带宽，我们经常说带宽 10M，20M 是什么意思？我的带宽 20M，这意味着什么？我们知道带宽速度分为上行、下行速度，也就是上传和下载的速度。带宽 20M 对于用户来说则是下载速度 20M（20×1024×1024 比特率），换算成字节 20M/8=2.5M 。