时至5G时代，是否还有必要谈：前端性能优化？

Dionysus_go 发布于2019-08-23 18:10 / 3379人阅读

摘要：最近，一个问题总是时不时的冒出我的脑海前端性能优化时候还有必要回顾前端性能优化然后我找到了雅虎军规的条尽量减少请求个数须权衡使用内容分发网络为文件头指定或，使内容具有缓存性。那就是时候停下来，问一问是否还有必要这样做。

之前，何同学的视频在网上活了一阵子。引发了我们思考：5G将会给我们带来什么。同时也回顾了4G乃至3G时代已经给我们带来了哪些新的变革。最近，一个问题总是时不时的冒出我的脑海：前端性能优化时候还有必要？

回顾前端性能优化

然后我找到了 雅虎军规 的 35 条

尽量减少 HTTP 请求个数——须权衡

使用 CDN（内容分发网络）

为文件头指定 Expires 或 Cache-Control ，使内容具有缓存性。

避免空的 src 和 href

使用 gzip 压缩内容

把 CSS 放到顶部

把 JS 放到底部

避免使用 CSS 表达式

将 CSS 和 JS 放到外部文件中

减少 DNS 查找次数

精简 CSS 和 JS

避免跳转

剔除重复的 JS 和 CSS

配置 ETags

使 AJAX 可缓存

尽早刷新输出缓冲

使用 GET 来完成 AJAX 请求

延迟加载

预加载

减少 DOM 元素个数

根据域名划分页面内容

尽量减少 iframe 的个数

避免 404

减少 Cookie 的大小

使用无 cookie 的域

减少 DOM 访问

开发智能事件处理程序

用 link 代替 @import

避免使用滤镜

优化图像

优化 CSS Spirite

不要在 HTML 中缩放图像——须权衡

favicon.ico要小而且可缓存

保持单个内容小于25K

打包组件成复合文本

我们归档一下这里我们着重说明的网络相关的优化，而非浏览器端性能上的：

1.尽量减少 HTTP 请求个数——须权衡
5.使用 gzip 压缩内容
10.减少 DNS 查找次数
11.精简 CSS 和 JS
13.剔除重复的 JS 和 CSS
15.使 AJAX 可缓存
17.使用 GET 来完成 AJAX 请求
29.避免使用滤镜
31.优化 CSS Spirite
32.不要在 HTML 中缩放图像——须权衡
33.favicon.ico要小而且可缓存
34.保持单个内容小于25K
35.打包组件成复合文本

然后就剩下这么几个了。作为现在前沿的前端技术，webpack已经帮我们做了5,11,13,33,35。而且其中的13.剔除重复的 JS 和 CSS，在框架盛行的时代，似乎我们已经选择基于框架的覆写而非直接修改框架的方式来构建我们的代码，因为维护成本。也就是说，我们在成本权衡下回做适当的放弃13.
与此同时，在 resultful 盛行的今天，17. 使用 GET 来完成 AJAX 请求也不能满足需求，而被部分舍弃。然后字体图标的流行，把31. 优化 CSS Spirite的问题也变成了历史。接着我们看看还剩下些什么：

1.尽量减少 HTTP 请求个数——须权衡
10.减少 DNS 查找次数
15.使 AJAX 可缓存
29.避免使用滤镜
32.不要在 HTML 中缩放图像——须权衡
34.保持单个内容小于25K

再去掉需权衡的两项，因为这两项好像在我们日常的工作中已经不再权衡.。接着去掉前端没法控制的DNS次数的问题：

使 AJAX 可缓存

避免使用滤镜

保持单个内容小于25K

emmm，好像我们现在反而比较喜欢使用一些比较炫酷的滤镜来做一些很惊艳的效果。至于 34，怕是我们现在一张小图片都不止 25k 了吧？再者是缓存的问题：单页面泛滥以及 localStorage 盛行的当下，缓存Ajax信息以及称为了我们的标配。

what？怎么没有了？我不服：

6.把 CSS 放到顶部
7.把 JS 放到底部

这两条怎么不说？
敢问网速给力的今天，你一个三五百 kb 的 js 文件，即便是放在 head 标签最开始的位置，你会先看到 HTML 再看到 CSS 的渲染吗？so，还有必要刻意的纠结把js文件放在底部吗？
或许你会为了面子说：放在底部更好代码更为规范。但这些已经不重要了。

总结

技术是服务于产品的，产品是面向用户的。当我们所做的一些优化对于用户是无感知的，对于整个项目也不能提高什么效率的。那就是时候停下来，问一问：是否还有必要这样做。
当然，说了这么多，并不是希望大家在今后面试的时候，再被问到：前端性能有哪些优化方案的时候，就直接起身掀桌子。毕竟向人民币适当的低头也不算一件特别丢人的事情。

这里，仅仅是我个人看法，你觉得呢？

云服务器 GPU云服务器前端性能优化前端开发性能优化阿里云服务器还有必要装防火墙吗性能优化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104776.html

CloudBest：科普 | 一图看懂 5G 从哪来的

摘要：一个人的气质里有走过的路读过的书爱过的人又经历了哪些故事呢引子一部高清电影秒秒钟就能下载下来远程游戏再也不会有卡顿和延迟的感觉了依托也出现了一系列的新东西，比如，车联网自动驾驶远程控制等等那从哪来的呢她经历了怎样的故事才走到如今的样子本期将一个人的气质里有走过的路、读过的书、爱过的人5G 又经历了哪些故事呢？引子一部高清电影秒秒钟就能下载下来远程游戏再也不会有卡顿和延迟的感觉了依托 5G...

Tecode 2022-06-28 18:59 评论0 收藏0
前端性能优化

摘要：端优谈谈关于前端的缓存的问题我们都知道对页面进行缓存能够有利于减少请求发送，从而达到对页面的优化。而作为一名有追求的前端，势必要力所能及地优化我们前端页面的性能。这种方式主要解决了浅谈前端中的过早优化问题过早优化是万恶之源。优化向：单页应用多路由预渲染指南 Ajax 技术的出现，让我们的 Web 应用能够在不刷新的状态下显示不同页面的内容，这就是单页应用。在一个单页应用中，往往只有一...

Dean 2019-08-21 18:19 评论0 收藏0
从性能参数到业务大数据，浅谈直播 CDN 服务监控

摘要：线上服务的有效监控和数据收集，一直是后端服务离不开的话题。性能指标与业务融合当然，只有机器级的数据，是远远不够的。在这个大数据时代，有了数据却不做事情，等同于浪费。而南京移动的用户量较大，也说明南京地区应该增设服务点。线上服务的有效监控和数据收集，一直是后端服务离不开的话题。直播 CDN 作为一种经典的分布式系统，监控以及数据收集更是必不可少的工作。如何对海量的服务集群有效的监控和保...

番茄西红柿 2019-07-16 14:29 评论0 收藏0