(二)css、js 的加载与执行

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

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

(1)顺序执行、并发加载

顺序执行:运用词法分析能力从头开始顺序解析,

并发加载:引入的外部资源,css,js,可以进行优化,单个域名并发加载有限,CDN上设置三到四个。

(2)是否阻塞 (css加载是否阻塞js加载,==)

css head中阻塞页面的渲染 避免页面的闪动:在CSS加载完后,DOM树有样式的

css阻塞js的执行 css加载完会会js阻塞,js可能对css样式操作

css不阻塞外部脚本的加载  预资源加载器

 

js阻塞:

直接引入的js阻塞页面的渲染  (onload事件)

js不阻塞资源的加载

js顺序执行,阻塞后续js逻辑的执行(单线程)

 

(3)依赖关系

页面渲染依赖于css的加载

js的执行顺序的依赖关系

js逻辑对于dom节点的依赖关系

(4)引入方式

Css:Link,import,     直接引入 defer  async异步动态引入js

 

加载和执行的一些优化点:

(1)css 样式表置顶

(2)用 link 代替 import 

(3)js 脚本置底

(4)合理使用 js 的异步加载能力

 

3:懒加载和预加载

   懒加载:(1)图片进入可视区域之后请求资源,对于电商,页面很长的场景,减少无效的资源加载(单页应用,观看的时候才去加载),(2)并发加载的资源过多会影响网站的正常使用。

  具体实现懒加载:图片的src的地址被改变的时候被加载。监听滑动的事件,当图片进入可视区域的时候才去加载。

  预加载:与懒加载相反,预加载静态资源使用之前提前进行请求。直接从缓存中进行加载,不需要发送请求。

   懒加载实践:

   

  

预加载实践:

  

猜你喜欢

转载自www.cnblogs.com/love-life-insist/p/10142432.html
今日推荐