摘要:css,js对于首屏的优化问题

什么是首屏?

(1)页面完整地加载好了
(2)显示了全部图片的首屏
(3)没有图片的首屏
如果是(1),<script>标签放在哪里都不影响首屏时间。
如果是(2),<script>标签放在哪里也不影响首屏时间,在图片加载完之前javascript脚本已经下载执行完毕。
所以只讨论第三种情况,即第一次painting。

javascript和css如何影响首屏

(1)javascript会阻塞dom解析,dom解析会影响首屏的展示。
(2)javascript会阻塞css解析。
(3)和首屏有关的css必须被解析为cssdom后,页面才能渲染,然后才能进行首屏的展示。
(4)javascript如果出现在首屏画面,可能会截断首屏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache,no-store, must-revalidate"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>浏览器渲染</title>
    <link rel="stylesheet" href="http://127.0.0.1:8080/style.css">
</head>
<body>
<p id='hh'>1111111</p>
<p>222222</p>
<script src='http://127.0.0.1:8080/b.js'></script>
<script src='http://127.0.0.1:8080/a.js'></script>
<p>3333333</p>
</body>
</html>

b.js和a.js:

for (var i=0;i<100000000;i++)
{ 
   i=i+1;
}

显示效果:

css,js对首屏优化问题.gif

因为javascript耗时过长,浏览器很智能会先painting一部分,前提是style.css下载并且解析完毕

首屏和domContentLoaded有什么关系?

没有关系,首屏是第一次painting的时间。

总结

首屏优化由以下要点:
(1)尽可能把和首屏有关的css放在<head>头部,并且放在<script>前面。
(2)尽可能把和首屏无关的css放在后面。
(3)采用内联css。
(4)<script>尽量放在<body>的尾部。
(5)首屏内尽量不要出现<script>否则可能被截断

文章目录