18,页面优化

// 一、图片
1,修饰类的图片有css代替
2,根据具体屏幕,用小图代替
3,小图使用base64格式
4,雪碧图(多个图整合在一起)
5,webP有更好的压缩算法(但兼容性差一点)
6,小图用png或者svg(SVG 使用 XML 格式定义图像。可缩放矢量图),大图用jpg

// 二、域名的预解析

dns-prefetch​作用简单说明就是当你浏览网页时,
浏览器会加载网页时对网页中的域名进行解析缓存,
这样在你单击当前网页链接无需DNS解析,减少浏览者等待时间

// 三、预加载

不在首页用到,但是后面极大可能会用,而且很大,就提前去加载。不会阻塞onload事件

// 四、预渲染

在后台提前渲染(后面大概率会打开。不然会浪费)


// 五、懒执行
首屏优化。耗时逻辑并不需要在首屏就使用的,就可以使用懒执行。
通过事件或定时器触发

// 六、懒加载
懒加载就是将不关键的资源延后加载。
比如图片,先放一个src占位。对应的图片链接放在自定义区域,只有执行到该区域后,才替换属性-src。video也可以这样,显示区域才去加载

// 七、CDN

// 三、节流。(scroll的时候不希望一直发请求。而是间隔或者停下的时候发)
    let now = +new Date()
    // 将当前时间和上一次执行函数时间对比
    // 如果差值大于设置的等待时间就执行函数
    if (now - lastTime > wait) {
      lastTime = now
      func

// 四、防抖
    return function(...args) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(this, args)
    }, wait)




你可能感兴趣的:(18,页面优化)