大话WEB前端性能优化基本套路

前言

前端性能优化这是一个老生常谈的话题，可是仍是有不少人没有真正的重视起来，或者说尚未产生这种意识。

当用户打开页面，首屏加载速度越慢，流失用户的几率就越大，在体验产品的时候性能和交互对用户的影响是最直接的，推广拉新是一门艺术，用户的留存是一门技术，拉进来留住用户，产品体验很关键，这里我以美柚的页面为例子，用实例展开说明前端优化的基本套路（适合新手上车）。

---

WEB性能优化套路

基础套路1：减小资源体积

css

• 压缩

• 响应头GZIP

js

• 压缩

• 响应头GZIP

html

• 输出压缩

• 响应头GZIP

图片

• 压缩

• 使用Webp格式

• cookie

  • 注意cookie体积，合理设置过时时间

---

基础套路2：控制请求数

• js

  • 合并

• css

  • 合并

• 图片

  • 合并

        base64(经常使用图标：如logo等)  

• 接口

  • 数量控制

  • 异步ajax

• 合理使用缓存机制

  • 浏览器缓存

• js编码

  • Require.JS 按需加载

  • 异步加载js

  • lazyload图片

---

基础套路3：静态资源CDN

• 请求走CDN

  • html

  • p_w_picpath

  • js

  • css

---

综合套路

• 图片地址独立域名

  • 与业务不一样域名能够减小请求头里没必要要的cookie传输

• 提升渲染速度

  • js放到页面底部，body标签底部

  • css放到页面顶部，head标签里

• 代码

  • 代码优化：css/js/html

  • 预加载，如：分页预加载，快滚动到底部的时候之前加载下一页数据

---

拓展资料

• 移动H5前端性能优化指南

• Web性能优化：图片优化

• WebP 探寻之路

• 浅谈浏览器http的缓存机制

• 常见的前端性能优化手段都有哪些？都有多大收益？

• 前端性能优化相关

性能辅助工具

• 智图-Webp

• 谷歌 PageSpeed Insights(网页载入速度检测工具，须要×××)

• 入门Webpack，看这篇就够了

• 前端构建工具gulpjs的使用介绍及技巧

• Gulp 入门指南

---

看完上面的套路介绍

• 可能有人会说：我在前端界混了这么多年，这些我都知道，只不过我不想去作

  • 我答： 知道作不到，等于不知道

• 也可能有人会说：压缩合并等这些操做好繁琐，由于懒，因此不作

  • 我答： 如今前端构建工具都很强大，如:grunt、gulp、webpack，支持各类插件操做，还不知道就说明你OUT了

---

由于我主要负责后端相关工做，前端并非我擅长的，可是平时也喜欢关注前端前沿技术，这里以个人视角和开发经验梳理出基本套路。

套路点到为止，具体实施能够经过拓展资料进行深刻了解，若有疑义或者补充请留言怼。

---

有任何想说的欢迎到原文来留言哦
转载请申明原文地址，谢谢合做

---

感谢你的支持，我会继续努力！~