- 考察频率指相关问题的考察频率，并非只是提到的点。
JavaScript基础
1、声明提升类问题 （考察频率：高）
变量声明和函数声明都会提升，但函数会提升到变量前。 具体解释可参考《你不知道的JavaScript（上卷）》
2、js存储方式（考察频率：中）
-
cookie
-
sessionStorage
-
localStorage
-
indexedDB
3、什么情况下会遇到跨域，怎么解决？（考察频率：高）
-
同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。若地址里面的协议、域名和端口号均相同则属于同源。
-
jsonp跨域、nginx反向代理、node.js中间件代理跨域、后端设置http header、后端在服务器上设置cors。
4、Promise中的执行顺序（考察频率：高）
let promise = new Promise(function(resolve, reject) {
console.log(‘Promise’);
resolve();
});
promise.then(function() {
console.log(‘resolved.’);
});
console.log(‘Hi!’);
// Promise
// Hi!
// resolved
上面代码中，Promise 新建后立即执行，所以首先输出的是Promise。然后，then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行，所以resolved最后输出。
5、JavaScript事件循环机制相关问题（考察频率：高）
- 事件循环机制的概念
关键字：单线程非阻塞、执行栈、事件队列、宏任务(setTimeout()、setInterval())、微任务(new Promise())
可参考： zhuanlan.zhihu.com/p/33058983
- 宏任务、微任务、同步任务的执行顺序
setTimeout(function () {
console.log(1);
});
new Promise(function(resolve,reject){
console.log(2)
resolve(3)
}).then(function(val){
console.log(val);
})
console.log(4);
// 2
// 4
// 3
// 1
先按顺序执行同步任务，Promise新建后立即执行输出2，接着输出4，异步任务等同步任务执行完后执行，且同一次事件循环中，微任务永远在宏任务之前执行。这时候执行栈空了，执行事件队列，先取出微任务，输出3，最后取出一个宏任务，输出1。
6、for循环中的作用域问题（考察频率：高）
写出以下代码输出值，尝试用es5和es6的方式进行改进输出循环中的i值。
for (var i=1; i<=5; i++) {
setTimeout(function timer() {
console.log(i);
}, i*1000);
}
-
输出5个6，因为回调函数在for循环之后执行，所有函数共享一个i的引用。
-
es5:
for (var i=1; i<=5; i++) {
(function(j) {
setTimeout(function timer() {
console.log(j);
}, j*1000);
})(i);
}
- es6:
for (let i=1; i<=5; i++) {
setTimeout(function timer() {
console.log(i);
}, i*1000);
}
7、闭包的作用（考察频率：中）
闭包的目的是外部函数可以访问内部函数的作用域（局部作用域）。比如访问到内部作用域的变量。
8、原型及原型链（考察频率：中）
原型的理解
-
所有的引用类型（数组、对象、函数），都具有对象特性，即可自由扩展属性（null除外）
-
所有的引用类型（数组、对象、函数），都有一个__proto__属性，属性值是一个普通的对象
-
所有的函数，都有一个prototype属性，属性值也是一个普通的对象
-
所有的引用类型（数组、对象、函数），__proto__属性值指向它的构造函数的prototype属性值
原型链的理解
一段代码如下：
// 构造函数
function Foo(name, age) {
this.name = name
}
Foo.prototype.alertName = function () {
alert(this.name)
}
// 创建示例
var f = new Foo(‘zhangsan’)
f.printName = function () {
console.log(this.name)
}
// 测试
f.printName()
f.alertName()
f.toString()
因为f本身没有toString()，并且f.proto（即Foo.prototype）中也没有toString。当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的__proto__（即它的构造函数的prototype）中寻找。
如果在f.__proto__中没有找到toString，那么就继续去f.proto.__proto__中寻找，因为f.__proto__就是一个普通的对象而已嘛！
f.__proto__即Foo.prototype，没有找到toString，继续往上找 f.proto.__proto__即Foo.prototype.proto。Foo.prototype就是一个普通的对象，因此Foo.prototype.__proto__就是Object.prototype，在这里可以找到toString。 因此f.toString最终对应到了Object.prototype.toString 这样一直往上找，你会发现是一个链式的结构，所以叫做“原型链”。如果一直找到最上层都没有找到，那么就宣告失败，返回undefined。最上层是什么 —— Object.prototype.proto === null
9、重绘和回流（考察频率：中）
-
重绘：当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。
-
回流：当Render Tree（DOM）中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。
-
回流要比重绘消耗性能开支更大。
-
回流必将引起重绘，重绘不一定会引起回流。
10、实现一个深拷贝（思路）（考察频率：中）
对象中可能又存在对象，所以需要深拷贝。首先需要知道这是一个递归调用，然后要判断一些特殊类型（数组，正则对象，函数）进行具体的操作，可以通过Object.prototype.toString.call(obj)进行判断。
11、js浮点数运算精度问题（0.1+0.2!==0.3）
比如在 JavaScript 中计算 0.1 + 0.2时，到底发生了什么呢？
首先，十进制的0.1和0.2都会被转换成二进制，但由于浮点数用二进制表达时是无穷的，例如。
JavaScript 代码:
0.1 -> 0.0001100110011001…(无限)
0.2 -> 0.0011001100110011…(无限)
IEEE 754 标准的 64 位双精度浮点数的小数部分最多支持 53 位二进制位，所以两者相加之后得到二进制为：
JavaScript 代码: 0.0100110011001100110011001100110011001100110011001100
因浮点数小数位的限制而截断的二进制数字，再转换为十进制，就成了 0.30000000000000004。所以在进行算术计算时会产生误差。
浏览器相关
12、浏览器从加载到渲染的过程，比如输入一个网址到显示页面的过程。 （考察频率:高）
加载过程：
-
浏览器根据 DNS 服务器解析得到域名的 IP 地址
-
向这个 IP 的机器发送 HTTP 请求
-
服务器收到、处理并返回 HTTP 请求
-
浏览器得到返回内容
渲染过程：
-
根据 HTML 结构生成 DOM 树
-
根据 CSS 生成 CSSOM
-
将 DOM 和 CSSOM 整合形成 RenderTree
-
根据 RenderTree 开始渲染和展示
-
遇到
13、浏览器缓存机制（策略）（考察频率：中）
14、性能优化（考察频率：中）
优化的方向有两个：
- 减少页面体积，提升网络加载
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新
如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
最后
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。
CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
一个人可以走的很快，但一群人才能走的更远。如果你从事以下工作或对以下感兴趣，欢迎戳这里加入程序员的圈子，让我们一起学习成长！
AI人工智能、Android移动开发、AIGC大模型、C C#、Go语言、Java、Linux运维、云计算、MySQL、PMP、网络安全、Python爬虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算
有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。
CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
一个人可以走的很快，但一群人才能走的更远。如果你从事以下工作或对以下感兴趣，欢迎戳这里加入程序员的圈子，让我们一起学习成长！
AI人工智能、Android移动开发、AIGC大模型、C C#、Go语言、Java、Linux运维、云计算、MySQL、PMP、网络安全、Python爬虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算
3820
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
