前端性能优化---4.css、js 的加载与执行

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

这里写图片描述
1.我们输入网址向服务器发送请求,服务器会返回一个html的文档,
2.该html文档会被浏览器中的html解析器解析
3.从上到下一步一步的生成DOM树
4.在生成DOM的过程中会解析css资源,生成css树
5.解析js资源,由浏览器的v8引起进一步解析
6.css树和DOM树结合形成Render Tree
6.渲染出页面

2.HTML渲染过程的一些特点

2.1顺序执行、并发加载

从上向下,从外向内执行的html,
html中会引入很多的外部资源,这些外部资源都是并发加载的,所以一般会设置3,4个CDN域名,以防止阻塞

2.2是否阻塞

css:
css head中阻塞页面的渲染
css阻塞js的执行
css不阻塞外部脚本的加载

js:
直接引入的js阻塞页面的渲染
js不阻塞资源的加载
js顺序执行,阻塞后续js逻辑的执行

2.3依赖关系

页面渲染依赖于css的加载
js的执行顺序的依赖关系
js逻辑对于dom节点的依赖关系

2.4引入方式

直接引入
defer
async
异步动态引入js(需要的时候再引入)

猜你喜欢

转载自blog.csdn.net/haochangdi123/article/details/81069748