关于首屏加载较慢的原因有哪些，怎么进行优化

一，白屏时间

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

二，白屏时间的重要性

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

三，白屏的过程

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

1. 首先，在浏览器地址栏中输入url
2. 浏览器先查看浏览器缓存-系统缓存-路由缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作
3. 在发送http请求前，需要域名解析（dns）,解析获取相应的ip地址
4. 浏览器向服务器发起tcp连接，与浏览器及建立tcp三次握手
5. 握手成功后，浏览器向服务器发送请求，请求数据包
6. 服务器处理收到的请求，将数据返回至浏览器
7. 浏览器收到http响应
8. 读取页面内容，浏览器渲染，解析html源码
9. 生成dom树，解析css样式，js交互，渲染显示页面

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

tips：浏览器安全解析策略对解析html造成的影响

当解析html时遇到内联js代码，会阻塞dom树的构建，会先执行完js代码，当css样式文件没有下载完成时，浏览器解析html遇到了内联js代码，此时，浏览器停止js脚本执行，暂时html解析，知道css文件下载完成，完成cssom树构建，重新恢复原来的解析

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

四，白屏-性能优化

1，DNS解析优化

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

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

2，tcp网络链路优化

多花点钱

3，服务端处理优化

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

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

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

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