V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
James369
V2EX  ›  程序员

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

  •  
  •   James369 · 2021-07-15 11:21:47 +08:00 · 3577 次点击
    这是一个创建于 987 天前的主题,其中的信息可能已经有所发展或是发生改变。
    目前在学前端,以为一直以为前端就是前端,现在深入了解之后发现其实前端也是部属在后端,就是前端所需的资源(代码 /样式 /资源)等都存储在后端的。只不过浏览器在打开的时候,从后端去获取信息再加载到浏览器中运行。

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

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

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

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

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

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

    所以你只能做平衡,在满足公司业务的需求的同时,别太慢了,就行了。
    toesbieya
        12
    toesbieya  
       2021-07-15 15:54:06 +08:00
    之前有看过有人说腾讯文档前端有上百万行代码
    godblessumilk
        13
    godblessumilk  
       2021-07-15 16:05:15 +08:00   ❤️ 2
    可以了解下 OHIF viewer 这个前端项目,一个在线的 DICOM 协议医疗图像查看器,涉及到了大量的 webGL 和 canvas 对二进制流的渲染以及图像处理,工程复杂度和代码量都远超常规小体积图像文本处理的后端,https://viewer.ohif.org/ 是个典型的 PWA 离线 web 应用,server worker 让 js 开了多线程提高性能
    a4854857
        14
    a4854857  
       2021-07-15 16:34:25 +08:00
    @godblessumilk 简单扫了一眼你的描述顺手打开还蛮吓人
    CraxClive
        15
    CraxClive  
       2021-07-15 18:55:17 +08:00 via iPhone
    @a4854857 的确吓人…
    banricho
        16
    banricho  
       2021-07-15 18:59:42 +08:00 via Android
    看方向,数据可视化、地图这种,或者石墨文档、Notion 这类都是比较复杂的前端业务。不要光看代码量,很多电商或管理后台只是页面多,但实际上难度并不大。
    DiamondYuan
        17
    DiamondYuan  
       2021-07-15 21:21:19 +08:00 via iPhone   ❤️ 4
    推荐读 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  
       2021-07-15 21:33:11 +08:00 via Android   ❤️ 1
    等一等,优化的前提是有监控或者数据对比。没有就只能瞎吹。
    DiamondYuan
        19
    DiamondYuan  
       2021-07-15 21:37:04 +08:00 via iPhone
    除了 vscode,还可以看 chrome 的 devtool (没错,这个是前端项目)。
    yunyuyuan
        20
    yunyuyuan  
       2021-07-16 09:42:54 +08:00
    优化是用来面试的
    xingyuc
        21
    xingyuc  
       2021-07-16 13:56:53 +08:00
    @blessyou 参考罗老师的效率提升 1000%?
    MrBrand
        22
    MrBrand  
       2021-07-16 15:02:20 +08:00
    @KisekiRemi 面向业务开发,哈哈哈哈
    janus77
        23
    janus77  
       2021-07-16 21:28:51 +08:00
    imququ.com 看看这位前端大佬的博客 你就知道怎么优化了
    注意:不止看文章 这个站本身的打开速度也是顶级的
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1064 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 75ms · UTC 22:43 · PVG 06:43 · LAX 15:43 · JFK 18:43
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.