关于javascript:前端面试前端性能优化篇

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

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

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

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值

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

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据