对于web前端从业者来说,目前的技术更新迭代的很快,能做到现在已经很不容易了,但是既然要做,就要做好,如果你知道浏览器是如何渲染页面的,那么会加深你对网页的理解,反正我是看完了
浏览器渲染页面过程
用户输入网址,浏览器向服务器发出请求,服务器返回html文件;
浏览器开始载入全部的html代码,发现标签内有一个标签引用外部CSS文件,浏览器又发出CSS文件的请求,服务器返回这个CSS文件;
浏览器继续载入html中部分的代码,并且CSS文件已经拿到手了,开始边解析DOM变渲染;
浏览器继续执行时,发现刚刚请求的图片文件返回了,由于图片占用了一定面积,影响了后面段落的排布,因此浏览器需要回过头来重新渲染这部分代码;
浏览器发现了一个包含一行Javascript代码的标签,赶快运行;
浏览器发现了两个个包含外部引用的标签,请求并运行,发送了第一个js请求之后不是阻塞,而是会继续发送第二个JS的外部链接请求,结果出现了意外,第二个js的内容先返回了,这时候浏览器不会执行第二个js的代码,而是会等第一个js的代码返回执行后才执行第二个js的代码;
浏览器发现了一个外部标签,但是包含了async属性,说明是一个异步请求的js,发送请求但是不必等返回执行;
在Javascript中,脚本执行了这条语句,它命令浏览器隐藏掉代码中的某个
(style.display=”none”)。杯具,突然就少了这么一个元素,浏览器不得不重新渲染这部分代码;
终于等到了的到来,这次渲染终于完成了,触发DOMContentLoaded事件(jQuery中的$(document).ready();方法)。
等待所有的图片资源、异步加载的JS文件请求完成了,浏览器赶紧触发了onload事件。
--
来源:切图网(www.qietu.com)。转载请注明,谢谢!