css和js的装载与执行-HTML 页面加载渲染的过程
一个网站在浏览器端是如何进行渲染的呢?
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
以外的属性是相对于视图窗口的左上角来计算的。
先通过调用一次lazyload事件来显示第一屏的图片,然后剩下的图片都绑定到scroll事件中。