前端首屏性能优化

网络请求过程以及浏览器的工作原理(主要是渲染原理),搞清楚这两个点,我们才有了优化的理论基础。

前端首屏性能优化的知识点很多,很杂。分成了两个大的方向:资源加载优化页面渲染优化

资源加载优化

  • 减小资源大小
  • 减少Http请求次数
  • 提高Http响应速度
  • 优化资源加载时机
  • 优化加载方式

资源加载优化主要是从大小、数量、速度、时机这几个基本方面进行优化,每一项优化最终都是对这四个基本面中一个或多个方面的优化

页面渲染优化

优化html代码,优化js和css代码,优化动画效果

优化方向主要在以下几个方面:

  1. DNS 解析时间比较长
  2. 资源加载量大
  3. 首页并没用到高德地图,高德地图的请求阻塞了后续资源的加载
  4. 流式请求的加载顺序阻塞了后续请求的发起
  5. 图片的格式未针对浏览器进行优化,体积比较大,小型图片可以使用 svg 替换 png
  6. 页面接口调用比较晚,时机不对
  7. js_ticket 等业务无关的请求可以提前
  8. 轮播图片不用一次性全部加载
  9. 请求阿里云 OSS 上的静态文件不添加时间戳参数(每次回源速度变慢)

你可能感兴趣的:(前端,项目优化,javascript)