每日一篇——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);  
相关推荐
秦jh_7 分钟前
【Linux】多线程(概念,控制)
linux·运维·前端
蜗牛快跑21319 分钟前
面向对象编程 vs 函数式编程
前端·函数式编程·面向对象编程
Dread_lxy20 分钟前
vue 依赖注入(Provide、Inject )和混入(mixins)
前端·javascript·vue.js
涔溪1 小时前
Ecmascript(ES)标准
前端·elasticsearch·ecmascript
用户3157476081351 小时前
成为程序员的必经之路” Git “,你学会了吗?
面试·github·全栈
榴莲千丞1 小时前
第8章利用CSS制作导航菜单
前端·css
奔跑草-1 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript
羡与1 小时前
echarts-gl 3D柱状图配置
前端·javascript·echarts
guokanglun2 小时前
CSS样式实现3D效果
前端·css·3d
咔咔库奇2 小时前
ES6进阶知识一
前端·ecmascript·es6