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

2021-07-15 11:21:47 +08:00
 James369
目前在学前端，以为一直以为前端就是前端，现在深入了解之后发现其实前端也是部属在后端，就是前端所需的资源（代码 /样式 /资源）等都存储在后端的。只不过浏览器在打开的时候，从后端去获取信息再加载到浏览器中运行。

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

不知道大型前端项目的代码量有多少（应该也大不到哪里去，跟后端比就是小虾米）?
前端对构建大型应用的可能性有多大？
3600 次点击
所在节点    程序员
23 条回复
murmur
2021-07-15 11:28:59 +08:00
前端优化只能砍需求，而这个几乎没法实现，懒加载你的首页还是一堆乱七八糟的，懒也懒不到哪里去

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

老外有句话：选最合适的语言，做最合适的事情。

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

另外随着 node 应用越来越广泛，现在前端工作其实已经混合了不少之前属于后端的内容。不同项目的偏重性也都不一样，并不能武断的说前端代码量就一定小。例如工具、编辑器以及最近流行的 lowcode 类项目的前端代码量很多都远超后端部分的。
James369
2021-07-15 13:42:10 +08:00
@maplerecall bing 前端是什么项目
SergeGao
2021-07-15 14:51:46 +08:00
@maplerecall 好奇 Bing 前端都包括了什么？ 100GB 的前端项目还没见过。。
murmur
2021-07-15 14:55:25 +08:00
@maplerecall 因为 node 做后端就把后端强行算前端就没意思了，虽然大家都是全干，但是讨论的时候还是按浏览器和服务器划分
ericgui
2021-07-15 14:58:37 +08:00
能做的事越复杂， 性能就越差

所以你只能做平衡，在满足公司业务的需求的同时，别太慢了，就行了。
toesbieya
2021-07-15 15:54:06 +08:00
之前有看过有人说腾讯文档前端有上百万行代码
godblessumilk
2021-07-15 16:05:15 +08:00
可以了解下 OHIF viewer 这个前端项目，一个在线的 DICOM 协议医疗图像查看器，涉及到了大量的 webGL 和 canvas 对二进制流的渲染以及图像处理，工程复杂度和代码量都远超常规小体积图像文本处理的后端，https://viewer.ohif.org/ 是个典型的 PWA 离线 web 应用，server worker 让 js 开了多线程提高性能
a4854857
2021-07-15 16:34:25 +08:00
@godblessumilk 简单扫了一眼你的描述顺手打开还蛮吓人
CraxClive
2021-07-15 18:55:17 +08:00
@a4854857 的确吓人…
banricho
2021-07-15 18:59:42 +08:00
看方向，数据可视化、地图这种，或者石墨文档、Notion 这类都是比较复杂的前端业务。不要光看代码量，很多电商或管理后台只是页面多，但实际上难度并不大。
DiamondYuan
2021-07-15 21:21:19 +08:00
推荐读 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
2021-07-15 21:33:11 +08:00
等一等，优化的前提是有监控或者数据对比。没有就只能瞎吹。
DiamondYuan
2021-07-15 21:37:04 +08:00
除了 vscode，还可以看 chrome 的 devtool （没错，这个是前端项目）。
yunyuyuan
2021-07-16 09:42:54 +08:00
优化是用来面试的

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/789659

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX