• 前端面试前端性能优化篇


    不论是什么样的前端面试,总会问到的一个问题:前端性能优化。

    相信如果这个问题没有答好,在面试中会很被动。

    于是,趁着这个天天宅的时期,好好的整理了一番。

    Start~

    一、HTML优化

    渲染顺序

    • 1、CSS样式表置于头部,CSS会一边加载一边渲染
    • 2、JS脚本置于尾部,JS在未加载完成之前,会阻塞渲染
    • 3、使用外部的样式表和脚本,优先加载出HTML结构
    • 4、关键JS、CSS代码可以内嵌在HTML中,比如:rem动态等
    • 5、避免使用iFrame
    • 6、使用骨架屏

    二、CSS优化

    加载优化

    • 1、避免使用css的@import
    • 2、避免使用通配符
    • 3、避免使用!impotant
    • 4、优化css reset,项目中不会用到这么多reset
    • 5、避免使用css表达式

    动画优化

    • 1、可以使用transform开启图形加速
    • 2、用translate取代left,可以避免页面重排

    选择器优化

    • 1、选择器嵌套尽量不要超过三层
    • 2、id选择器尽量不要嵌套
    • 3、使用继承

    体积优化

    • 1、提取公共CSS

    三、JS优化

    运行速度

    • 1、如果没有兼容问题,尽量使用原生方法
    • 2、根据兼容浏览器的最低版本,考虑是否使用polyfill
    • 3、switch语句相对if,可以较快通过将case语句按照最可能到最不可能的顺序进行组织
    • 4、位运算较快。当进行数字运算时,位运算操作要比任何布尔运算或者算数运算快
    • 5、巧用||和&&布尔运算符,可以减少执行代码语句
    • 6、使用加号拼接是最快的,其次是String()、.toString()、new String()
    • 7、需要使用定时器时,用setTimeout取代setInterval,setInterval会一直占用内存
    • 8、制作JS动画时,使用requestAnimationFrame取代setTimeout和setInterval

    变量优化

    • 1、避免全局查找,可以将需要访问的属性用变量保存
    • 2、使用变量比使用对象属性和数组元素要快
    • 3、对于包含大量数据而不需要操作的对象,可以使用Object.freeze冻结对象,加快运行速度

    减少无用操作

    • 1、使用节流、防抖
    • 2、使用事件委托取代大量事件的绑定
    • 3、若需要对DOM进行大量操作,可以使用Fragment减少操作次数

    减少未使用代码

    • 1、进行tree-shaking,删减未使用的代码

    算法优化

    • 1、添加key值,最大效益的使用虚拟DOM,减少Diff时间
    • 2、使用benchmark测试不同算法的性能,择优

    四、网络优化

    请求数量上限:

    • 1、每个网站最多允许同时6个请求,可以考虑将资源分类部署

    请求速度优化:

    加载时间分配:

    • 1、核心资源预加载

    • 2、大体积资源按需加载(Webpack拆包)

    减少加载体积

    • 1、压缩图片
    • 2、压缩HTML、CSS、JS代码
    • 3、开启网络压缩,如:GZIP

    减少加载次数

    • 1、制作精灵图
    • 2、将小图片转换为base64字符串
    • 3、使用浏览器缓存
    • 4、使用前端缓存,如: LocalStorage、Cookie、SessionStorage等
    • 5、减少重定向请求,比如:nginx反向代理的重定向
    • 6、避免使用服务端字体

    五、React性能优化

    1、优化react事件,避免使用闭包函数

    2、使用持续化数据结构Immutable对redux进行管理

    3、优化shuoldComponentUpdate生命周期定义基础组件BaseComponent取代React.Component

    4、使用纯组件PureComponent

    5、添加Key值

    注:以上总结的可能不完整,可以在评论区补充,我后续补充上,谢谢~

  • 相关阅读:
    维吉尼亚密码
    【数据库入门到精通】mysql的存储过程实战
    【 2023华为杯C题】大规模创新类竞赛评审方案研究(思路、代码......)
    OK3568 forlinx系统编译过程及问题汇总
    PingCode DevOps 团队:企业CICD流水线可能会遇到的问题及解法
    恒运资本:银行股适合定投吗?为什么银行股适合定投?
    linux-用户管理
    MyBatis——Plus基本的CRUD
    SRS之StateThreads学习
    Slax Linux 强化了会话管理和引导参数选项
  • 原文地址:https://blog.csdn.net/loveX001/article/details/127781602