html src加载外部静态资源,前端性能优化2:静态资源加载与优化

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属性中。

获取可视区域的高度viewHeight

当图片上边缘和页面最顶部的距离小于viewHeight的时候，则定义为图片出现在了可视区域。

Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。

返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合，就是该元素的 CSS 边框大小。返回的结果是包含完整元素的最小矩形，并且拥有left, top, right, bottom, x, y, width, 和 height这几个以像素为单位的只读属性用于描述整个边框。除了width 和 height 以外的属性是相对于视图窗口的左上角来计算的。

js源代码.png

先通过调用一次lazyload事件来显示第一屏的图片，然后剩下的图片都绑定到scroll事件中。