中高级前端大厂面试秘籍，为你保驾护航金三银四，直通大厂(8)

css

• 避免使用table布局
• 将动画效果应用到position属性为absolute或fixed的元素上

6. 存储

我们经常需要对业务中的一些数据进行存储，通常可以分为 短暂性存储 和 持久性储存。

• 短暂性的时候，我们只需要将数据存在内存中，只在运行时可用

• 持久性存储，可以分为 浏览器端 与 服务器端

  • 浏览器:

    • cookie: 通常用于存储用户身份，登录状态等

      • http 中自动携带， 体积上限为 4K， 可自行设置过期时间
    • localStorage / sessionStorage: 长久储存/窗口关闭删除， 体积限制为 4~5M
    • indexDB

  • 服务器:

    • 分布式缓存 redis
    • 数据库

7. Web Worker

现代浏览器为JavaScript创造的 多线程环境。可以新建并将部分任务分配到worker线程并行运行，两个线程可 独立运行，互不干扰，可通过自带的 消息机制 相互通信。

基本用法:

// 创建 worker 
const worker = new Worker('work.js'); 
 
// 向主进程推送消息 
worker.postMessage('Hello World'); 
 
// 监听主进程来的消息 
worker.onmessage = function (event) { 
  console.log('Received message ' + event.data); 
} 

限制:

• 同源限制
• 无法使用 document / window / alert / confirm
• 无法加载本地资源

8. V8垃圾回收机制

垃圾回收: 将内存中不再使用的数据进行清理，释放出内存空间。V8 将内存分成 新生代空间 和 老生代空间。

• 新生代空间: 用于存活较短的对象

  • 又分成两个空间: from 空间 与 to 空间

  • Scavenge GC算法: 当 from 空间被占满时，启动 GC 算法

    • 存活的对象从 from space 转移到 to space
    • 清空 from space
    • from space 与 to space 互换
    • 完成一次新生代GC

• 老生代空间: 用于存活时间较长的对象

  • 从 新生代空间 转移到 老生代空间 的条件

    • 经历过一次以上 Scavenge GC 的对象
    • 当 to space 体积超过25%

  • 标记清除算法: 标记存活的对象，未被标记的则被释放

    • 增量标记: 小模块标记，在代码执行间隙执，GC 会影响性能
    • 并发标记(最新技术): 不阻塞 js 执行
  • 压缩算法: 将内存中清除后导致的碎片化对象往内存堆的一端移动，解决 内存的碎片化

9. 内存泄露

• 意外的全局变量: 无法被回收
• 定时器: 未被正确关闭，导致所引用的外部变量无法被释放
• 事件监听: 没有正确销毁 (低版本浏览器可能出现)
• 闭包: 会导致父级中的变量无法被释放
• dom 引用: dom 元素被删除时，内存中的引用未被正确清空

可用 chrome 中的 timeline 进行内存标记，可视化查看内存的变化情况，找出异常点。

服务端与网络

1. http/https 协议

• 1.0 协议缺陷:

  • 无法复用链接，完成即断开，重新慢启动和 TCP 3次握手
  • head of line blocking: 线头阻塞，导致请求之间互相影响

• 1.1 改进:

  • 长连接(默认 keep-alive)，复用
  • host 字段指定对应的虚拟站点

  • 新增功能:

    • 断点续传
    • 身份认证
    • 状态管理

    • （编辑：ASP站长网）