2023秋招JS面经(1)
⭐简述JavaScript对象、函数、数组的定义。
对象(Object):JavaScript 的对象是一种复合数据类型,用于存储键值对。对象由一组属性(properties)组成,每个属性都有一个键(key)和对应的值(value)。对象可以通过字面量表示法或构造函数来创建。
函数(Function):JavaScript 是一门函数式编程语言,函数在 JavaScript 中是一等公民。函数是可执行的代码块,可以接收参数并返回一个值。可以通过函数声明或函数表达式的方式定义函数。
数组(Array):JavaScript 数组是一种有序、可变的数据集合,可以存储多个值。数组可以包含不同类型的数据,并且长度是动态的。可以使用字面量表示法或构造函数来创建数组。
⭐前端性能优化
首屏优化
- 压缩、分包(利用浏览器并行的能力加载)、删除无用代码
- 静态资源分离,如放在CDN上面
- JS脚本非阻塞加载(或将其放在最底部,最后加载,以防阻塞页面渲染)
- 合理利用缓存
- 服务器端渲染(SSR)
- 预置loading、骨架屏
渲染优化
- GPU加速,利用GPU来处理复合图层(像素密集型)进行"加速"
- 减少回流、重绘,例如:
- 避免使用CSS表达式,因为当页面变化时,都会进行重新计算
- 不适用table布局,因为该布局中的一个小改动都会引起整个table重新布局,所以现在table布局已经几乎淘汰
- 能使用css就不使用js
- 离屏渲染,正常情况下数据经过计算和渲染后,就会直接显示在屏幕上,而使用离屏渲染,就会在内存将画面全部渲染好,再放在页面上,以防画面过于复杂而使用户感到掉帧
- 懒加载,将需要的资源提前加载到本地,需要时直接从缓存中取出,节约时间。
JS优化
- 防止内存泄露,比如:
- 使用全局变量不当产生的内存泄露
- DOM引用没有及时清除,导致DOM删除后但JS引用依旧存在,占用资源
- 定时器没有及时关闭(所以建议自己封装可以自动关闭的定时器组件)
- 循环语句尽早break
- 合理使用闭包
- 减少DOM访问,因为JS引擎和渲染引擎交互较为费时,如果需要常用,要使用一个变量将其缓存起来,不要每次都去查询获取
- 防抖------多次点击,只执行最后一次
- 节流------一定时间内,多次调用只执行一次
- Web Worker(工作线程),可以将一些耗时的数据处理操作从主线程中剥离出来,使主线程更加专注于页面渲染和交互。
⭐跨浏览器兼容问题
- CSS盒模型差异,可以使用CSS重置或使用标准化库来进行统一各浏览器的默认样式
- JavaScript API兼容性问题,可以通过特性检测来判断当前浏览器是否支持某个API,或使用polyfill库来提供缺失的功能
- flex布局兼容性问题,可以使用grid等布局来作为替代方案
⭐如何保证代码的质量和可维护性
- 模块化,特定的模块负责特定的功能,提高代码的可复用性,降低耦合
- 通过一些设计模式来管理实例,例如单例模式、观察者模式等
- 进行一些单元测试
- 代码复用,提出可复用的函数及组件
- 错误处理,合理处理异常和错误情况
- 使用代码质量检查工具来检查修复代码规范问题,例如ESLint
⭐关于原型链的一些问题
b.n b.m应该为1和undefined
f.b访问不到
⭐关于变量提升和函数提升的问题
js
var c = 1;
function c(c) {
console.log(c)
}
c(2)
详见红宝书P26
js
//函数作⽤域:局部作⽤域
var a = 1;
function b() {
a = 10;
return;
//a函数声明,提前变量a,将a认为是函数b作⽤域的变量,具有局部效果
function a(){}
}b();
console.log(a); // 1
js
var m= 1, j = k = 0;
function add(n) {
return n = n+1;
}
y = add(m);
function add(n) {
return n = n + 3;
}
z = add(m);