通过chrome调试器测试了解浏览器解析和渲染HTML的过程

最新推荐文章于 2024-07-23 11:23:13 发布

codeplay_guo

最新推荐文章于 2024-07-23 11:23:13 发布

阅读量4.3k

点赞数 2

分类专栏： web前端文章标签： html 浏览器前端面试

本文链接：https://blog.csdn.net/u010582082/article/details/70761524

版权

本文通过Chrome的Timeline工具深入探讨浏览器解析HTML的过程，包括DOM树构建、样式加载和脚本执行的影响。详细分析了不同情况下外部样式和脚本如何相互作用，解释了它们的加载和执行顺序，以及如何利用这些知识优化前端性能。

摘要由CSDN通过智能技术生成

基础知识了解chrome的Timeline工具
主要过程
解析与构建DOM树
构建渲染树绘制与布局

1.基础知识：了解chrome的Timeline工具

仅仅是通过理论知识，很难记住和理解浏览器解析html的原则，因此我动手做了些小实验。而做这个实验，不得不用到一个工具：chrome的Timeline工具。

这个工具真的很强大，Timeline工具栏提供了对于在装载Web应用的过程中，时间花费情况的概览，这些应用包括处理DOM事件, 页面布局渲染或者向屏幕绘制元素。Timeline可以通过事件，框架，和实时内存用量3个方面的数据来监测网页，通过这些数据，我们可以方便的找出页面中存在问题的地方。
这里写图片描述

具体的使用方式，这篇博客里有详尽的说明。

2.主要过程

主要渲染过程可以这么归纳（参考文献：http://www.cnblogs.com/dojo-lzz/p/3983335.html）

解析HTML
构建DOM树
DOM树与CSS样式进行附着构造呈现树
布局
绘制

3.解析与构建DOM树

浏览器有专门的html解析器，并且是边解析边构建do’m树的，因此将前两部分放在一块讲。
总体的解析原则是：1.自上而下顺序解析。2.解析过程中遇到外部样式（link,style）和外部脚本(script),会阻塞浏览器的解析。3.外部样式和外部脚本（在没有async、defer属性下）会并行加载，但是外部样式会阻塞外部脚本的执行。

即：html解析->外部样式、脚本加载->外部样式执行->外部脚本执行->html继续解析
情况一：如果是动态脚本（即内联脚本）则不受样式影响，在解析到它时会执行。
情况二：如果是动态创建的样式文件，则不会阻塞后续任何类型脚本的执行。
情况三：外部样式后续外部脚本含有async属性（IE下为defer），外部样式不会阻塞该脚本的加载与执行

3.1外部样式、脚本并行加载，外部样式会阻塞后续脚本执行，直到外部样式加载并解析完毕。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script>var start = +new Date;</script>
  <link href="http://udacity-crp.herokuapp.com/style.css?rtt=2" rel="stylesheet">
   <link href="http://udacity-crp.herokuapp.com/style.css?rtt=1" rel="stylesheet">
</head>
<body>
  <p>I am here!</p>
  <span id="result"></span>
  <p>I am here  two!</p>
  <script>
    var end = +new Date;
    document.getElementById('result').innerHTML = (end-start);
  </script>
</body>
&