项目增加后，首屏加载就会出现白屏的问题，一般首屏加载时间最好在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）下面是一个简单的延时录屏，没有开通会员，所以有些水印
标签：文件,浏览器,JS,首屏,页面,CSS,加载 From： https://www.cnblogs.com/codeOnMar/p/17316082.html