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

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 1803 days ago, the information mentioned may be changed or developed.

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

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

不知道大型前端项目的代码量有多少（应该也大不到哪里去，跟后端比就是小虾米）?
前端对构建大型应用的可能性有多大？

前端

后端

浏览器

资源

23 replies • 2021-07-16 21:28:51 +08:00

murmur

Jul 15, 2021

前端优化只能砍需求，而这个几乎没法实现，懒加载你的首页还是一堆乱七八糟的，懒也懒不到哪里去

一个清爽的首页无论怎么做都很优化，堆旧淘宝那对乱七八糟的东西在首页，怎么优化首屏都下不来

66beta

Jul 15, 2021

（应该也大不到哪里去，跟后端比就是小虾米）

KisekiRemi

Jul 15, 2021

原本以为是面向用户体验进行开发，现在才明白是面向领导和公司开发

rioshikelong121

Jul 15, 2021

现在一个 tab 随随便便占几百 MB 内存。吓人。

CodeCodeStudy

Jul 15, 2021

第 2 点不成立，浏览器开很多页面跟前端的工作没有什么关系，只要当前页面不卡顿就行，过度优化没有用

3dwelcome

Jul 15, 2021

“3. 前端已经不是单个静态网页，而是复杂的容器（可以做复杂的事情，比如 canvas，webgl ）。”

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

JS 最好就是快速开发单页面应用，也别太在乎性能。你说搭建大型 webgl 应用，不是不可以，但对于 JS 来说，巨型项目代码管理压力真的还挺大。

maplerecall

Jul 15, 2021 via Android

大型也得有个参照，举个例子，Bing 的前端部分代码 clone 下来大概 100 多 GB 。虽然包含了一些资源和测试文件，但其中无论整体框架还是业务代码的复杂度远超业界绝大部分后端项目了。

另外随着 node 应用越来越广泛，现在前端工作其实已经混合了不少之前属于后端的内容。不同项目的偏重性也都不一样，并不能武断的说前端代码量就一定小。例如工具、编辑器以及最近流行的 lowcode 类项目的前端代码量很多都远超后端部分的。

James369

Jul 15, 2021

@maplerecall bing 前端是什么项目

SergeGao

Jul 15, 2021

@maplerecall 好奇 Bing 前端都包括了什么？ 100GB 的前端项目还没见过。。

murmur

Jul 15, 2021

@maplerecall 因为 node 做后端就把后端强行算前端就没意思了，虽然大家都是全干，但是讨论的时候还是按浏览器和服务器划分

ericgui

Jul 15, 2021

能做的事越复杂，性能就越差

所以你只能做平衡，在满足公司业务的需求的同时，别太慢了，就行了。

toesbieya

Jul 15, 2021

之前有看过有人说腾讯文档前端有上百万行代码

godblessumilk

Jul 15, 2021

可以了解下 OHIF viewer 这个前端项目，一个在线的 DICOM 协议医疗图像查看器，涉及到了大量的 webGL 和 canvas 对二进制流的渲染以及图像处理，工程复杂度和代码量都远超常规小体积图像文本处理的后端，https://viewer.ohif.org/ 是个典型的 PWA 离线 web 应用，server worker 让 js 开了多线程提高性能

a4854857

Jul 15, 2021

@godblessumilk 简单扫了一眼你的描述顺手打开还蛮吓人

CraxClive

Jul 15, 2021 via iPhone

@a4854857 的确吓人…

banricho

Jul 15, 2021 via Android

看方向，数据可视化、地图这种，或者石墨文档、Notion 这类都是比较复杂的前端业务。不要光看代码量，很多电商或管理后台只是页面多，但实际上难度并不大。

DiamondYuan

Jul 15, 2021 via iPhone

推荐读 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 包含一系列基础库，可以拷贝到自己心目里直接用