V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
boblin
V2EX  ›  前端开发

前端技术方面的性能优化有哪些?

  •  
  •   boblin · 2021-02-19 20:33:38 +08:00 · 2426 次点击
    这是一个创建于 1134 天前的主题,其中的信息可能已经有所发展或是发生改变。
    简历里写了前端性能优化。最近面试,都爱问做了哪些优化。答:减少请求数、骨架屏、懒加载、本地缓存。面试官的意思是都是一些体验优化,而且都很基础,不太满意。然后面试结束的时候我也忘了问他们都做了哪些优化。

    请问各位网友,你们平时都做了哪些性能优化?
    15 条回复    2021-02-22 11:06:28 +08:00
    qyf1994
        1
    qyf1994  
       2021-02-19 20:43:46 +08:00
    做的挺多的就是想不起来了
    qyf1994
        2
    qyf1994  
       2021-02-19 20:44:07 +08:00
    简历上不知道写些什么
    mnikn
        3
    mnikn  
       2021-02-19 20:53:56 +08:00
    基本思路主要是这些,但是落实到具体业务就没有这么简单了。例如怎么定义性能指标,怎么知道优化后的提升了多少。
    Ptu2sha
        4
    Ptu2sha  
       2021-02-19 20:57:53 +08:00
    CDN HTTP2 webp 按需加载 雪碧图 字体图标 图片缩放
    connection
        5
    connection  
       2021-02-19 21:01:08 +08:00
    与#3 类似,先定义指标,再结合业务特点做性能优化
    ryougifujino
        6
    ryougifujino  
       2021-02-19 22:00:35 +08:00
    前端其实没有后端那么重视性能,一般来说也就 CDN 、Tree Shaking 、缓存这些了,都是必备,没什么新意。
    确实还是要结合自己的业务,因为一般都会遇到一些实际的问题,再去讲述,就更有说服力一些。
    比如我之前由于后端的逻辑,导致请求某一个接口后 token 就会变,并发请求的时候会出现授权错误,最后写了一个调度器解决了。
    还有就是项目中遇到了 RSA 解密的场景,会卡主线程,导致操作卡顿,后面采取将解密方法异步化后分片操作。这样的话就可以展开说。
    aaronlam
        7
    aaronlam  
       2021-02-19 22:15:33 +08:00
    之前在公司做项目时内部总结了几个点,可以给大家参考一下: https://docs.google.com/document/d/1FCJ0M0KNR_FpdueOYjFvqBrw2Qp0aL2xJz5f9LupcbU/edit
    9yu
        8
    9yu  
       2021-02-19 22:39:01 +08:00 via Android
    WASM
    cyrbuzz
        9
    cyrbuzz  
       2021-02-19 22:42:14 +08:00
    https://github.com/HuberTRoy/myown/blob/master/%E5%9F%BA%E4%BA%8E%E6%80%9D%E8%80%83%E6%89%80%E5%81%9A%E7%9A%84%E6%8E%A2%E7%B4%A2/%E6%80%A7%E8%83%BD%E6%96%B9%E9%9D%A2%E7%9A%84%E6%8E%A2%E7%B4%A2.md

    https://github.com/HuberTRoy/myown/blob/master/web%E7%A8%8B%E5%BA%8F%E4%BC%98%E5%8C%96%E6%80%9D%E8%B7%AF.pdf

    优化公司产品时的总结,lighthouse 从不到 10 分已经提升到了 50~60+。

    我自己的实践优化方面是:
    1. 第三方资源非阻塞加载,async/defer 标记,这个提速很大。
    2. DNS/CDN(百度统计等)链接的预查询与预连接,这个看不出来效果,提速微小。
    3. 服务器端支持 HTTP2,比 HTTP1.1 快了不是一点两点。
    4. 利用服务器端进行延迟加载,本身是个 Nuxt 的服务器端项目,利用 client-only 标签配合 import() + v-if 条件渲染,其实就是个分块+懒加载不过效果巨大,鹅且平时写组件的时候几乎都用 import 静态导入,调用频率低的模块也可以用 import()来改写。
    5. webpack 打包时的 tree-shaking,老生常谈的 lodash 和 lodash-es 等等,这个减少的是传输体积,如果项目本身冗长这块提升也非常大。
    6. 缓存这个就不用说了,检查检查有没有配置合理。
    7. 图片移动端剪裁成 2 倍实际显示大小的尺寸,PC 端 1 倍,牺牲小部分清晰度的同时大幅减少传输体积。
    8. 项目具体内部的代码优化,比如之前实现了一个利用 vue computed 属性的动态设置 style 的滚动效果,发现占用 CPU 20%以上....然后改成了 animation 。
    yhxx
        10
    yhxx  
       2021-02-19 23:04:44 +08:00
    挑点不常见的?
    比如 HTTP3 ?比如特别极致的图片优化( HEIC 、APNG 之类的,或者比如提升 CDN 命中率)?
    murmur
        11
    murmur  
       2021-02-19 23:19:43 +08:00   ❤️ 1
    没啥能优化的,国内的策略都是放弃低端机,乱七八糟堆一大堆东西,咋个优化

    少放东西别整花里胡哨是最管事的
    orzzyd
        12
    orzzyd  
       2021-02-19 23:24:39 +08:00
    《简历里写了前端性能优化》 -> 简历里去掉前端性能优化。
    面试遇到八股文算我倒霉,可能惹不起,可能躲不起,但不要主动给自己找麻烦呀。
    agdhole
        13
    agdhole  
       2021-02-19 23:31:12 +08:00
    哔哩哔哩把视频上传处理的一些步骤放到了本地 wasm 里面运行,比如预览图生成
    walpurgis
        14
    walpurgis  
       2021-02-20 00:13:41 +08:00
    传输层的性能优化有些实在过于 hack,就为了提升一丢丢速度而引入复杂度,现在网速快了真不差这 0 点几秒
    接触过一个屎山项目,一个 table 几千行,加载再快也没用,拖都拖不动,能搞定这种才叫性能优化吧
    xiayue
        15
    xiayue  
       2021-02-22 11:06:28 +08:00
    我也是最近才知道的。有个概念叫做 “关键渲染路径( Critical Rendering Path )” 你可以搜索一下。感觉有点用。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2871 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 48ms · UTC 14:27 · PVG 22:27 · LAX 07:27 · JFK 10:27
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.