文章目录
  1. 1. Defined
  2. 2. Main()
    1. 2.1. Base
      1. 2.1.1. 什么是parse(解析)
      2. 2.1.2. 了解document.readyState
    2. 2.2. About Parse
      1. 2.2.1. Parse Graphic
      2. 2.2.2. Browser Parse render 简易流程
      3. 2.2.3. href src 区别以及阻塞相关
    3. 2.3. load state 相关
      1. 2.3.1. window.onload && interactive
      2. 2.3.2. interactive VS onDOMContentLoaded
      3. 2.3.3. state 等状态更替顺序
    4. 2.4. 性能优化相关
      1. 2.4.1. 使用performance(timeline) 自己探究
      2. 2.4.2. html5 Script sync defer
      3. 2.4.3. new feature: Preload
  3. 3. Reference
  4. 4. PS

Defined

  • Update - 03/29/2018
    重新看该博文, 发现有些内容当时并没有完全理解, 于此修改, 删除无用原文.
    Keyword: 本文探索浏览器如何渲染, script位置, href src与浏览器加载阻塞相关问题
    相关测试环境: Chrome 65.x

Main()

这边记录一下浏览器的渲染机制/顺序

Base

什么是parse(解析)

What parsing the page [email protected]
In this context, is means converting the HTML source code into DOM nodes like elements and text.
Fetching of dependent resources will also continue, but that’s in addition to the parsing.

了解document.readyState

JavaScript Programmer’s Reference

State Value
uninitialized The object is first instantiated but has not begun loading.
loading The object has commenced loading.
loaded The object has completed loading.
interactive The object is loaded but not yet closed but is ready to handle interaction.
complete The object body has been closed and the loading is finished.

这个是关于IE的

msdn
Note For the script element, readyState is no longer supported. Starting with Internet Explorer 11, use onload.

这段话也从github的注释上看到了.
类似的initLoader在mdn发现啦~

简单的通过readyState进行事件加载:

1
2
3
4
5
document.onreadystatechange = function() {
if (document.readyState == "complete") {
initApplications();
}
}

About Parse

Parse Graphic

browser-render
注: gecko - reflow; webkit - layout
图中有几个问题: 图上底部CSS应该改为: CSSOM; script和css均有通过相关parser

原文图

Browser Parse render 简易流程

照图颜色说话:

  1. 先通过 HTML/SVG/XHTML 生成一个基本的DOM树, 并行发起css, img, js请求, 和是否在HEAD标签无关
  2. CSS下载完成, 开始构建CSSOM(object model)树, 结构和dom相对应
  3. 所有CSS均下载完毕, CSSOM构建完成后, 和DOM相互匹配进行渲染(render), 生成Rendering Tree
    ┏ ———————— ┓
  4. Layout: 将树的节点根据自己所拥有的CSS进行定位(计算所处位置)
  5. Painting: 知道了摆放位置和样式了, 之后就是内容填充了, 利用显卡把内容显示在浏览器中.
    ┗ —reflow/layout— ┛

关于parse约束
When the parser gets to a script tag, DOM construction cannot proceed until the JavaScript finishes executing, and the JavaScript cannot be executed until the CSS is downloaded, parsed, and the CSSOM is available.

DOM构建受限, 直到JS完全执行完毕;而JS执行需要依赖CSSOM的完整建立.

href src 区别以及阻塞相关

相应的链接以及知识点

  1. Difference between SRC and HREF
  2. 图片资源到底会不会阻塞浏览器渲染呢
  3. 浏览器渲染流程

第一点的阻塞规则已经不适用现代浏览器, 所以只需要从语义上来理解这个问题:

  • href: 与本身Reference一个意思, 仅仅表示内容与当前页面的关系
  • src: embed the source, 通俗理解就是将内容放入页面中, 例如img, script
  • link.src: 历史遗留, 不做解释

load state 相关

window.onload && interactive

What is the difference between Window.load and document.readyState
window.load - This runs when all content is loaded, including images.
document.ready - This runs when the DOM is ready, all the elements are on the page and ready to do, but the images aren’t necessarily loaded.

第二篇参考文: window.onload和jquery.ready有什么区别么? - segmentfault
代码演示: // 必须放在头才能了解具体加载

interactive VS onDOMContentLoaded

规范在这: w3
有点懒得去翻译了… 如有疑问请直接翻阅w3文档.

state 等状态更替顺序

readyState.x > Scripts > onDOMContentLoaded or more

性能优化相关

使用performance(timeline) 自己探究

official link 时间顺序查看相关load内容/顺序

在performance界面发现: 虽然css, image, fonts, image同时被请求, 但是这些资源被浏览器打上了priority tag.
加载顺序如下:

fonts(Highest) > CSS(Highest) > JS(High) > image(Low)

html5 Script sync defer

用图来解释:

  • script defer
    script-defer

  • script async
    script-async

async会使当前script的priority为low, 和img同一层次加载(表示不那么重要).

Note: Attributes async and defer work only for external scripts. They are ignored if there’s no src.

new feature: Preload

1
<link rel="preload" href="very_important.js" as="script">

针对于用户体验, 可以尝试用link特性来提高parse priority

Reference

building the DOM faster speculative parsing async defer and preload | Mozilla High Priority, modern browser. 需要反复研读.
How browsers work - newly page
浏览器的渲染原理简介-陈皓
CSS渲染优化
JS 一定要放在 Body 的最底部么?聊聊浏览器的渲染机制 - 德来 反复研读才觉得有道理.
该链接关于reflow条件需要去google http://arvindr21.github.io/howBrowserWorks/#/39

PS

本文涉及到满多原理的, 可能存在理解错误的情况, 有问题请email.

文章目录
  1. 1. Defined
  2. 2. Main()
    1. 2.1. Base
      1. 2.1.1. 什么是parse(解析)
      2. 2.1.2. 了解document.readyState
    2. 2.2. About Parse
      1. 2.2.1. Parse Graphic
      2. 2.2.2. Browser Parse render 简易流程
      3. 2.2.3. href src 区别以及阻塞相关
    3. 2.3. load state 相关
      1. 2.3.1. window.onload && interactive
      2. 2.3.2. interactive VS onDOMContentLoaded
      3. 2.3.3. state 等状态更替顺序
    4. 2.4. 性能优化相关
      1. 2.4.1. 使用performance(timeline) 自己探究
      2. 2.4.2. html5 Script sync defer
      3. 2.4.3. new feature: Preload
  3. 3. Reference
  4. 4. PS