前端是不是应该更注重性能优化,有什么大型前端项目学习?

目前在学前端,以为一直以为前端就是前端,现在深入了解之后发现其实前端也是部属在后端,就是前端所需的资源(代码 /样式 /资源)等都存储在后端的。只不过浏览器在打开的时候,从后端去获取信息再加载到浏览器中运行。

所以从这点来说,前端更加要注重性能:
1. 资源和数据要尽量小,方便快速传输加载。
2. 因为浏览器要开很多页面,所以前端资源应该尽早释放,要注重内存优化。
3. 前端已经不是单个静态网页,而是复杂的容器(可以做复杂的事情,比如 canvas,webgl )。

不知道大型前端项目的代码量有多少(应该也大不到哪里去,跟后端比就是小虾米)?
前端对构建大型应用的可能性有多大?
前端 后端 浏览器 资源21 条回复 • 2021-07-16 13:56:53 +08:00
murmur 1
murmur 1 天前 ❤️ 1
前端优化只能砍需求,而这个几乎没法实现,懒加载你的首页还是一堆乱七八糟的,懒也懒不到哪里去

一个清爽的首页无论怎么做都很优化,堆旧淘宝那对乱七八糟的东西在首页,怎么优化首屏都下不来
66beta 2
66beta 1 天前
(应该也大不到哪里去,跟后端比就是小虾米)
KisekiRemi 3
KisekiRemi 1 天前 ❤️ 1
原本以为是面向用户体验进行开发,现在才明白是面向领导和公司开发
rioshikelong121 4
rioshikelong121 1 天前
现在一个 tab 随随便便占几百 MB 内存。吓人。
CodeCodeStudy 5
CodeCodeStudy 1 天前 ❤️ 1
第 2 点不成立,浏览器开很多页面跟前端的工作没有什么关系,只要当前页面不卡顿就行,过度优化没有用
3dwelcome 6
3dwelcome 1 天前
“3. 前端已经不是单个静态网页,而是复杂的容器(可以做复杂的事情,比如 canvas,webgl )。”

老外有句话:选*合适的语言,做*合适的事情。

JS *好就是快速开发单页面应用,也别太在乎性能。你说搭建大型 webgl 应用,不是不可以,但对于 JS 来说,巨型项目代码管理压力真的还挺大。
maplerecall 7
maplerecall 1 天前 via Android
大型也得有个参照,举个例子,Bing 的前端部分代码 clone 下来大概 100 多 GB 。虽然包含了一些资源和测试文件,但其中无论整体框架还是业务代码的复杂度远超业界*大部分后端项目了。

另外随着 node 应用越来越广泛,现在前端工作其实已经混合了不少之前属于后端的内容。不同项目的偏重性也都不一样,并不能武断的说前端代码量就一定小。例如工具、编辑器以及*近流行的 lowcode 类项目的前端代码量很多都远超后端部分的。
James369 8
James369 1 天前
@maplerecall bing 前端是什么项目
SergeGao 9
SergeGao 23 小时 42 分钟前
@maplerecall 好奇 Bing 前端都包括了什么? 100GB 的前端项目还没见过。。
murmur 10
murmur 23 小时 38 分钟前
@maplerecall 因为 node 做后端就把后端强行算前端就没意思了,虽然大家都是全干,但是讨论的时候还是按浏览器和服务器划分

ericgui 23 小时 35 分钟前
能做的事越复杂, 性能就越差

所以你只能做平衡,在满足公司业务的需求的同时,别太慢了,就行了。
toesbieya 12
toesbieya 22 小时 40 分钟前
之前有看过有人说腾讯文档前端有上百万行代码
godblessumilk 13
godblessumilk 22 小时 28 分钟前 ❤️ 1
可以了解下 OHIF viewer 这个前端项目,一个在线的 DICOM 协议医疗图像查看器,涉及到了大量的 webGL 和 canvas 对二进制流的渲染以及图像处理,工程复杂度和代码量都远超常规小体积图像文本处理的后端,https://viewer.ohif.org/ 是个典型的 PWA 离线 web 应用,server worker 让 js 开了多线程提高性能
a4854857 14
a4854857 21 小时 59 分钟前
@godblessumilk 简单扫了一眼你的描述顺手打开还蛮吓人
CraxClive 15
CraxClive 19 小时 38 分钟前 via iPhone
@a4854857 的确吓人…
banricho 16
banricho 19 小时 34 分钟前 via Android
看方向,数据可视化、地图这种,或者石墨文档、Notion 这类都是比较复杂的前端业务。不要光看代码量,很多电商或管理后台只是页面多,但实际上难度并不大。
DiamondYuan 17
DiamondYuan 17 小时 12 分钟前 via iPhone ❤️ 3
推荐读 vscode 源码

1. 代码量大,有 50 万行
2. 用了大量设计模式,vscode 的开发者是 《设计模式》 这本书的作者。
3. 附带了 monaco,优秀的前端编辑器。(几乎所有 cloud ide 用的都是 monaco
4. 跨平台( mac windows linux,跨端 ( node electron web,可以了解到如何通过依赖注入屏蔽环境差异,如何组织代码
5. 自带插件系统,可以学习如何设计一套优秀的插件 api,学习如何进行进程隔离。
6. 主题:学习如何实现动态换肤
7. 语言服务(lap): 这个不做编辑器可以不看
8. src/vs/base 包含一系列基础库,可以拷贝到自己心目里直接用
blessyou 18
blessyou 17 小时 1 分钟前 via Android ❤️ 1
等一等,优化的前提是有监控或者数据对比。没有就只能瞎吹。
DiamondYuan 19
DiamondYuan 16 小时 57 分钟前 via iPhone
除了 vscode,还可以看 chrome 的 devtool (没错,这个是前端项目)。
yunyuyuan 20
yunyuyuan 4 小时 51 分钟前
优化是用来面试的