前端面试题总结（这里不得不总结，我是后台，但是经常有人问我前台的问题，不得不了解一下前台的基础原理知识）

Posted 2020-11-09 huangwentian

1、什么是闭包？闭包有什么好处？

闭包在前端中，原理是一个函数可以访问另外一个函数的作用域，并且不会被gc回收，除非手动关闭页面或者浏览器，又或者直接把对象赋值为null,才会被注销掉。

也可以理解为内部函数可以访问外部函数，而外部函数无法访问内部函数。

好处就显而易见，就是闭包可以作为常驻内存，不会被gc回收，并且访问更快。

2、ajax的实现？

原理：Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。

实现：

1.创建XMLHTTPRequest对象

2.注册回调函数 xhr.onreadystatechange=callback;

3.设置和服务器端的链接信息。xhr.open(http请求方式（get，post）,url,设置异步或同步方式交互（true,false）);

4.发送数据开始交互。xhr.send(null); 

5.接受响应数据。

优缺点：

Ajax的优点：

    1）最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。

　 2）使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。

　 3）把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。

　　Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

    4）基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

Ajax的缺点：

 　1）ajax干掉了back按钮，即对浏览器后退机制的破坏。

    2）安全问题

　　ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。

    3）对搜索引擎的支持比较弱

    4）一些手持设备（如手机、PDA等）现在还不能很好的支持ajax

 

3、cookie 和 storage 的区别

storage 有两种 sessionStorage、localStorage

sessionStorage

sessionStorage用于本地存储一个会话(session)中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

localStorage

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

web storage和cookie的区别

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

4、事件捕获和事件冒泡

他们是描述事件触发时序问题的术语。事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。相反的，事件冒泡是自下而上的去触发事件。绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。默认false,即事件冒泡。Jquery的e.stopPropagation会阻止冒泡，意思就是到我为止，我的爹和祖宗的事件就不要触发了。

这是html结构

<div id="parent">
　　<div id="child" class="child"></div>
</div>

现在我们给它们绑定上事件

            document.getElementById("parent").addEventListener("click",function(e){
                alert("parent事件被触发，"+this.id);
            })
            document.getElementById("child").addEventListener("click",function(e){
                alert("child事件被触发，"+this.id)
            })

 

结果：

child事件被触发，child 
parent事件被触发，parent

结论：先child，然后parent。事件的触发顺序自内向外，这就是事件冒泡。

现在改变第三个参数的值为true

　　　　　　　document.getElementById("parent").addEventListener("click",function(e){
                alert("parent事件被触发，"+e.target.id);
            },true)
            document.getElementById("child").addEventListener("click",function(e){
                alert("child事件被触发，"+e.target.id)
            },true)

结果：

parent事件被触发，parent 
child事件被触发，child

结论：先parent,然后child。事件触发顺序变更为自外向内，这就是事件捕获。

　　　　<ul>
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
            <li>item5</li>
            <li>item6</li>
        </ul>

 

需求是这样的：鼠标放到li上对应的li背景变灰。

利用事件冒泡实现：

　　　　　　　$("ul").on("mouseover",function(e){
                $(e.target).css("background-color","#ddd").siblings().css("background-color","white");
            })

注：e.target是触发事件的元素。

也许有人会说，我们直接给所有li都绑上事件也可以啊，一点也不麻烦，只要……

　　　　　　　$("li").on("mouseover",function(){
                $(this).css("background-color","#ddd").siblings().css("background-color","white");
            })

是，这样也行。而且从代码简洁程度上，两者是相若仿佛的。但是，前者少了一个遍历所有li节点的操作，所以在性能上肯定是更优的。

还有就是，如果我们在绑定事件完成后，页面又动态的加载了一些元素……

$("<li>item7</li>").appendTo("ul");

这时候，第二种方案，由于绑定事件的时候item7还不存在，所以为了效果，我们还要给它再绑定一次事件。而利用冒泡方案由于是给ul绑的事件……

高下立判！

不同的浏览器对事件的处理机制不同 
两种模型 
以前，Netscape和Microsoft是不同的实现方式。 
Netscape中，parent先触发，这就叫做事件捕获。 
Microsoft中，child先触发，这就叫做事件冒泡。 
两种事件处理顺序刚好相反。IE只支持事件冒泡，Chrome,Mozilla, Opera 7 和 Konqueror两种都支持，旧版本的Opera’s 和 iCab两种都不支持 。

W3C模型 
W3C模型是将两者进行中和，在W3C模型中，任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达了事件源元素。然后，再从事件源往上进行事件冒泡，直到到达document。

5、跨域和优化

https://blog.csdn.net/chenshiyang0806/article/details/80435437