首页 > 其他分享 >前端面试前端性能优化篇

前端面试前端性能优化篇

时间:2022-09-30 08:44:05浏览次数:77  
标签:前端 JS 面试 使用 优化 CSS 加载

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

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

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

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、使用CDN,可以加速资源的请求速度

加载时间分配:

  • 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值

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

标签:前端,JS,面试,使用,优化,CSS,加载
From: https://www.cnblogs.com/loveX001/p/16743704.html

相关文章

  • 数据类型扩展及面试题
    数据类型强类型语言要求变量的使用要严格符合规定,所有变量都必须先定义后才能使用注:String=''字符串''(英文或中文)弱类型语言变量的使用不需要严格符合规定......
  • redis面试题
    一、线程1.1、redis是单线程还是多线程Redis6.0版本以前的单线程是指其网络I/O和键值对读写是由一个线程完成的Redis6.0引入的多线程指的是网络请求过程采用了多线程,而......
  • Web性能优化地图
    本文作者是来自360导航的前端开发工程师Berwin,W3C性能工作组成员,同时也是《深入浅出Vue.js》(待出版)的作者。本文转载自奇舞周刊。总结文章介绍我们都知道对于Web应......
  • 【前端必会】tapable、hook,webpack的灵魂
    背景什么是tapable、hook,平时做vue开发时的webpack配置一直都没弄懂,你也有这种情况吗?还是看源码,闲来无聊又看一下webpack的源码,看看能否找到一些宝藏tapable和webpack......
  • 多目标优化 | NSGA-II进阶教程(全网首个三目标优化教程)
    我们在​​多目标优化|基于NSGA-II的多目标0-1背包问题求解(附matlab代码)​​讲解了使用NSGA-II求解两个目标(总价值和总体积)的01背包问题,后台有小伙伴咨询小编说能否出一期......
  • 多目标优化 | 基于NSGA-II的多目标0-1背包问题求解(附matlab代码)
    多目标0-1背包问题小编已经在​​基于粒子群算法的多目标搜索算法讲解(附MATLAB代码)​​这篇推文详细介绍过,NSGA-II小编已经在​​NSGA-II多目标优化算法讲解(附MATLAB代码)​......
  • 前端面试总结12-WebApi-存储
    简述cooki,localstorage,sessionstorage的区别(1:cookie数据存放在浏览器上,session存放在服务器上(2:cookie安全性低(3:session占用服务器性能(4:单个cookie最大存储数据不超过4k......
  • java面试中被问到的问题
     技术面1) Spring 的注解有哪些?2) 你如何理解 spring IOC 技术,如果不使用spring,你有哪些方式来加载 bean?3) spring aop 的原理是什么?它是怎样一个写法?关键配置项是......
  • 前端面试总结11-WebApi-Ajax
    1.同源策略:ajax请求时,浏览器要求当前网页和serve必须同源(安全),即协议,域名,端口三者必须一致2.可无视同源策略的情况(1:<img/>可用于统计打点,可使用第三方统计服务(2:<link/><......
  • sshd服务(1)优化ssh连接速度,解决等待时间长问题
    参考文档优化ssh连接速度,解决等待时间长问题、ssh持久化连接优化ansible修改ssh配置文件:/etc/ssh/sshd_config1、关闭DNS反查使用了dns反查,这样的话当ssh某个IP时,系......