垃圾回收机制

发表于 2021-12-13 更新于 2024-06-27 分类于面试，浏览器

所谓垃圾回收机制, 就是浏览器回收内存的方案. 在浏览器发展历程中充当了主流 GC 的方案主要有: 引用计数法和标记清除法

引用计数法

比较初级的垃圾回收方案, 目前几乎已经被完全淘汰. 在引用计数法的机制下, 内存中每个值都会对应一个引用计数. 当垃圾回收器感受到某个值的引用计数已经为 0 时, 就判定为该变量已经是无用的变量了. 对应的内存就会被释放掉.

阅读全文 »

谈谈你对闭包的理解

发表于 2021-12-13 更新于 2024-06-27 分类于面试， JavaScript

作用域的实现机制

编程语言的基础能力就是能够定义变量并存储其值, 并且允许程序员对于变量的值进行访问和修改. 变量定义, 访问和修改的规则就是我们常说的作用域实现规则…

阅读全文 »

伪类 or 伪元素

发表于 2021-12-12 更新于 2024-06-27 分类于面试， css

伪类

伪类就是用来选择 DOM 树之外的信息, 以及不能够被普通选择器选择的元素并进一步为之添加选择器的特殊效果的选择器. 常见伪类选择器有: hover, active, visited, first-child 等等. 由于元素的状态是动态变化而非静态的.所以元素达到特定的状态时, 他可以命中一个伪类选择器. 当特定状态消失后便不再能够匹配到该伪类. 对应的样式也会消失. 看上去其功能和 class 类似. 但是他又是文档之外的抽象, 在 html 文档中并没有 class 指明.所以叫伪类

阅读全文 »

Link 标签和 a 标签有啥区别

发表于 2021-12-12 更新于 2024-06-27 分类于面试， html

相同点

渲染结果相同, 两者渲染的结果都是 a 标签
实现功能相同, 都能够实现页面的跳转

不同点

Link 标签的跳转只会触发与之相匹配的 Route 对应的页面内容更新. 不会触发整页的刷新, 而 a 标签的跳转会刷新整个页面
Link 标签一般需要配合 Route 使用, a 标签可以随意添加

Link 标签实际上是禁用了 a 标签原有的跳转能力之后自行实现的跳转

[...document.getElementsByTagName('a')].forEach(a => {
    a.onclick = e => {
        // 阻止默认跳转事件
        e.preventDefault()
        location.href = this.href
    }
})

sourcemap 是什么有何作用

发表于 2021-12-12 更新于 2024-06-27 分类于面试， webpack

概念

source map 是将编译, 打包, 压缩后的文件映射回源代码的工具. 由于打包压缩后的代码可读性不足, 于是在开发生产过程中就需要通过 source map 定位到源代码并调试.

常用方案

生产环境使用 source map 的方式主要有以下几种:

hidden-source-map: 借助第三方监控平台 Sentry 使用
nosource-source-map: 只会展示具体的行数以及源代码的错误栈, 相对于 source-map 更安全
source-map: 生成完整的 source-map, 并且通过 nginx 配置只有公司内网可以访问, 其他环境直接 deny

PS: map 文件只要用户不打开浏览器的控制台, 浏览器是不会主动加载
PS: 生产环境下不要启用 inline- 族和 eval- 族的 source-map 配置. 因为这会大大正价 bundle 包的大小, 降低页面加载的性能…