search

ymcdhr / js-points

js知识点
3 stars 3 forks source link

web浏览器加载流程注意点（2019年9月更新） #17

Open ymcdhr opened 5 years ago

ymcdhr commented 5 years ago

参考资料：

https://www.jianshu.com/p/e141d1543143 https://cloudreports.net/will-css-loading-blocked-the-rendering/

一、注意/重要：

1、浏览器分为：下载、解析、渲染三个过程，例如：有可能html文件已拿到并解析，但是浏览器中生成的html还没有生成完整

（1）下载/加载——浏览器下载html、js、css等静态资源文件

（2）解析

parser：解析， Render Tree:渲染树 Layout:安排布局

2、这三个过程在实际进行的时候又不是完全独立，而是会有交叉。会造成一边加载，一边解析，一边渲染的工作现象。

二、浏览器里面的dom tree的概念：

三、页面加载流程：

1、浏览器下载html文件

2、浏览器解析html文件（生成dom tree，在内存中看不见）

（1）在渲染DOM之前，浏览器解析html文件之后异步发起css、图片、js的下载请求，无论他们是否在HEAD里；

（2）异步请求的发出和渲染html文件是同时进行的；

3、 浏览器渲染html文件（根据dom tree生成render tree，从上到下的顺序，执行代码）；

（1）执行到html中的style、link、或者script，会有几种情况（是执行代码，不是请求文件；文件可能已经下载完成）；

（2）如果是style、script内联代码，顺序执行；其中js代码的执行，会阻塞后续html文档渲染；

（3）如果是link、scrpt异步src文件，需要等待文件下载完成后解析、执行渲染，否则阻塞（必须要有响应码，不仅要等待文档中js文件加载完毕，还要等待解析执行完毕）；具体以下两种情况：

（3.1）js的下载和解析执行

（3.2）css的下载和解析（不包括渲染）

（3.3）css的渲染

四、domcontentloaded和load的区别

1、domcontentloaded是dom元素全部解析完成即触发；此时可能，

参考资料：https://developer.mozilla.org/zh-CN/docs/Web/Events/DOMContentLoaded

示例1：script在style前面执行，js会阻塞css和页面的渲染

<html>
    <head>
        <script>
            console.log(1111);
        </script>
        <style>
            #load-box{
                color: rebeccapurple;
            }
        </style>
    </head>
    <body>
        <div id="load-box">
            7、html页面加载时，会阻塞加载等情况
        </div>
    </body>
</html>

示例2： 1、script和style都是异步请求（在解析html时，同时发出异步请求） 2、js的加载（包括等待文件下载完成和执行）会阻塞css的解析和渲染 3、js的加载不会影响css文件的下载（只是没有解析和渲染）

<html>
    <head>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <link href="./style.css">
    </head>
    <body>
        <div id="load-box">
            7、html页面加载时，会阻塞加载等情况
        </div>
    </body>
</html>