web前端常见基础问题汇总

什么是深浅拷贝，以及区别？

深浅拷贝都只针对引用数据类型。浅拷贝只是对某对象指针的复制，新旧对象还是共享一个内存。而深拷贝是会另外创造一个新的一模一样的对象，新旧对象并不共享一个内存。修改新对象也不对影响到旧的对象。
区别在于浅拷贝只复制对象的第一层属性，而深拷贝会进行对对象的属性进行递归复制。

什么是作用域，和作用域链？

在一定的空间内对变量的读写，这个空间就是数据的作用域。
由子级作用域链返回到父级作用域中寻找变量，这一层层的关系就叫做作用域链。

值类型，引用类型有哪些？

值类型: undefined,number,string,boolean.
引用类型： function,array,object,null, new Number(10)

什么是原型，原型链？

原型：
①所有引用类型都有一个__proto__(隐式原型)属性，属性值是一个普通的对象
②所有函数都有一个prototype(原型)属性，属性值是一个普通的对象
③所有引用类型的__proto__属性指向它构造函数的prototype
原型链：
当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的__proto__隐式原型上查找，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的__proto__中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链

什么是闭包，有什么作用、缺点

当内部函数想访问外部函数的变量的时候，就会形成闭包。
作用： 可以访问到其他函数内的变量，可以将变量保存至内存中。
缺点：由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

输入Url到页面的加载完成中间发生了什么？

用户写入URL并按下回车，浏览器会查找当前URL是否有缓存。DNS解析URL到对应的IP地址。根据IP建立TCP连接（三次握手），发起http请求，服务器处理请求返回html文件，之后浏览器加载html文件、构建dom 树和cssom树、构建布局render树、绘制render树。

什么是回流？重绘？

重绘：当渲染树中的元素外观（如：颜色）发生改变，不影响布局时，产生重绘
回流：当渲染树中的元素的布局（如：尺寸、位置、隐藏/状态状态）发生改变时，产生重绘回流
注意：JS 获取 Layout 属性值（如：offsetLeft、scrollTop、getComputedStyle 等）也会引起回流。因为浏览器需要通过回流计算最新值
区别：回流必定会引起重绘，重绘不一定触发回流

什么是跨域？如何解决？

跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制
同源政策：是指协议，域名，端口，都要相同，其中有任何一个不同都会产生跨域的问题。
解决办法：前端使用jsonp的请求方式，使用请求代理，CORS

什么是节流和防抖？

防抖：触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间
节流：高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率。

描述一下冒泡机制？

就是事件从目标开始，往上冒泡直到页面的最上一级标签，也就是当一个元素被触发，同样的事件也会在该元素的所有祖先元素中从内向外一次触发。

什么是事件委托？

因为事件的冒机制可以自己所触发的事件交由父元素去代替执行

什么是前端路由？

Web 前端单页应用 SPA(Single Page Application)中，路由描述的是 URL 与 UI 之间的映射关系，这种映射是单向的，即 URL 变化引起 UI 更新（无需刷新页面）
hash 实现
hash 是 URL 中 hash (#) 及后面的那部分，常用作锚点在页面内进行导航，改变 URL 中的 hash 部分不会引起页面刷新
通过 hashchange 事件监听 URL 的变化，改变 URL 的方式只有这几种：通过浏览器前进后退改变 URL、通过a标签改变 URL、通过window.location改变URL，这几种情况改变 URL 都会触发 hashchange 事件
history 实现
history 提供了 pushState 和 replaceState 两个方法，这两个方法改变 URL 的 path 部分不会引起页面刷新
history 提供类似 hashchange 事件的 popstate 事件，但 popstate 事件有些不同：通过浏览器前进后退改变 URL 时会触发 popstate 事件，通过pushState/replaceState或a标签改变 URL 不会触发 popstate 事件。好在我们可以拦截 pushState/replaceState的调用和a标签的点击事件来检测 URL 变化，所以监听 URL 变化可以实现，只是没有hashchange那么方便

请描述一下cookies, sessionStorage和localStorage的区别?

cookie是网站为了标识用户身份而存储在用户本地终端上的数据
cookie数据始终在同源的http请求中携带（即使不需要），即会在浏览器和服务器之间来回传递
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
存储大小：
cookie数据大小不能超过4k
sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大的多，可以达到5M或更多
有效期（生命周期）：
localStorage：存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage：数据再当前浏览器窗口关闭后自动删除
Cookie：设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭

介绍JS有哪些内置对象？

数据封装类对象： Object、Array、Boolean、Number、String
其他对象： Function、Argument、Math、date、RegExp、Error
ES6新增对象：Symbol、Map、Set、Promises、Proxy、Reflect

描述浏览器的渲染过程，DOM树和渲染树的区别

浏览器的渲染过程：
解析 HTML 构建 DOM(DOM 树)，并行请求 css/image/js
CSS 文件下载完成，开始构建 CSSOM(CSS 树)
CSSOM 构建结束后，和 DOM 一起生成 Render Tree(渲染树)
布局(Layout)：计算出每个节点在屏幕中的位置
显示(Painting)：通过显卡把页面画到屏幕上
DOM 树 和 渲染树 的区别：
DOM 树与 HTML 标签一一对应，包括 head 和隐藏元素
渲染树不包括 head 和隐藏元素，大段文本的每一个行都是独立节点，每一个节点都有对应的 css 属性

Script的位置是否会影响首屏显示时间

在解析 HTML 生成 DOM 过程中，js 文件的下载是并行的，不需要 DOM 处理到 script 节点。因此，script 的位置不影响首屏显示的开始时间。
浏览器解析 HTML 是自上而下的线性过程，script 作为 HTML 的一部分同样遵循这个原则
因此，script 会延迟 DomContentLoad，只显示其上部分首屏内容，从而影响首屏显示的完成时间

var 和let/const的区别

var是可以挂载在window上，可以重复定义变量，并且存在变量的提升。var只有全局作用域和函数作用域的概念。
let 只有块级作用域的概念，并且不可以重复定义变量。
let 在变量声明之前就访问变量的话，会直接提示 ReferenceError，而不像 var 那样使用默认值 undefined.。
因为let在当前作用域顶部到该变量声明位置中间的部分，都是该let变量的死区，在死区中，禁止访问该变量。由此，我们给出结论，let声明的变量存在变量提升， 但是由于死区我们无法在声明前访问这个变量。
const 和let作用域以及变量的声明都是一直的。const通常用于定义一个常量。const所定义的变量，这个变量的值是不可进行修改的。因为const的值指向的是变量所指向的那个内存地址。

技术只有相互学习才会有进步，若有写的不对尽管指出