关于页面渲染

视频中刚好提到渲染的问题，有几个问题想问一下老师：

关于浏览器的工作机制能详细分析下过程吗，从浏览器开始解释html文件，再到遇到里面引入css文件的link标签，再遇到引入脚本的script标签。
如果css文件在html头部引入，浏览器是会在解析css文件的同时进行body下面的dom树构建吗，css文件的解析会阻塞页面解析吗？
什么时候开始渲染页面？是html和css文件都解析完就能在浏览器看到画面吗？如果dom的解析遇到放在body结束标签前的script标签，是会先解析完js再在浏览器选择画面，还是说JS没解析完，画面就一直不会显示？
不知道后面的课程会不会讲相关问题？看到网上很多说面试被问到这些问题，和提高页面性能有一定联系。说得有点啰嗦，麻烦老师解答~

慕神9465694 2019-11-27

源自：ES6变量的解构赋值 3-1 自定义弹框（一）

收起

1回答

好帮手慕糖回答被采纳获得+3积分 2019-11-27 19:18:18

同学你好，关于你的问题，回答如下：

1、是的。代码从上往下逐步解析，就会同学描述的一样，遇到css，那么就加载css代码，遇到js，就加载js代码。

2、css不会阻塞DOM树构建，但是会阻塞页面渲染。

3、（1）解析完dom树和css就开始渲染。

（2）body里的js会阻塞dom解析，必须先执行完再继续解析然后渲染。但是现代浏览器，会解析一部分渲染一部分，让用户更快看到页面；

（3）js在前会阻塞DOM构建。如果dom的解析遇到放在body结束标签前的script标签，放在前面的话，需要使用window.onload事件包裹js代码，否则会报错，而这个是先加载完html结构在加载js。画面会显示，但是js的效果，需要等js加载完，不过这个过程是很快的，一般是不考虑这里的。

4、这部分内容，在实际中，并不是很常用，简单了解下就可以了。一般知道代码的执行顺序是从上而下的就可以了。

如果我的回答帮助了你，欢迎采纳，祝学习愉快~

收起回答