Skip to main content

前端性能优化

网页内容

减少http请求
减少dns查询
避免页面跳转
Ajax缓存
延迟加载
提前加载
减少dom元素数量
根据域名划分内容
减少iframe数量

服务器

使用cdn
添加 Expires 或者 cache-control 报文头：缓存
配置 Etags：它用来判断浏览器缓存里的元素是否和原来服务器上的一致
Gzip 压缩文件
尽早 flush 输出
使用 Get Ajax 请求
避免空的图片 src
减小 cookie 大小
页面内容使用无 cookie 域名

css

样式表置顶
避免css表达式：CSS属性的值等于Javascript表达式计算的结果
代替@import (@import 引用的CSS会等到页面全部被下载完再被加载。多个@import导致下载顺序紊乱)
避免使用Filters（滤镜）

JavaScript

脚本置底
使用外部的js和css文件
精简js和css
去除重复的脚本
减少dom的访问
使用智能事件处理

图片

优化图像
优化 css sprite (雪碧图)
不要在 html 中缩放图片
使用小并且可以换成的 ico

页面级别优化

1.http 请求数

减少 http 请求数是最重要也是最有效的方法，可以通过以下方法来减少 http 请求

- 合理的设置 http 缓存，恰当的缓存设置可以大大减少 http 请求。要尽可能地让资源能够在缓存中待得更久

- 从设计实现层面简化页面，保持页面简洁、减少资源的使用时是最直接的。

- 资源合并与压缩，尽可能的将外部的脚本、样式进行合并，多个合为一个。

- CSS Sprites，通过合并 CSS 图片，这是减少请求数的一个好办法

例子

    1. 微信小程序缓存大的图片（首页轮播图）
/// 重新启动小程序，去缓存中获取图片的缓存地址。 然后给Imagesrc赋值
const path = wx.getStorageSync('image_cache')
    if (path != null) {
        console.log('path====', path)
        this.setData({
            image_filepath: path
        })
    }else {
       console.log('去缓存图片')
    }
}

<image src="{{image_filepath}}"></image>
// 第一步： 既然要缓存图片，那么我们要先将图片下载下来。
// wx.downloadFile 必填参数url: 图片的地址。
//当图片下载成功以后，会返回给我们一个tempFilePath。临时的文件路径
//那么问题来了，这个临时的文件路径到底怎么理解呢？
//本地临时文件只能通过调用特定接口产生，不能直接写入内容。本地临时文件产生后，
//仅在当前生命周期内有效，重启之后即不可用。因此，不可把本地临时文件路径存储起来下次使用
//上面的是微信小程序 文档对临时的文件路径的解释。
//所以到这一步， 这个临时的文件路径不满足我们的需求。那么接下来我们怎么利用这个临时文件路径实现本地缓存呢？
wx.downloadFile({
      url: 'xxxxxxx',
      success: function(res) {
        if (res.statusCode === 200) {
          console.log('图片下载成功' + res.tempFilePath)
          // 第二步: 使用小程序的文件系统，通过小程序的api获取到全局唯一的文件管理器
          const fs = wx.getFileSystemManager()
          //  fs为全局唯一的文件管理器。那么文件管理器的作用是什么，我们可以用来做什么呢？
         //   文件管理器的作用之一就是可以根据临时文件路径，通过saveFile把文件保存到本地缓存.
          fs.saveFile({
            tempFilePath: res.tempFilePath, // 传入一个临时文件路径
            success(res) {
              console.log('图片缓存成功', res.savedFilePath) // res.savedFilePath 为一个本地缓存文件路径
              // 此时图片本地缓存已经完成，res.savedFilePath为本地存储的路径。
              //小程序的本地文件路径标准： {{协议名}}://文件路径
              //协议名在 iOS/Android 客户端为 "wxfile"，在开发者工具上为 "http"，
              //开发者无需关注这个差异，也不应在代码中去硬编码完整文件路径。
              //好了，到此为止，我们已经把图片缓存到本地了，而且我们也得到了本地缓存的路径。
              // 那么我们把本地缓存的路径，通过小程序的数据缓存服务保存下来。
              // 下次打开小程序 首先去缓存中检查是否存在本地文件的缓存路径
              // 如果有，直接image src赋值本地缓存路径。
              //如果没有，则是第一次下载图片，或者用户手动清理缓存造成的。
              wx.setStorageSync('image_cache', res.savedFilePath)
            }
          })
        }else {
          console.log('响应失败', res.statusCode)
        }
      }
  1. 缓存数据请求
const a = new Map()
a.set('a', { url: 'xxx', data: 'xxxx', time: new Date() })
const res = a.get('a')
console.log(a)
console.log(res)
//分页limit offset
// 先判断 时间=》长度

内联脚本的位置

浏览器是并发请求的，而外链脚本在加载时却常常阻塞其他资源，例如在脚本加载完成之前，它后面的图片、样式以及其他脚本都处于阻塞状态，直到脚本加载完成后才会开始加载。如果将脚本放在比较靠前的位置，则会影响整个页面的加载速度从而影响用户体验。所以说尽可能的将脚本往后挪，减少对并发下载的影响

代码级别的优化

  • 减少 dom 操作
  • 图片压缩