zoukankan      html  css  js  c++  java
  • 浏览器渲染html的过程

    关于浏览器如何渲染html界面一直不太清晰,所以现在理一理。由于本身对前深入的东西不太清晰,这篇博客更多的是在记录。

    参考:https://www.cnblogs.com/dojo-lzz/p/3983335.html

    一、渲染步骤

      浏览器在接收到html文件后,会分几个步骤html文件转化成界面,这个过程就是渲染。

      1、解析html

      2、构建dom树

      3、dom树结合css文件,构建呈现树

      4、布局

      5、绘制

    先整体描述一下我的理解:

        1、解析html和构建dom树是同步进行的,这个过程就是逐行解析代码,包括html标签和js动态生成的标签,最终生成dom树。

        2、构建呈现树,就是把css文件和style标签的中的内容,结合dom树的模型,构建一个呈现树,写到内存,等待进一步生成界面。呈现树一定依赖dom树,呈现节点一定会有对应的dom节点,但是dom节点不一定会有对应的呈现节点,比如,被隐藏的一个div。

        3、布局,这一步就是结合呈现树,把dom节点的大小、位置计算出来。虽然呈现节点已经附着在都没节点上,会有对元素大小、位置的定义,但是浏览器还需要根据实际窗口大小进行计算,比如对auto的处理。

        4、绘制,把css中有关颜色的设置,背景、字体颜色等呈现出来。

    二、html解析和dom树构建

      关于渲染的过程,dom树的构建对与一些后端人员还是比较重要的,它关系到js代码能否正确的被执行。

      html的解析,遵循以下规则:

      1、按顺序解析。

        html的代码,是从上到下一行行执行的,也就是说如果js代码写在head头里,且没有用加在$().ready(function)方法里,那么他是无法读取到body里的标签的。之所以加在$().ready(function)里可以执行,是因为,$().ready(function)里的函数会在dom树加载之后执行,当然执行之久dom可能还会改变。

      2、link标签的加载,阻塞后续代码执行,但不阻塞后续外部文件(link、script)加载。

        html的代码是按顺序解析,那么在遇到link标签后,会在link加载(从服务器下载)完毕后,再执行后续代码。但与此同时,如何还有外部文件,则是同时加载。但是外部文件内的代码不会执行,只会在代码解析到它的时候执行。

      3、添加async属性的script。

        添加async属性之后,script加载的外部文件成为了异步加载,这时相当于它于原本的html解析过程同步进行。所以他不会被任何加载过程阻塞,只会在自己加载完成之后执行。但是,异步执行的影响就是,它如要读取dom节点,很可能会失败,因为它的加载和html解析过程没有了先后顺序。另外,如果它要输出动态的dom节点,就无法保证节点的位置,因为它添加的节点,是在html已解析的节点下顺序添加的。

     <script src="http://udacity-crp.herokuapp.com/time.js?rtt=1&a" async></script>

      4、对于动态创建的link标签不会阻塞其后动态创建的script标签的加载和执行,但是其后非动态创建的script扔按1、2、3条的规则执行。

    就算这个世道烂成一堆粪坑,那也不是你吃屎的理由
  • 相关阅读:
    C# 不用添加WebService引用,调用WebService方法
    贪心 & 动态规划
    trie树 讲解 (转载)
    poj 2151 Check the difficulty of problems (检查问题的难度)
    poj 2513 Colored Sticks 彩色棒
    poj1442 Black Box 栈和优先队列
    啦啦啦
    poj 1265 Area(pick定理)
    poj 2418 Hardwood Species (trie树)
    poj 1836 Alignment 排队
  • 原文地址:https://www.cnblogs.com/whalesea/p/10980849.html
Copyright © 2011-2022 走看看