这 5 年 web 前端领域到底发生了什么，我怎么感觉性能变差了？

abcbuzhiming · 2017-09-21T13:56:31Z

5 年前那个时候，flash 还没死绝，各个浏览器核心还在持续优化，H5 还没有形成优势地位。5 年过去了，flash 基本死绝，H5 称霸业界，浏览器发展了 5 年，可我觉得我的电脑打开页面越来越慢了，按理说甩开了 flash 的历史包袱，全新的 ES6，ES7 标准，加上 5 年时间对 js 引擎的优化，网页应该打开的更快才对，到底为什么，这 5 年 web 页面的复杂度在不知不觉中发生了变化了吗？

flash

Web

浏览器

ES7

69 replies • 2020-08-09 19:20:41 +08:00

1

p64381

Sep 21, 2017 via Android

1

你的感觉没错，最快的时候是在刚出 chrome 那几天

2

Rubicker666

Sep 21, 2017 via Android

明显页面复杂度提升可不止一个档次

3

wzw

Sep 21, 2017 via Android

说得好，页面越来越复杂，难回简洁的时代了。

4

SuperMild

Sep 21, 2017

由于前端功能越来越完善，以前迫不得已需要在服务器处理的东西，现在几乎都能转到前端来做了，消耗的客户端的性能，但服务器减负啊。

5

abcbuzhiming

OP

Sep 21, 2017

@Rubicker666
@wzw
举个例子吧，复杂在何处

6

saran

Sep 21, 2017

9

为什么会这样呐，完全就是 ng\raect\vue 之些带歪了节奏，明明一个脚本，搞成了一个巨大的世界，然而实际上还是只干了脚本那点事。

7

Quaintjade

Sep 21, 2017 via Android

现在越来越多的东西都让浏览器处理了(此处该 @海盗湾)
还有就是虽然有优化，但不同浏览器优化不同，比如 chrome 的 for 嵌套特别快，另一些 function 则比较慢； Firefox 可能相反。

8

OctoCat

Sep 21, 2017

1

前端轮子越来越多了，帮派也很多，喜欢撕逼搞事。编程界的演艺圈。

9

a87150

Sep 21, 2017 via Android

乱七八糟的特效太多。

10

remon

Sep 21, 2017

@abcbuzhiming #5 简单来说就是：以前后端渲染模式，访问一个页面---浏览器发出请求，服务器后台读取数据，渲染模板，浏览器拿到 HTML 开始渲染，请求图片等资源，用户看到一个完整网页；
现在浏览器渲染模式，访问一个页面---浏览器发出请求，从 CDN 或服务器得到静态页面（此页面只包含极少部分页面内容），浏览器开始渲染，看到部分静态内容，请求静态资源，解析 js 脚本，发出请求，服务器响应请求，返回数据，js 拿到数据，拼装内容，浏览器渲染，用户看到完整网页

11

roychan

Sep 21, 2017

都是戏。

12

rogwan

Sep 21, 2017 via Android

还有各种第三方 API 加载 js，拼装，渲染，不慢才怪呀

13

chinvo

Sep 21, 2017

因为 “ H5 ” 这个 PM 们造出来的假概念

至今不能理解 H5 到底是什么

仔细想想，大概 H5 约等于大量冗余 JS 代码+大量 JS 动画+大量冗余 CSS 代码+大量 CSS 动画+大量冗余 HTML 内容+大量垃圾第三方资源

不慢才怪

14

duola

Sep 21, 2017

3

你的电脑换了没有。

15

dixeran

Sep 21, 2017 via Android

服务器减少的任务丢给浏览器了

16

lightening

Sep 21, 2017

@abcbuzhiming 比如各种页面内的交互。

17

SilentDepth

Sep 22, 2017 via iPad

@saran 哪点事？

18

tonghuashuai

Sep 22, 2017 via iPhone

因为页面承载了过多的前端繁荣。

19

prolic

Sep 22, 2017

感觉离完全的前后端分离也不远了，nginx 做路由调静态 html+js，后台只提供 RESTful 接口

20

wangjie

Sep 22, 2017 via iPhone

同想问你电脑换了没

21

t6attack

Sep 22, 2017

javascript 变成浏览器的汇编了。

22

markocen

Sep 22, 2017 via Android

你用的是 5 年前的电脑吗

23

carlclone

Sep 22, 2017 via Android

9

