前端页面优化常见方法

2019-02-22

页面加载优化

  • 压缩代码
  • defer
  • 使用webp高压缩图片
  • 减少请求数量:雪碧图,字体图标
  • CDN
  • CDN Combo,可以将多个文件打包成一个文件的形式返回
  • 组件请求可以添加 Expires / Cache-control: max-age=xx 头,下次进入的时候可以从缓存拿
  • 合理使用 Etag 和 Last-Modified 使浏览器读缓存
  • Accept-Encoding:gzip压缩
  • 样式表放在头部,可以使内容逐步呈现,避免白屏
  • 使用外部js和css,因为浏览器可能会缓存他们,比如jq
  • 减少DNS查找,即资源放同一个域下;但是http1.1会对同一个域有并发限制。所以最好在2到4个域之间
  • 避免空的 href 和 src。因为浏览器渲染过程中仍会对空内容加载,直到加载失败,这阻塞了其他资源下载进程。
  • 减少页面重定向
  • AJAX cache: true
  • 减少cookie大小,静态资源放在别的域名下,因为跨域默认不带cookie
  • 使用http2,http2 会使用 HPACK算法压缩请求头
  • 避免 css @import,因为在css解析到 @import时才会加载另外的css,延后了css渲染完成的时间
  • 减少DOM元素数量合深度,做到标签语义化,不要数层div
  • 避免使用 table和iframe等慢元素。table是全部渲染完之后一次性绘制到页面上,长表格很耗时。iframe内的进程会阻塞父页面
  • js会阻塞渲染,任何与页面首次渲染无关的都要异步延迟加载执行
  • 避免css表达式和css滤镜
  • 首屏数据请求提前
  • 首屏加载和按需加载
  • meta和link 的dns prefetch
  • 资源预加载:link的 prefetch,preload,prerender
  • AMP HTML
  • 图片懒加载
  • 通过媒体查询加载不同大小的图片
  • ssr 不用等待所有的js下载执行完就可以看到渲染的页面
  • service worker与PWA是啥
    • 1、service worker:请求拦截(读缓存等);发送通知;后台同步运行
    • 2、PWA:强依赖service worker

性能优化

  • DOM:减少dom操作,可以缓存查出的结果。innerHTML代替 createElement。DocumentFragment一次性操作。
  • 用事件代理代替html事件绑定
  • innerHTML替换之前把老的HTML用到的js函数与属性删除,不然HTML是销毁了,绑定却没接触导致一直占用着
  • 作用域:避免不必要的属性查找和全局查找,避免with 语句
  • 优化循环体,终止条件,减值迭代
  • 最小化语句(打包工具也可以搞定)
  • 不用的闭包设为 null 释放掉
  • 避免touchmove,scroll 连续时间处理,可以设置设置时间节流
  • meta viewport 固定屏幕渲染,避免缩放导致屏幕重排重绘
  • 避免页面布局的修改,因为重排必然导致重绘