HTML加载过程

作者: Sue1024 | 来源:发表于2018-01-15 23:57 被阅读43次
HTML加载流程图

在地址栏输入url,返回html后,浏览器开始顺序加载并渲染DOM

Body标签

当浏览器遇到body标签才算真正开始加载并渲染DOM,此时会有以下几种情况:

DOM元素

浏览器遇到dom元素时,正常顺序加载,边加载边渲染

内联CSS

当遇到内联CSS时,浏览器继续加载,但渲染被阻塞,此时会生成新的CSS Rule Tree,生成后重新渲染界面

外联CSS

当遇到外联CSS(link标签),浏览器启一个线程加载css文件,DOM继续加载但渲染被阻塞

内联Javascript

当遇到内联Javascript,浏览器开始执行这段脚本,DOM的加载和渲染同时被阻塞(由于JavaScript有可能会更改DOM Tree和Render Tree,因此同时被阻塞)

外联Javascript

当遇到外联Javascript,浏览器开始下载这段脚本,下载成功后执行它,这整个过程DOM的加载和渲染同时被阻塞

Example

用一个例子解释一下

<html>
<body>
  <h2>Hello</h2>
  <script>
    function print(){
        console.log('first script', document.querySelectorAll('h2'));
    }
    print();
    setTimeout(print);
  </script>
  <script src="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.4/js/bootstrap.js"></script>
  <h2>World</h2>
  <script> console.log('second script', document.querySelectorAll('h2')); </script>
</body>
</html>

在js文件下载的过程中,js后面的元素没有被加载,也没有呈现在界面上,说明js文件的下载阻塞了DOM的解析并渲染

<html>
<body>
  <h2>Hello</h2>
  <script>
    function print(){
        console.log('first script', document.querySelectorAll('h2'));
    }
    print();
    setTimeout(print);
  </script>
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.4/css/bootstrap.css">
  <h2>World</h2>
  <script> console.log('second script', document.querySelectorAll('h2')); </script>
</body>
</html>

在css文件仍在下载的过程中,已经可以打印出两个<h>,可以看出css文件的加载阻塞了DOM渲染但没有阻塞DOM加载

defer 与 async

如果我们执行以下代码,首先加载外部Javascript文件,然后加载DOM其他内容:

<html>
<body>
  <script src="https://cdn.bootcss.com/docsearch.js/2.5.2/docsearch.min.js"></script>
  <h2>Hello World</h2>
</body>
</html>

如我们所料,文件没有下载并执行完毕,Hello World是不会打印出来的。



如果我们为外部Javascript添加defer或async属性,那么它的下载就不会阻塞DOM其他内容的加载:

<html>
<body>
  <script async src="https://cdn.bootcss.com/docsearch.js/2.5.2/docsearch.min.js"></script>
  <h2>Hello World</h2>
</body>
</html>


关于defer与async属性的区别,请参考我的另一篇文章:
Javascript高级程序设计读书笔记——在HTML中使用Javascript

相关文章

  • HTML加载过程

    在地址栏输入url,返回html后,浏览器开始顺序加载并渲染DOM Body标签 当浏览器遇到body标签才算真正...

  • 运行环境

    一、加载资源的形式 输入URL(或跳转页面)加载HTML 加载HTML中的静态资源 二、加载资源的过程 DNS解析...

  • 前端JS基础十一(页面加载、性能优化和安全性)

    页面加载 从输入url到得到html并解析的详细过程 加载资源的形式1、输入url(或跳转页面)加载html2、加...

  • 回流和重绘

    html 加载过程 在页面加载时,浏览器把获取到的HTML代码解析成1个DOM树,DOM树里包含了所有HTML标签...

  • 网页的渲染机制

    网页的渲染机制 参考文章:ScriptJava——了解HTML页面的渲染过程浏览器加载,解析,渲染的过程HTML渲...

  • 网页的渲染机制

    网页的渲染机制 参考文章:ScriptJava——了解HTML页面的渲染过程浏览器加载,解析,渲染的过程HTML渲...

  • 浏览器加载、解析、渲染

    加载1.浏览器获取一个html,当浏览器获得一个html文件时,会”自上而下“加载,并在加载过程中进行解析渲染。 ...

  • 16、render树、解析和加载、回流和重绘

    解析和加载 加载是一个异步的过程 ,例如图片的请求渲染不会影响整个html的加载和渲染 解析的过程 形成dom t...

  • iOS UIWebView加载HTML,以及遇到问题的解决方案

    最近在开发过程中用到了webView加载HTML字符串的方式以下简单介绍下UIWebView加载HTML的三种常用...

  • parse html

    解析HTML的过程 浏览器需要加载解析的不仅仅是HTML,还包括CSS、JS、以及加载图片、视频等其他媒体资源。 ...

网友评论

本文标题:HTML加载过程

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