html css js先执行,Web性能优化-CSS和js的装载与执行

一个网站在浏览器端是如何进行渲染的?

浏览器端渲染流程.png

主要步骤就是图片上这些步骤.

我们知道在html页面中把css 文件放到用link 方式放到header 里边, 把js 文件放到body结束之前. 这样可以提高网页的加载效率. 之前是知道需要这么写,但是为什么需要这么写 ? 深入理解浏览器端渲染的过程会理解这么写的原理.

顺序执行、并发加载(我们都知道浏览器解析html dom按照顺序执行,从上到下,类似于iterator.next() , html可能引入很多css 和js 资源, 这些资源是并发加载, 对于单个域名, 并发度是有限的. 需要设置 3-4 个CDN域名. 防止一个CDN达到浏览器并发上线)

是否阻塞 (css加载是否阻塞js加载 , css加载是否阻塞js执行.....)

依赖关系 (html中的依赖关系, 比如页面有时候闪一下 ,dom加载完毕,但是css 没有加载完毕, 样式从无到有这样有一个闪一下的效果, 如果css 放到header中, 等待cssom 加载之后 生成树 和dom 一起生成renderTree 这样就不会有闪过的问题.....

js的执行顺序, js 的加载有两个关键字. defer 和asyn

这两个区别: defer 本身就是延迟,推迟的意思 ,待到文档解析完成，脚本才会执行.

async就是异步的意思,async是异步下载并立即执行，然后文档继续解析.

总结一下就是: 如果不用这两个关键字,那么浏览器遇到script 标签就会停止html的解析, 开始下载脚本并执行脚本. 如果脚本不依赖于任何脚本，并不被任何脚本依赖，那么则使用 defer)

image.png

看一下什么时候defer 和 asyn 运行

defer 是在DOMContentLoaded之前执行

image.png

引入方式 (css 可以用link 或者import 引入, import 会打断并行加载 这种方式不好.

或者在首页里不需要把所有的js 资源加载下来. 懒加载的过程.)

浏览器遇到script 标签的时候会停止文档的解析, 所以为了尽快的把页面呈现给用户, 这里需要把js 代码放到body结束的地方

css阻塞

css head中阻塞页面的渲染

css阻塞js的执行

css不阻塞外部脚本的加载

怎么理解或者说怎么简单得给记下来 ?

个人理解: 如有雷同,纯属巧合

css 和 html 分别生成tree.cssom 和 dom 然后进行render . css 理解为怎样来加载dom, 因为css 会给dom 设置样式. css 加载过程会阻塞页面的渲染.把html 理解为画笔在画布上画画,css 就相当于调色板,你用画笔沾了调色板里边的颜料这样才能画. 如果你画笔没蘸颜料,写不出来字,画不出来画, js 理解为橡皮擦 .可以擦掉你刚才画的画,

head中阻塞页面的渲染 理解为画笔蘸好了颜料才可以画, 如果正在蘸就等着

css阻塞js的执行 如果正在蘸颜料,时候还没确定画出来是什么样子. 这时候你就橡皮擦给擦掉了 是不是不太好 ?

css不阻塞外部脚本的加载 可能你有颜料橡皮擦或者油料橡皮擦.橡皮擦可以有多个在同时准备准备着要擦,但是不能擦

js 阻塞

直接引入的js阻塞页面的渲染

js不阻塞资源的加载

js顺序执行，阻塞后续js逻辑的执行

还是画画的例子

直接引入的js阻塞页面的渲染 画了一半发现,画错了 要擦掉,这时候就别画了,反正要擦掉, 等着擦完了再画吧.

js不阻塞资源的加载 你一直手在擦的时候不耽误另一只手准备第二个橡皮擦

js顺序执行，阻塞后续js逻辑的执行 这就好比 你吃火锅的时候 红油崩身上,是不是的服务员先弄个除油的给你喷好,你不能直接用水洗 , 喷好了之后你再用水洗 就洗掉了. 第一步 喷除油的 ,第二部 用水洗, 用水洗依赖于喷除油的,你不先除油 洗不掉.

这个实际中, 你用一些集成框架, 比如Jquery, 首先要先引入jquery 的包在工程里边吧, 当然你还有自己基于Jquery写的js 代码在另一个文件里 . 因为浏览器是从上到下解析, 如果你先引入自己写的这时候浏览器里边还没有jQuery代码,就不对了

总体结合css 和js 哪里会阻塞 ?

四个地方:

1 最简单的就是 一个js执行 后边跟一个js 执行这个理解起来轻松一些

2: js 阻塞 页面渲染, 需要等到橡皮擦擦完了才能接着画

3: css 阻塞页面渲染. 需要画笔蘸了颜料之后才能画.

4: css 阻塞js 的执行: 蘸颜料的时候还没画,没什么可擦的

css 和js 都有两个阻塞.