css和js的装载与执行-HTML 页面加载渲染的过程
一个网站在浏览器端是如何进行渲染的呢？
流程示意图.png
HTML渲染过程的一些特点
- 顺序执行、并发加载（单个域名的并发数量是有限的，所以多个资源最好是分成几个域名进行加载）
- 是否阻塞
- 依赖关系（有依赖关系的不能使用异步打乱加载顺序）
- 引入方式（用import还是link）
顺序执行、并发加载
词法分析
并发加载
并发上限
css阻塞
- css head中阻塞页面的渲染，这样页面的渲染就是带样式的。
- css阻塞js的执行
- css不阻塞外部脚本的加载（但是会阻塞js的执行）
js阻塞
- 直接引入的js阻塞页面的渲染
- js不阻塞资源的加载
- js顺序执行，阻塞后续js逻辑的执行
依赖关系
页面渲染依赖于css的加载
js的执行顺序的依赖关系
js逻辑对于dom节点的依赖关系
js引入方式
- 直接引入
- defer
- async
- 异步动态引入js
加载和执行的一些优化点
- css 样式表置顶
- 用 link 代替 import
- js 脚本置底
- 合理使用 js 的异步加载能力
懒加载与预加载-懒加载、预加载使用场景
懒加载
图片进入可视区域之后请求图片资源
对于电商等图片很多，页面很长的业务场景使用
减少无效资源的加载
并发加载的资源过多会阻塞js的加载，影响网站的正常使用
懒加载实现原理：
以图片为例，当浏览器读到img标签的src属性的时候，就会去加载图片资源，所以我们应该在需要显示这个图片的时候再去动态的给img添加src属性，首先我们把图片正确的请求地址放置在对应img标签的data-src属性中，然后监听scroll事件。
预加载是和懒加载相反的处理方法。
- 图片等静态资源在使用之前的提前请求
- 资源使用到时能从缓存中加载，提升用户体验
- 页面展示的依赖关系维护
懒加载原声代码实现：
我们在html定义了一串图片链接，但是都还没有赋值src，而是把图片链接放到img的data-origin属性中。
<img src="" class="image-item" lazyload="true" data-original="xxxxxxxx">
获取可视区域的高度viewHeight
当图片上边缘和页面最顶部的距离小于viewHeight的时候，则定义为图片出现在了可视区域。
Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。
返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合，就是该元素的 CSS 边框大小。返回的结果是包含完整元素的最小矩形，并且拥有left, top, right, bottom, x, y, width, 和 height这几个以像素为单位的只读属性用于描述整个边框。除了width 和 height 以外的属性是相对于视图窗口的左上角来计算的。
js源代码.png
先通过调用一次lazyload事件来显示第一屏的图片，然后剩下的图片都绑定到scroll事件中。
网友评论