浏览器渲染

  1. 构建DOM和解析CSS不会互相阻塞

  2. 虽然构建DOM和解析CSS不会互相阻塞, 但解析CSS时机和Style标签的位置有关(把Style标签放在head中)

  3. 多个CSS,按照HTML文档中顺序加载解析

  4. JS 标签阻塞DOM构建

    1. script标签两个常用属性:

      • defer:自动将script标签放在body最后执行

      • async: 将script与DOM构建分离,不阻塞DOM构建,也不会被CSS阻塞。JS不阻塞DOM生成,且执行时间不确定。

  5. CSS标签下方写JS标签,CSS解析阻塞JS执行(要等到解析成CSSOM后才执行)

  6. CSS标签下方写JS标签,CSS解析阻塞JS执行,JS又会阻塞DOM构建。所以在这种情况下,CSS加载解析会间接阻塞DOM构建

  7. HTML中无JS标签,构建DOM 无需等待CSSOM构建

  8. HTML中出现了JS标签(且无defer和async属性),主线程暂停DOM生成操作,等待外部JS代码加载执行后继续构建。

  9. 在构建DOM的过程中,并非解析才加载资源。浏览器会统一将外部资源标签过滤出来,并发送请求。

  10. 浏览器限制了每个页面每个域名最多同时可发送请求的数量,Chrome为6个/页面/域名。

  11. 为了突破6个并发请求的限制,不少网站将资源文件分发到多个域名(如图片一个域名,JS/CSS一个域名),代价是DNS解析时间会增加。浏览器加载资源是有优先级的,比如HTML和 CSS相同 > JS > 图片

资源加载优先级https://juejin.im/post/6844903633209802759

posted @ 2020-08-05 13:59  cecelia  阅读(93)  评论(0编辑  收藏  举报