> For the complete documentation index, see [llms.txt](https://yyaozhibo.gitbook.io/qian-duan-xue-xi/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yyaozhibo.gitbook.io/qian-duan-xue-xi/interview/js-ji-chu.md). # 一些前端基础 ## JavaScript基础 ### 1、声明提升类问题 （考察频率：高） 变量声明和函数声明都会提升，但函数会提升到变量前。 具体解释可参考《你不知道的JavaScript（上卷）》 ### 2、js存储方式（考察频率：中） * cookie * sessionStorage * localStorage * indexedDB ### 3、什么情况下会遇到跨域，怎么解决？（考察频率：高） * 同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。若地址里面的协议、域名和端口号均相同则属于同源。 * jsonp跨域、nginx反向代理、node.js中间件代理跨域、后端设置http header、后端在服务器上设置cors。 ### 4、Promise中的执行顺序（考察频率：高） [参考阮一峰老师书中的例子](http://es6.ruanyifeng.com/?search=%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0\&x=0\&y=0#docs/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](https://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、闭包的作用（考察频率：中） 闭包的目的是外部函数可以访问内部函数的作用域（局部作用域）。比如访问到内部作用域的变量。 函数与对其状态即**词法环境**（**lexical environment**）的引用共同构成**闭包**（**closure**）。也就是说，闭包可以让你从内部函数访问外部函数作用域。在JavaScript，函数在每次创建时生成闭包。 ```javascript function init() { var name = "Mozilla"; // name 是一个被 init 创建的局部变量 function displayName() { // displayName() 是内部函数,一个闭包 alert(name); // 使用了父函数中声明的变量 } displayName(); } init(); ``` `init()` 创建了一个局部变量 `name` 和一个名为 `displayName()` 的函数。`displayName()` 是定义在 `init()` 里的内部函数，仅在该函数体内可被获取。请注意，`displayName()` 内没有自己的局部变量，然而它可以访问到外部函数的变量，所以 `displayName()` 可以使用父函数 `init()` 中声明的变量 `name` 。 :grin: ### 8、原型及原型链（考察频率：中） > 参考小册《Web 前端面试指南与高频考题解析》 原型的理解 * 所有的引用类型（数组、对象、函数），都具有对象特性，即可自由扩展属性（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）中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。 * 回流要比重绘消耗性能开支更大。 * 回流必将引起重绘，重绘不一定会引起回流。 * 参考：[juejin.im/post/5a9923…](https://juejin.im/post/5a9923e9518825558251c96a) ### 10、实现一个深拷贝（思路）（考察频率：中） 对象中可能又存在对象，所以需要深拷贝。首先需要知道这是一个递归调用，然后要判断一些特殊类型（数组，正则对象，函数）进行具体的操作，可以通过Object.prototype.toString.call(obj)进行判断。 * 参考：[juejin.im/post/5abb55…](https://juejin.im/post/5abb55ee6fb9a028e33b7e0a) ### 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。所以在进行算术计算时会产生误差。\ 参考：[blog.csdn.net/helloxiaoli…](https://blog.csdn.net/helloxiaoliang/article/details/72723387) ## 浏览器相关 ### 12、浏览器从加载到渲染的过程，比如输入一个网址到显示页面的过程。 （考察频率:高） 加载过程： * 浏览器根据 DNS 服务器解析得到域名的 IP 地址 * 向这个 IP 的机器发送 HTTP 请求 * 服务器收到、处理并返回 HTTP 请求 * 浏览器得到返回内容 渲染过程： * 根据 HTML 结构生成 DOM 树 * 根据 CSS 生成 CSSOM * 将 DOM 和 CSSOM 整合形成 RenderTree * 根据 RenderTree 开始渲染和展示 * 遇到\