影响页面首屏加载时间的因素

项目增加后，首屏加载就会出现白屏的问题，一般首屏加载时间最好在2秒以内，才能不影响使用体验

下面介绍下主要影响因素和解决办法：

一、网络问题：

　　1）可能是由于网络厂商和服务器性能决定

　　2）请求太多，由于浏览器并行请求在8个以下，超出的只能排队等待，所以如果请求太多，不仅增加了网络TCP连接时间还增加了等待时间

二、资源位置和大小

　　1) 浏览器解析HTML文件是从上到下解析的，如果遇到资源文件就会暂停解析DOM，先下载文件，在文件执行完成后，继续解析DOM；

　　　 如果CSS文件在最后，则在生成CSSOM后还会和DOM结合重新对页面进行渲染，增加性能消耗。

　　2）基于第一点就要求CSS和JS文件不能太大，且JS文件对DOM操作较少，所以一般放在HTML最后，而CSS对页面渲染影响较大，所以放在文件上方。

三、解决办法

　　1）CSS文件放在HTML页面最上方，JS文件放在最下方，避免出现重绘问题；

　　2）通过webpack等打包工具压缩JS和CSS文件，如果项目模块较多，可以采用SplitChunksPlugin进行分包处理；

　　3）懒加载JS和CSS，在首页只加载必要的渲染页面，其他文件通过懒加载方式引入；

　　4）使用浏览器缓存机制将静态资源缓存到浏览器，加快加载速度；

　　5）http请求个数不能太多，可以将多个数据请求合并成一个，针对小图片资源，可以采用一些工具生成一个大图片，通过坐标位置定位显示，能节省很多请求资源；

　　6）CSS在写法上尽量使用ID和Class选择器，避免使用标签名等低优先级选择器方式；

四、性能分析软件

　　Google浏览器的开发者工具自带了性能分析能力，打开F12，点击到Performance页签，然后

　　1）点击小灰点1

　　2）刷新浏览器

　　3）页签转圈结束后点击屏幕stop，就产生性能报告了

　　4）不同颜色的长条代表不同类型的耗时，条越长，耗时越长，也可以看页面左下角的总结分析

　　5）下面是一个简单的延时录屏，没有开通会员，所以有些水印