前端性能优化——页面加载白屏时间长的原因有什么，页面白屏如何优化？

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

一、概念

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

白屏时间的长短将会直接影响用户对该APP/网站的第一印象。

2）白屏时间计算：

在 </head> 标签前的<script>标签内加入代码：

new Date().getTime() - performance.timing.navigationStart

三、页面白屏到加载完成的过程

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

• DNS解析（即浏览器查找域名的IP地址）
• TCP连接
• 发送HTTP请求
• 服务器处理请求并返回HTTP报文
• 浏览器解析、渲染页面
• 连接结束

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树进入一个并行的过程，当两棵树构建完毕，构建渲染树，然后进行绘制。

浏览器安全解析策略对解析HTML会造成以下影响：

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

四、白屏性能优化的手段

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

使用 meta 标签
使用 link 标签

<meta http-equiv="x-dns-prefetch-control" content="on" />
<link rel="dns-prefetch" href="https://www.baidu.com" />

• DNS缓存优化
• DNS预加载策略
• 稳定可靠的DNS服务器
• TCP网络链路优化
• 服务端处理优化，对于大型网站，可以使用服务器端缓存，如使用Redis、Memcached等技术缓存数据；
• 减少DOM操作和重排操作，避免频繁改变页面结构和样式，提高页面渲染优化；
• 压缩代码：使用工具将 HTML、CSS、JS 等文件进行压缩，减小文件大小，加快加载速度。
• 合并文件：将多个小文件合并成一个大文件，减少浏览器请求次数，加快加载速度。
• 避免使用Flash或其它插件，因为它们会增加页面的加载时间和减缓页面的渲染；
• 将JavaScript脚本放到页面底部，减少页面的加载时间和渲染时间；
• 减小图片大小：使用图片压缩工具，将图片大小减小，减少加载时间。
• 延迟加载：将页面上不必要展示的图片、视频等资源延迟加载，减少首屏加载时间。
• 延迟加载：将页面上不必要展示的图片、视频等资源延迟加载，减少首屏加载时间。
• 优化网络请求：避免重定向、减少 HTTP 请求头大小、使用 HTTP/2 等技术优化网络请求，加快加载速度。

document.documentElement.clientHeight //获取屏幕可视区域的高度
element.offsetTop //获取元素相对于文档顶部的高度