面试题系列均来自鱼皮的知识星球——编程导航

什么是箭头函数？能使用 new 来创建箭头函数么？

箭头函数是 ES6 中新增的一种函数定义方式，可以用来简化函数的定义和书写。箭头函数的特点是：简洁的语法、绑定 this 关键字、不能用作构造函数。

箭头函数使用箭头（=>）来定义，基本语法如下：

1
(parameters) => { statements }

其中，parameters 是函数的参数列表，可以是一个或多个参数，多个参数之间用逗号分隔；statements 是函数的执行语句，可以是一个或多个语句，多个语句之间用花括号包裹起来。

在箭头函数中，this 关键字指向的是函数定义时所在的对象，而不是执行时所在的对象。这个特性有助于避免 this 的指向问题，使得代码更加简洁易读。

需要注意的是，箭头函数不能用作构造函数，也就是不能通过 new 关键字来创建实例。因为箭头函数没有自己的 this，而是继承了外层作用域的 this。如果用 new 来创建实例，就会出现意料之外的结果。

什么是 webpack 的热更新？它的实现原理是什么？

webpack 的热更新（Hot Module Replacement，简称 HMR）是一种开发时提高开发效率的技术，可以实现无需刷新页面即可看到代码修改后的效果。在使用 HMR 后，当修改了代码后，webpack 只会重新编译修改的代码，并将新的模块发送到客户端，替换掉旧的模块，从而达到实时更新页面的目的。

实现 HMR 的关键是在客户端和服务器端之间建立一个 WebSocket 连接，当代码发生变化时，服务器端会将新的模块发送给客户端，客户端接收到新的模块后会用新模块替换旧模块，从而实现实时更新。

具体来说，webpack HMR 主要分为以下几个步骤：

  1. 启动 webpack-dev-server，配置 HMR 插件
  2. 当代码变化时，webpack-dev-server 会编译出新的模块
  3. HMR runtime（客户端运行时）会通过 WebSocket 与服务器通信，获取最新的模块
  4. 当 HMR runtime 接收到新模块时，会将新模块加载到浏览器中，并通过模块热替换算法将新模块与旧模块进行比较，只替换有变化的模块部分
  5. 页面更新完成，无需刷新页面即可看到最新的效果。

总之，HMR 可以大大提高开发效率，同时也能够减少代码变更时的刷新操作，提高开发体验。

说说常规的前端性能优化手段

常见的前端性能优化手段有以下几种：

  1. DNS 优化：避免浏览器并发数限制，将HTML/CSS/JS，jpg/png，api 接口等不同资源放在不同域名下，从而减少DNS的请求次数；DNS 预解析。
  2. CDN 回源：回源指浏览器访问CDN集群上静态文件时，文件缓存过期，直接穿透 CDN 集群而访问源站机器的行为。
  3. 浏览器缓存优化：IndexDB、cookie、localStorage、sessionstorage。
  4. HTML5 离线化：通过选用不同的离线包类型
    • 全局离线包：包含公共的资源，可供多个应用共同使用
    • 私有离线包：只可以被某个应用单独使用
  5. 接口优化：
    • 接口合并：减少http请求
    • 接口上 CDN：把不需要实时更新的接口同步到CDN，如果接口数据更新再重新同步 CDN
    • 接口域名上 CDN：增强可用性，稳定性
    • 合理使用缓存：异步接口数据优先使用本地 localstorage 中的缓存数据，通过 md5 判断是否需要数据更新
  6. 页面加载策略优化：
    • 网络请求优化：减少网络资源的请求和加载耗时
      • 预加载
      • 开启GZIP
      • 预渲染：可以让浏览器提前加载指定页面的所有资源。
      • 使用 HTTP/2、HTTP/3提升资源请求速度
      • 资源请求合并，减少http请求
      • 合理使用defer，async
    • 首屏加载优化
      • 对页面内容进行分片/分屏加载
      • 懒加载：监听scroll事件；使用IntersectionObserver
      • 首屏只加载需要的资源，对于不需要的资源不加载。
      • 客户端离线包方案
      • 客户端进行预请求和预加载
    • 渲染过程优化：减少用户操作等待时间
      • 按需加载
      • 减少回流和重绘
      • 减少/合并dom操作，减少浏览器的计算损耗
    • 浏览器运算逻辑优化
      • 拆解长任务，避免出现长时间计算导致页面卡顿
      • 提前将计算结果缓存
    • 关键渲染路径优化：关键渲染路径是指浏览器将HTML，CSS，JavaScript转换为屏幕上所呈现的实际像素这期间所经历的一系列步骤。
      • CSS 的 <link> 标签放在 <head></head> 之间
      • <script> 标签放在 </body> 之前
  7. 页面静态化（SSR）
  8. 图片优化：选择合适的图片格式。
  9. HTML代码优化：
    • 精简HTML代码：减少HTML的嵌套；减少DOM节点数；减少无语义代码；删除多余的空格、换行符、缩进等等
    • 文件放在合适位置：CSS 样式文件链接尽量放在页面头部；JS 放在HTML底部
  10. CSS 代码优化：
    • 提升文件加载性能：使用外链的 CSS；尽量避免使用 @import，@import影响css文件的加载速度
    • 精简 CSS 代码：利用CSS继承减少代码量；避免使用复杂的选择器，层级越少越好
  11. 字体文件优化：
    • 使用cdn加载字体文件
    • 开启gzip压缩字体文件
    • 通过font-display来调整加载顺序
    • 字体裁剪，剔除不需要使用到的字体
    • 内联字体
  12. JS 代码优化：
    • 提升 JS 文件加载性能：JS 文件放在body 底部；合并js文件；合理使用defer和async
    • JS 变量和函数优化：尽量使用 id 选择器；尽量避免使用 eval；js 函数尽可能保持整洁；使用节流、防抖函数；使用事件委托
    • JS 动画优化：避免添加大量 js 动画；尽量使用 css3 动画；尽量使用 Canvas 动画；使用 requestAnimationFrame 代替 settimeout 和 setinterval。
  13. webpack 打包优化