前端面试总结之长沙四

最新推荐文章于 2023-08-09 16:25:41 发布

zz888888888

最新推荐文章于 2023-08-09 16:25:41 发布

阅读量108

点赞数

分类专栏：面试文章标签：前端面试

本文链接：https://blog.csdn.net/qq_59737146/article/details/126312249

版权

面试专栏收录该内容

22 篇文章 0 订阅

订阅专栏

打开浏览器，会启动几个进程

浏览器是多进程的，拿Chrome来说，每打开一个Tab页就会产生一个进程，使用Chrome打开很多标签页不关，电脑会越来越卡，这是因为消耗了其CPU的缘故。

浏览器包含哪些进程：

Chorme浏览器从关闭到启动，然后新开一个页面至少需要：1个浏览器进程，1个GPU进程，1个网络进程，和1个渲染进程，一共4个进程。

后续如果再打开新的标签页：浏览器进程，GPU进程，网络进程是共享的，不会重新启动，然后默认情况下会为每一个标签页配置一个渲染进程，但是也有例外，比如从A页面里面打开一个新的页面B页面，而A页面和B页面又属于同一站点的话，A和B就共用一个渲染进程，其他情况就为B创建一个新的渲染进程

所以，最新的Chrome浏览器包括：1个浏览器主进程，1个GPU进程，1个网络进程，多个渲染进程，和多个插件进程

参考来自 https://www.csdn.net/tags/NtTakg2sMTQ0NTUtYmxvZwO0O0OO0O0O.html

什么是闭包？闭包的使用场景

闭包：

一个函数的作用域可以访问到另一个函数的局部变量，这个变量所在的函数就是闭包函数

闭包使得内部函数可以访问到函数的属性（变量和方法）

在JavaScript中，每当创建一个函数，闭包就会在函数创建的同时被创建出来

闭包的作用

作用：延伸变量的作用范围。
变量不会销毁（核心作用）
变量什么时候不会销毁：变量被引用并且有内存
闭包的缺点：不正确使用会造成内存泄漏（栈溢出）

闭包的形成条件

函数嵌套
将内部函数作为返回值返回
内部函数必须使用到外部的变量

使用场景

函数作为参数被传递
函数作为返回值被返回
缓存

......... 具体参考 https://www.jb51.net/article/203104.htm

eg：封装功能时（需要用私有属性和方法），函数防抖动、函数节流，单例模式

闭包的优缺点

优点：

变量长期驻扎在内存中
另一个就是可以重复使用变量，并且不会造成变量污染
1. 全局变量可以重复使用，但是容易造成变量污染。不同的地方定义了相同的全局变量，这样就会造成混乱。
2. 局部变量仅在局部作用域中有效，不可以重复使用，不会造成变量污染。
3. 闭包结合了全局变量和局部变量的优点。可以重复使用变量，并且不会造成变量的污染。

缺点：

由于闭包会使得函数中变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄漏。

解决方法是在退出函数之前，将不再使用的局部变量全部删除。

getElement与querySelect区别

1.通过querySelector是静态获取的，而是用getElementsByClassName是动态获取，也就是说每一次使用都会去对dom节点调用一次。

var ul = document.getElementById('ul');
var lits = ul.getElementsByTagName('li')
for(var i = 0; i < lits.length; i++){
    ul.appendChild(document.createElement('li'))
}

其中上述代码会无限循环造成卡死，原因是因为每一次for循环中，在ul内增加了新一条的li，下次的for循环length都会因为动态的dom查询而自增1，导致无限循环。

var ul = document.querySelector('#ul')
var lis = ul.querySelectorAll('#ul li')
for(var i = 0; i < lis.length; i ++){
    ul.appendChild(document.createElement('li'))
}

这段代码不会造成卡死，因为是静态获取，lis的长度一直会维持在3这个数字，最终出来的是六个li。

2.除了动态获取和静态获取，获取的节点也不同

       let inpt = document.querySelector(".inpt")
       let inpt1 = document.getElementsByClassName("inpt")
       console.log(inpt);
       console.log(inpt1);

获取input框的结果如下

通过动态获取的dom节点需要在 input1后面加个 [0]

       let inpt = document.querySelector(".inpt")
       let inpt1 = document.getElementsByClassName("inpt")
       console.log(inpt);
       console.log(inpt1);
       console.log(inpt1[0]);

结果输入如下图

下面的一番话懂得自然懂好吧，记得留下你的评论和点赞。

它们两个的区别不大，都是要通过dom去获取原生节点，一个得到的是动态的集合，一个得到的集合是静态的，一个每使用一次都要去dom节点中调用一次，另一个获取一次之后得到的是一个死值，如果说他们两个非要有什么业务逻辑上的区别的话，一个再使用添加节点的时候会因为使用循环而导致无限的死循环，另一个使用节点方式添加的时候则不会。
原文链接：最好理解的getElement与querySelect区别_剑非出我心的博客-CSDN博客_getelement和queryselector

map里面return false能阻止遍历吗？

不能，具体参考 array.map循环，使用return或者break都不能退出循环_流浪码农~的博客-CSDN博客_退出map循环

symbol什么属性

参考 6、Symbol和Symbol属性 - 深入理解 ES6 读书笔记 - 开发文档 - 文江博客

hash路由和history路由的区别

单页应用是在移动互联时代诞生的，它的目标是不刷新浏览器，而通过感知地址栏中的变化来决定内容区域显示什么内容。要达成这个目标，我们要用到前端路由技术，具体来说有两种方式来实现：hash模式和history模式。

不同之处有三点。

1.原理不同。
hash模式的实现原理是通过监听hashChange事件来实现的。history模式是通过调用 history.pushState方法(或者replaceState) 并且监听popstate事件来实现的。history.pushState会追加历史记录，并更换地址栏地址信息，但是页面不会刷新，需要手动调用地址变化之后的处理函数，并在处理函数内部决定跳转逻辑；监听popstate事件是为了响应浏览器的前进后退功能。

2.表现不同。
hash模式会在地址栏中有#号，而history模式没有；同时由于history模式的实现原理用到H5的新特性，所以它对浏览器的兼容性有要求(IE >= 10)。

3.history模式特点
history模式开发的SPA项目，需要服务器端做额外的配置，否则会出现刷新白屏（链接分享失效）。原因是页面刷新时，浏览器会向服务器真的发出对这个地址的请求，而这个文件资源又不存在，所以就报404。处理方式就由后端做一个保底映射:所有的请求全部拦截到index.html上。

总结
单页应用是在移动互联时代诞生的，它的目标是不刷新整体页面，通过地址栏中的变化来决定内容区域显示什么内容。要达成这个目标，我们要用到前端路由技术，具体来说有两种方式来实现：hash模式和history模式。hash模式是通过监听hashChange事件来实现的，history模式是通过pushState方法+popstate事件来实现的。

原文链接：hash路由和history路由的区别_前端小刘~的博客-CSDN博客_hash路由和history的区别