专业编程基础技术教程

网站首页 > 基础教程 正文

做前端必读:浏览器渲染页面原理 浏览器渲染的过程

ccvgpt 2024-10-12 13:59:41 基础教程 9 ℃

对于web前端从业者来说，目前的技术更新迭代的很快，能做到现在已经很不容易了，但是既然要做，就要做好，如果你知道浏览器是如何渲染页面的，那么会加深你对网页的理解，反正我是看完了

浏览器渲染页面过程

做前端必读:浏览器渲染页面原理 浏览器渲染的过程

  1. 用户输入网址，浏览器向服务器发出请求，服务器返回html文件；

  2. 浏览器开始载入全部的html代码，发现<head>标签内有一个<link>标签引用外部CSS文件，浏览器又发出CSS文件的请求，服务器返回这个CSS文件；

  3. 浏览器继续载入html中<body>部分的代码，并且CSS文件已经拿到手了，开始边解析DOM变渲染；

  4. 浏览器在代码中发现一个<img>标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；

  5. 浏览器继续执行时，发现刚刚请求的图片文件返回了，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；

  6. 浏览器发现了一个包含一行Javascript代码的<script>标签，赶快运行；

  7. 浏览器发现了两个个包含外部引用的<script>标签，请求并运行，发送了第一个js请求之后不是阻塞，而是会继续发送第二个JS的外部链接请求，结果出现了意外，第二个js的内容先返回了，这时候浏览器不会执行第二个js的代码，而是会等第一个js的代码返回执行后才执行第二个js的代码；

  8. 浏览器发现了一个<script>外部标签，但是包含了async属性，说明是一个异步请求的js，发送请求但是不必等返回执行；

  9. 在Javascript中，脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个<div> （style.display=”none”）。杯具，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码；

  10. 终于等到了</html>的到来，这次渲染终于完成了，触发DOMContentLoaded事件（jQuery中的$(document).ready();方法）。

  11. 等待所有的图片资源、异步加载的JS文件请求完成了，浏览器赶紧触发了onload事件。

--

切图网（qietu.com）始于2007年，专注web前端开发、培训

学前端实战WX ： dingxiangming82

Tags：

猜你喜欢

最近发表
标签列表