HTML 笔记

257 阅读2分钟

导致页面加载白屏时间长的原因有哪些?怎么优化

一、 白屏时间


即用户点击一个链接或打开浏览器输入URL地址后,从屏幕空白到显示第一个画面的时间。

二、 白屏时间的重要性


当用户点开一个链接或打开浏览器输入URL开始访问时,就开始等待页面的展示。页面渲染的时间越短,用户等待的时间就越短,用户感知到页面的速度就越快。这样可以极大的提升用户的体验,减少用户的跳出,提升页面的留存率。

三、 白屏的过程


从输入URL,到页面的画面展示的过程

  1. 首先,在浏览器地址中输入URL。
  2. 浏览器先查看浏览器缓存-系统缓存-路由器缓存,如果缓存中有,会直接在屏幕展示显示页面内容。若没有则跳到第三步。
  3. 在发送http请求之前,需要进行域名解析(DNS解析),解析获取相应的IP地址。
  4. 浏览器向服务器发送tcp连接,与浏览器建立tcp三次握手。
  5. 握手成功后,浏览器向服务器发送http请求,请求数据包。
  6. 服务器处理收到的请求,将数据返回至浏览器。
  7. 浏览器收到HTTP响应。
  8. 读取页面内容,浏览器0渲染,解析html源码。
  9. 生成DOM树,解析CSS样式,JS交互,渲染显示页面。

四、 白屏性能优化

1. DNS 解析优化


针对 DNS Lookup 环节,我们可以针对性的进行 DNS 解析优化

  • DNS 缓存优化
  • DNS 预加载策略
  • 稳定可靠的 DNS 服务器

2. TCP 网络链路优化


多花点钱!

3. 服务器处理优化

4. 浏览器下载、解析、渲染页面优化

  • 尽可能的精简HTML的代码和结构
  • 尽可能的优化 CSS 文件和结构
  • 一定要合理的放置 JS 代码,尽量不要使用内联的JS代码
  • 将渲染首屏内容所需的关键CSS内联到HTML中,能使CSS更快速地下载。在HTML下载完成之后就能渲染了,页面渲染的时间提前,从而缩短首屏渲染时间;