zoukankan      html  css  js  c++  java
  • (二)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的地址被改变的时候被加载。监听滑动的事件,当图片进入可视区域的时候才去加载。

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

       懒加载实践:

       

      

    预加载实践:

      

  • 相关阅读:
    磁共振中的T1, T2 和 T2*的原理和区别
    Revolver Maps-3D地球仪网站定制
    4种常见网络
    De Moivre–Laplace theorem
    The Complex Inversion Formula. Bromwich contour.
    理解全概率公式与贝叶斯公式(转)
    滴滴数据
    ccs 分类
    dialog problem overview
    recommendation baselines
  • 原文地址:https://www.cnblogs.com/love-life-insist/p/10142432.html
Copyright © 2011-2022 走看看