美文网首页
「html渲染奥秘」的学习笔记

「html渲染奥秘」的学习笔记

作者: lizhihua | 来源:发表于2016-06-11 11:53 被阅读41次

    http://blog.plusicec.com/2015/11/11/html%E6%B8%B2%E6%9F%93%E5%A5%A5%E7%A7%98.html
    看到链接里的这张图片,Chrome开发者工具提供的解析页面的过程,故做了一个小试验

    Paste_Image.png

    以下代码在Chrome 51 Release版的Timeline

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title></title>
      <link rel="stylesheet" href="index.css">
    </head>
    <body>
    </body>
    <script>
      document.querySelector('body').innerHTML = 'hello world';
    </script>
    </html>
    

    https://www.uis.cc/2015/12/11/Chrome-Timeline/
    「强烈建议在浏览器隐身模式下使用这个工具,并且禁用一切无关的插件,因为这些插件会影响测试的结果。」

    可以清晰的看到页面的加载过程
    0.Event(beforeunload)
    1.Send Request
    2.Receive Response
    3.Receive Data
    4.Event(pagehide)
    5.Event(visibilitychange)
    6.Event(webkitvisibilitychange)
    7.Event(unload)
    8.Event(readystatechange)
    9.Finish loading
    10.Parse HTML
    11.Update Layer Tree
    12.Paint
    13.firstPaint
    14.firstContentfullPaint
    15.composite Layers
    16.Minor GC(123 KB collected)
    注:
    1.GC,即垃圾回收。
    见维基:在计算机科学中,垃圾回收(英语:Garbage Collection,缩写为GC)是一种自动的内存管理机制。当一个电脑上的动态内存不再需要时,就应该予以释放,以让出内存,这种内存资源管理,称为垃圾回收。

    我们会看到一次简单页面加载,触发了许多的事件

    相关文章

      网友评论

          本文标题:「html渲染奥秘」的学习笔记

          本文链接:https://www.haomeiwen.com/subject/vnasdttx.html