v2 也那么多傻逼帖了吗

24

ChefIsAwesome

Sep 22, 2017

1

张嘴就来，说慢的倒是举个例子说说哪家网站你打开慢了？五年前你家宽带多少兆，现在多少兆，脚本体积的增长赶得上宽带的增长速度？就拿淘宝那首页讲，那么多图，首页初次加载也就只有 600k 左右，还不是 js 做的懒加载的功劳。换五年前你开个图片都费劲吧。

25

fuxkcsdn

Sep 22, 2017 via iPhone

@ChefIsAwesome 5 年前淘宝就使用上懒加载技术了

26

maddot

Sep 22, 2017

简历驱动编程
明明 jquery 可以搞定，但为了简历上写上各种框架项目经验，就上框架了
这些框架也创造出了更多的职位，是有利于我们这个行业的.....

27

dsg005

Sep 22, 2017

10 年前的一些 flash 动画效果，至今 html5 还实现不了，就算模仿出来了，一眼就能看出不是 flash

28

XueSeason

Sep 22, 2017

5 年前 iPhone 4s 运行 iOS 6 也很快啊，5 年前我老家 10 年前的电脑还能带动 LOL。

29

fulvaz

Sep 22, 2017

是啊.

不然你以为为啥前端这么贵了.

30

naver1

Sep 22, 2017

前端不安分，动不动就造新轮子。。。

31

whypool

Sep 22, 2017

前端承担了 6 成以上的数据逻辑，交互逻辑，加上各种框架自己的事件循环，所以慢是浏览器处理这些东西要花时间

32

fbcskpebfr

Sep 22, 2017 via Android

前端换了电脑而你没有😂😂

https://zhuanlan.zhihu.com/p/27827321

33

abcbuzhiming

OP

Sep 22, 2017

@wangjie
@duola
@wangjie
没换啊，就是因为没换所以才有比较啊

34

abcbuzhiming

OP

Sep 22, 2017

@carlclone 你才傻逼

35

abcbuzhiming

OP

Sep 22, 2017

3

@ChefIsAwesome 什么叫张嘴就来，你自己没体验吧，就拿淘宝来说，现在的淘宝首页打开的时候比 5 年前费劲多了，5 年前的淘宝首页打开无论速度还是 CPU 占有率都没现在这么高，现在我的宽带是 5 年前的 25 倍，CPU 停留在 I5 3570，可是打开淘宝首页不仅明显感觉页面载入变慢了，而且 CPU 转的茫茫快

36

Sapp

Sep 22, 2017

@abcbuzhiming 刚试了试，我的淘宝是秒进去的，就是图片出来需要个 1-2 秒才能全出来。几年前淘宝什么样我已经忘了，但是我估摸着能比淘宝这个速度快，也就百度首页那种了。

37

abcbuzhiming

OP

Sep 22, 2017

@Sapp 你有没有注意这个过程中你的 CPU 占用率，尤其是此时如果你往下滚动一下页面会发现你的 CPU 占用率飙升，这个可是 5 年前绝对没有的现象

38

Tunar

Sep 22, 2017 via Android

忙着吵架😓

39

Sapp

Sep 22, 2017

@abcbuzhiming 我又去试了一下，cpu 除了刚进去 cpu 升高了，后面一直保持着稳稳地没动，几秒之后就跌回来了，使用率从 5% 升到了 10%，还有 90% 多闲置着。

40

EchoChan

Sep 22, 2017 via iPhone

麻烦把性能定义清楚。

41

abcbuzhiming

OP

Sep 22, 2017

@Sapp 对啊，就是刚进去的时候，这个现象在 5 年前是没有的，载入页面 DOM 树时浏览器对 CPU 的占用飙升，这种现象在 5 年前只出现在无节制的在页面上的堆 flash 的网页。而且 5 年前的淘宝是没有这种载入时 CPU 占用飙升的情况的，而且淘宝还算比较好的了，有的网站居然能把 I5 飚到 80%以上，这在 5 年前是没有的

42

abcbuzhiming

OP

Sep 22, 2017

@EchoChan 从按下回车，浏览器下载页面并最终完成页面渲染的这段时间，CPU 的占用率比 5 年前高出了许多，渲染的平均时间慢于 5 年前，而这 5 年时间 Html5 和 js 的变化并没有太大，唯一的变化就是少了吃资源大户 flash，所以我觉得这很不合理