Wepress

Appearance

导致页面加载白屏时间长的原因有哪些，怎么进行优化？ ​

参考答案： ​

一、白屏时间 ​

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

二、白屏时间的重要性 ​

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

三、白屏的过程 ​

从输入url，到页面的画面展示的过程

1、首先，在浏览器地址栏中输入url

2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。

3、在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址。

4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。

5、握手成功后，浏览器向服务器发送http请求，请求数据包。

6、服务器处理收到的请求，将数据返回至浏览器

7、浏览器收到HTTP响应

8、读取页面内容，浏览器渲染，解析html源码

9、生成Dom树、解析css样式、js交互,渲染显示页面

浏览器下载HTML后，首先解析头部代码，进行样式表下载，然后继续向下解析HTML代码，构建DOM树，同时进行样式下载。当DOM树构建完成后，立即开始构造CSSOM树。理想情况下，样式表下载速度够快，DOM树和CSSOM树进入一个并行的过程，当两棵树构建完毕，构建渲染树，然后进行绘制。

Tips:浏览器安全解析策略对解析HTML造成的影响：

当解析HTML时遇到内联JS代码，会阻塞DOM树的构建，会先执行完JS代码;当CSS样式文件没有下载完成时，浏览器解析HTML遇到了内联JS代码，此时，浏览器暂停JS脚本执行，暂停HTML解析。直到CSS文件下载完成，完成CSSOM树构建，重新恢复原来的解析。

JavaScript 会阻塞 DOM 生成，而样式文件又会阻塞 JavaScript 的执行，所以在实际的工程中需要重点关注 JavaScript 文件和样式表文件，使用不当会影响到页面性能的。

四、白屏-性能优化 ​

1. DNS解析优化 ​

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

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

2. TCP网络链路优化 ​

多花点钱吧

3. 服务端处理优化 ​

服务端的处理优化，是一个非常庞大的话题，会涉及到如Redis缓存、数据库存储优化或是系统内的各种中间件以及Gzip压缩等…

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

根据浏览器对页面的下载、解析、渲染过程，可以考虑一下的优化处理：

  • 尽可能的精简HTML的代码和结构
  • 尽可能的优化CSS文件和结构
  • 一定要合理的放置JS代码，尽量不要使用内联的JS代码
  • 将渲染首屏内容所需的关键CSS内联到HTML中，能使CSS更快速地下载。在HTML下载完成之后就能渲染了，页面渲染的时间提前，从而缩短首屏渲染时间；
  • 延迟首屏不需要的图片加载，而优先加载首屏所需图片（offsetTop<clientHeight）
js
document.documentElement.clientHeight//获取屏幕可视区域的高度
element.offsetTop//获取元素相对于文档顶部的高度

因为JavaScript 会阻塞 DOM 生成，而样式文件又会阻塞 JavaScript 的执行，所以在实际的工程中需要重点关注 JavaScript 文件和样式表文件，使用不当会影响到页面性能的。

题目要点： ​

作答思路：

页面加载白屏时间长的原因可能包括：

  1. 资源加载缓慢：HTML、CSS、JavaScript文件、图片等资源加载缓慢，导致页面内容无法及时显示。
  2. 服务器响应时间长：服务器处理请求的时间较长，导致页面内容无法及时返回。
  3. 浏览器解析时间长：浏览器解析HTML、CSS、JavaScript文件的时间较长，导致页面内容无法及时渲染。
  4. 网络延迟：用户与服务器之间的网络延迟较大，导致页面内容无法及时传输。
  5. 浏览器缓存策略：浏览器缓存策略不合理，导致页面内容无法从缓存中获取，需要重新加载。

优化方法包括：

  1. 压缩资源文件：对HTML、CSS、JavaScript文件、图片等进行压缩，减少文件大小，加快加载速度。
  2. 使用CDN：将静态资源（如图片、CSS、JavaScript文件）托管在CDN上，提高资源加载速度。
  3. 优化服务器响应时间：优化服务器配置，提高服务器处理请求的速度。
  4. 减少HTTP请求：合并CSS、JavaScript文件，减少HTML页面中的图片数量，减少HTTP请求的数量。
  5. 使用浏览器缓存：设置合理的浏览器缓存策略，让页面内容可以从缓存中获取，加快页面加载速度。
  6. 优化网络环境：优化网络环境，减少网络延迟，提高页面内容的传输速度。

考察要点：

  1. 白屏原因：理解页面加载白屏时间长的可能原因。
  2. 优化方法：了解如何通过优化资源、服务器、网络环境等方面来减少白屏时间。