网页如何加载

• 01-01 – 网页如何加载
  • 网页速度测试
  • 网页速度指标
    • DNS查询时间
    • 初始连接时间
    • 首字节传送时间（TTFB）
    • 内容下载时间
  • 步骤

---

第一部分 – 第01章

对于移动网站而言，网页加载速度是影响用户体验的一个最重要因素。

• 74% – 这些用户期望移动端网站能像PC端网站 一样快速加载。
• 57% – 这些用户认为那些让他们感觉加载缓慢的网站，他们是不会推荐朋友们使用的。
• 46% – 这些用户如果体验到一个网站加载缓慢，将不会再次访问这个网站。
• 5秒 – 如果一个网站在移动设备上的加载时间比这个时长还要久，那么用户就会选择离开这个网站。

让我们展示当用户从web浏览器访问一个网页时，这个网页是如何加载的。

网站：www.chinawaw.org

• 这是一个采用响应式设计方法创建的网站，它的内容管理系统软件正是采用的Wordpress。

工具：www.webpagetest.org

• 这个是进行网页速度测试的经典工具。

网页速度测试

采用网页测试工具对www.chinawaw.org网站主页进行测试。测试结果中，每一个水平条代表着一个http请求。第一个横条“www.chinawaw.org – /“就是对网页HTML文件的初始请求。Web浏览器对页面进行解析并开始下载组成网页的那些资源文件。

完成整个页面的加载要求下载非常非常多的资源文件，其中的一些资源文件列示如下：

www.chinawaw.org/.../css/foundation.min.css
www.chinawaw.org/.../css/font-awesome.min.css
www.chinawaw.org/.../css/photoswipe.css
www.chinawaw.org/.../css/flexslider.css
www.chinawaw.org/.../css/responsive-tables.css
www.chinawaw.org/.../smartadapt/style.css
www.chinawaw.org/.../jquery/jquery.js
www.chinawaw.org/.../jquery/jquery-migrate.min.js

从报告中看到，加载过程的大部分时间都被用来下载组成整个页面的所有资源文件。这些资源文件可能是CSS文件，JavaScript文件，图片文件等等。

网页速度指标

这个报告展示了网站页面加载的关键指标，这些指标用于衡量页面加载时每个文件资源的性能表现。关键指标包括如下：

DNS查询时间