目标
- 理解浏览器端html、css、js的加载过程
- css、js加载过程中的优化点
- 深入理解学习的优化点
一个网站在浏览器端是如何进行渲染的？
通过HTTP请求拿回的html文件，读取html
字节流(服务器端) -> 字符流(浏览器端) -> 语法分析 拿到相应 token 添加到DOM树
- html -> DOM树
(link方式 并发 同时css -> CSSOM树)
V8引擎解析JavaScript(阻塞)
Render Tree (DOM CSSOM都准备好才做这步) ->
Layout ->
Paint
HTML渲染过程的一些特点
- 顺序执行、并发加载
- 是否阻塞
- 依赖关系
- 引入方式
顺序执行、并发加载
- 词法分析 token分析从上到下，从而html是从上到下解析
- 并发加载 html中引入的外部资源是并发加载的
- 并发上限 根据浏览器不同 一般来说HTTP1.1下是6个
CSS阻塞
- css head中阻塞页面的渲染 -> css文件在
<head>中通过link引入 - css阻塞js的执行 -> 在加载css时后续js的执行是会被阻塞的
- css不阻塞外部脚本的加载 （阻塞执行js而不阻塞加载js）
js阻塞
- 直接引入的js阻塞页面的渲染
- js的执行不阻塞资源的加载
- js顺序执行，阻塞后续js逻辑的执行