还记得当时电话面试某大厂时问过我一个这样的问题:你觉得js代码放在body标签的前面和后面有什么区别? 所以呀,这个问题其实蛮重要的,很多面试官都会问,那么今天就让我来捋一捋 浏览器加载HTML页面的顺序: 首先我们可以把浏览器加载页面的工作分给渲染引擎和javascript引擎,这两个小伙伴貌似不能同时工作(我也不是很懂,望大神指教)!!! ok,言归正传,浏览器在解析页面时,是从上到下的,我们来看下面这个结构: 浏览器加载顺序: 1、解析到head标签内的内部样式表①,渲染引擎加载样式表中的样式,下载引用到的图片,下载等工作可以跟渲染同时进行。 2、向服务器请求链如样式表②,然后渲染引擎加载样式表中的样式。 3、下载链入js③,浏览器将控制权交给js引擎,js引擎解释执行。 4、遇到script标签,将控制权交给js引擎,从上到下,js引擎解释执行。 5、加载完head标签后,继续向下解析,执行到内部js⑤,js引擎解释执行。 6、加载完body中的标签,之后再将控制权交给js引擎,js引擎解释执行内部js⑥。 7 、遇到html结束标签,加载完毕,将构建好的DOM树和计算好的样式整合构成渲染树(render树),在浏览器窗口中画出。
js文件和script标签的加载 在解析到链入js文件或者script标签时。浏览器会阻塞其它下载,即无法并行解析和下载,在请求js文件时,浏览器会一直等待返回结果并解析完成之后才会继续向下执行。
重点:建议将script标签放在body的最后,因为js文件很有可能会修改DOM树和引用DOM元素,为了不让js文件解析执行时找不到要引用的DOM元素和DOM树被反复修改而带来的性能问题,所以最好将script标签放在body的最后,或者可以在js代码放在window.onload中,意思是等页面全部加载完之后再加载这些js代码。
页面全部渲染加载完毕之后,如果用户的某个操作引起了页面元素样式的变化就会引起重绘或者回流,只有颜色风格这样的样式改变时(比如background-color等)只会引起重绘,而当页面元素的尺寸,是否显示改变时,会引起回流
还有重要的一句话:回流必重绘!!!