知识总结：WEB前端的优化方案

目录

1、网页内容方面：尽量减少 HTTP 请求次数

① 合并JS文件和CSS文件

② 合并图片

③ 减少DNS查询的次数

④ 使用浏览器缓存

2、CSS方面

① 将样式表置顶

② 尽量避免 CSS 表达式

③ 引入外部样式表时，用 link 标签代替 @import

④ 更多优化

3、JavaScript方面

① 将脚本置底：可以让网页渲染所需要的内容尽快加载显示给用户。

② 精简JS：可以做到两个级别

4、图片方面

① 避免空的图片src

② 压缩图标

③ 使用css雪碧图

④ 不要在HTML上缩放图片

5、服务器端方面

① 使用CDN：

② 做服务器缓存

6、cookie 方面

① 减少cookie的大小

7、移动客户端方面

① 保持单个内容小于25KB

② 打包组件成符合文档

8、图片优化加载处理的方法

① 减少文件体积大小

 ② 减少图片资源请求数(合并HTTP请求)

③ 图片预加载

④ 图片懒加载

9、借助webpack优化

10、更多总结

---

1、网页内容方面：尽量减少 HTTP 请求次数

• ① 合并JS文件和CSS文件

合并(js)脚本跟(css) 样式文件。

如可以把多个 CSS 文件合成一个，把多个 JS 文件合成一个。

• ② 合并图片

CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位，把多个图片合成一个图片。

• ③ 减少DNS查询的次数

DNS查询也会消耗响应时间，对首次访问响应速度有所影响。

• ④ 使用浏览器缓存

2、CSS方面

• ① 将样式表置顶

将样式表放在网页的head标签中会让网页显得加载速度更快。

因为这样做可以使得浏览器逐步加载已经下载的网页内容，用户可以先看到已经下载好的内容，而不是一直等待在一个白屏上。

如果样式文件放在页面底部可能会出现两种情况：白屏 和 无样式内容的闪烁。

• ② 尽量避免 CSS 表达式

尽量避免使用它来防止使用不当而造成的性能损耗。

• ③ 引入外部样式表时，用 link 标签代替 @import

因为 @import 相当于将css放在网页内容底部，影响页面响应效果。

• ④ 更多优化

如果要做优化，CSS提高性能的方法有哪些？_小草莓蹦蹦跳的博客-CSDN博客 

3、JavaScript方面

• ① 将脚本置底：可以让网页渲染所需要的内容尽快加载显示给用户。

脚本放在顶部带来的问题：

① 使用脚本时，对于位于脚本以下的内容，逐步呈现将被阻塞；

② 在下载脚本时会阻塞并行下载；

③ 放在底部可能会出现JS错误问题，当脚本没加载进来，用户就触发脚本事件。

• ② 精简JS：可以做到两个级别

精简：从代码中移除不必要的字符和去除重复脚本以减少其大小。

混淆：在精简的同时，还会改写代码，函数、变量名被转换成短的字符串。

4、图片方面

• ① 避免空的图片src

因为空的图片src仍然会使浏览器发送请求到服务器，这样完全是浪费时间。

• ② 压缩图标

• ③ 使用css雪碧图

• ④ 不要在HTML上缩放图片

5、服务器端方面

• ① 使用CDN：

CDN是内容分发网络，通过部署在不同地区的服务器来提高用户的下载速度，可以减少网页内容的下载时间

• ② 做服务器缓存

6、cookie 方面

• ① 减少cookie的大小

提高请求的响应速度

7、移动客户端方面

• ① 保持单个内容小于25KB

• ② 打包组件成符合文档

8、图片优化加载处理的方法

① 减少文件体积大小

• 压 缩优化图片大小
• 采用合 适的图片格式

 

 ② 减少图片资源请求数(合并HTTP请求)

• 合成雪碧图
• 使用DataURL 

 

③ 图片预加载

• 隐性预加载

先是显性预加载(钱币小图标Loding)快速地呈现部分画面(截图右部分)给用户，再通过互动(向上滑动数钱)来继续分段加载资源

• 显性预加载 

处于预加载过程时页面有明确的加载提示，比如进度条或者是Loading图标。

 

④ 图片懒加载

又称为延迟加载、按需加载。

指的是图片在页面渲染的时候先不加载，页面渲染完成后在指定动作触发后再加载图片。

实现的原理是：

先将图片的实际src，记录在data-set属性中。

监听屏幕滚动，计算图片的Y坐标，并计算可视区域的高度height，当Y小于等于(height+scrollTop)时，图片的src的值用data-src的来替换，从而来实现图片的懒加载。

 

9、借助webpack优化

说说如何借助webpack来优化前端性能？_小草莓蹦蹦跳的博客-CSDN博客

 

10、更多总结

一般根据雅虎的黄金35定律对Web前端进行优化。

从网页内容、CSS、JavaScript、图片、服务器端、cookie、移动客户端等方面进行优化。

不过随着浏览器和协议等的发展，有一些已经逐渐被淘汰了。例如，“尽量减少HTTP请求数"这一条，在HTTP2协议下就不管用了，因为HTTP2实现了HTTP复用，HTTP请求变少反而降低了性能。因此要结合历史环境看待具体的优化原则和手段。 

 对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘IO。

性能优化一个最重要的原则是：永远呈现必要的内容，我们可以通过懒加载非首屏资源，或者采用分页的方式将数据”按需加载“。 

 自己的总结：

 谈一谈你知道的前端性能优化方案有哪些？_小草莓蹦蹦跳的博客-CSDN博客