每日一篇——23秋招JS面经(1)

2023秋招JS面经(1)

⭐简述JavaScript对象、函数、数组的定义。

对象(Object):JavaScript 的对象是一种复合数据类型,用于存储键值对。对象由一组属性(properties)组成,每个属性都有一个键(key)和对应的值(value)。对象可以通过字面量表示法或构造函数来创建。

函数(Function):JavaScript 是一门函数式编程语言,函数在 JavaScript 中是一等公民。函数是可执行的代码块,可以接收参数并返回一个值。可以通过函数声明或函数表达式的方式定义函数。

数组(Array):JavaScript 数组是一种有序、可变的数据集合,可以存储多个值。数组可以包含不同类型的数据,并且长度是动态的。可以使用字面量表示法或构造函数来创建数组。

⭐前端性能优化

首屏优化

  1. 压缩、分包(利用浏览器并行的能力加载)、删除无用代码
  2. 静态资源分离,如放在CDN上面
  3. JS脚本非阻塞加载(或将其放在最底部,最后加载,以防阻塞页面渲染)
  4. 合理利用缓存
  5. 服务器端渲染(SSR)
  6. 预置loading、骨架屏

渲染优化

  1. GPU加速,利用GPU来处理复合图层(像素密集型)进行"加速"
  2. 减少回流、重绘,例如:
    1. 避免使用CSS表达式,因为当页面变化时,都会进行重新计算
    2. 不适用table布局,因为该布局中的一个小改动都会引起整个table重新布局,所以现在table布局已经几乎淘汰
    3. 能使用css就不使用js
  3. 离屏渲染,正常情况下数据经过计算和渲染后,就会直接显示在屏幕上,而使用离屏渲染,就会在内存将画面全部渲染好,再放在页面上,以防画面过于复杂而使用户感到掉帧
  4. 懒加载,将需要的资源提前加载到本地,需要时直接从缓存中取出,节约时间。

JS优化

  1. 防止内存泄露,比如:
    1. 使用全局变量不当产生的内存泄露
    2. DOM引用没有及时清除,导致DOM删除后但JS引用依旧存在,占用资源
    3. 定时器没有及时关闭(所以建议自己封装可以自动关闭的定时器组件)
  2. 循环语句尽早break
  3. 合理使用闭包
  4. 减少DOM访问,因为JS引擎和渲染引擎交互较为费时,如果需要常用,要使用一个变量将其缓存起来,不要每次都去查询获取
  5. 防抖------多次点击,只执行最后一次
  6. 节流------一定时间内,多次调用只执行一次
  7. Web Worker(工作线程),可以将一些耗时的数据处理操作从主线程中剥离出来,使主线程更加专注于页面渲染和交互。

⭐跨浏览器兼容问题

  1. CSS盒模型差异,可以使用CSS重置或使用标准化库来进行统一各浏览器的默认样式
  2. JavaScript API兼容性问题,可以通过特性检测来判断当前浏览器是否支持某个API,或使用polyfill库来提供缺失的功能
  3. flex布局兼容性问题,可以使用grid等布局来作为替代方案

⭐如何保证代码的质量和可维护性

  1. 模块化,特定的模块负责特定的功能,提高代码的可复用性,降低耦合
  2. 通过一些设计模式来管理实例,例如单例模式、观察者模式等
  3. 进行一些单元测试
  4. 代码复用,提出可复用的函数及组件
  5. 错误处理,合理处理异常和错误情况
  6. 使用代码质量检查工具来检查修复代码规范问题,例如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);  
相关推荐
崔庆才丨静觅7 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60617 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了7 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅7 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅8 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
崔庆才丨静觅8 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment8 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅9 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端
剪刀石头布啊9 小时前
jwt介绍
前端