最全前端面试集合

Posted 2022-10-25 bingerger

1、请问闭包有那一些的特性

答：闭包有三个特性：

1.函数嵌套函数
2.函数内部可以引用外部的参数和变量
3.参数和变量不会被垃圾回收机制回收

注：闭包（closure）是JS语言的一个难点，也是它的独有的特色，在很多的高级应用都要依靠闭包实现。

 

下载链接：https://www.yinxiangit.com

2、闭包的定义及其优缺点

 

定义: 闭包 当一个函数的返回值是另外一个函数,而返回的那个函数如果调用了其父函数内部的变量,且返回的这个函数在外部被执行，就产生了闭包.闭包是一个环境，具体指的就是外部函数--高阶函数。说白了就是一个环境，能够读取其他函数内部的变量。本质上，闭包是将函数内部和函数外部连接起来的桥梁。

 

用处：1.读取函数内部的变量；

          2.这些变量的值始终保持在内存中，不会在外层函数调用后被自动清除。

 

优点：1:变量长期驻扎在内存中；

 

           2:避免全局变量的污染；

 

           3:私有成员的存在 ；

 

特性：1:函数套函数；

 

           2:内部函数可以直接使用外部函数的局部变量或参数；

 

           3:变量或参数不会被垃圾回收机制回收 GC；

 

缺点:

 

常驻内存 会增大内存的使用量 使用不当会造成内存泄露

 

详解：

（1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

 

（2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

 

 

3、javascript的垃圾回收原理

（1）、在javascript中，如果一个对象不再被引用，那么这个对象就会被GC回收； 
（2）、如果两个对象互相引用，而不再被第3者所引用，那么这两个互相引用的对象也会被回收。

 

 

4、说说tcp传输的三次握手四次挥手策略

 

三次握手 发起 TCP 连接

1. 发送端首先发送一个带SYN标志的数据包给对方。
2. 接收端收到后，回传一个带有SYN/ACK标志的数据包以示传达确认信息。
3. 最后，发送端再回传一个带ACK标志的数据包，代表“握手”结束。
   若在握手过程中某个阶段莫名中断，TCP协议会再次以相同的顺序发送相同的数据包。

四次握手(挥手)     断开一个TCP连接

 

1. 第一次挥手：主动关闭方发送一个FIN，用来关闭主动方到被动关闭方的数据传送，也就是主动关闭方告诉被动关闭方：我已经不 会再给你发数据了(当然，在fin包之前发送出去的数据，如果没有收到对应的ack确认报文，主动关闭方依然会重发这些数据)，但是，此时主动关闭方还可 以接受数据。
2. 第二次挥手：被动关闭方收到FIN包后，发送一个ACK给对方，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号）。
3. 第三次挥手：被动关闭方发送一个FIN，用来关闭被动关闭方到主动关闭方的数据传送，也就是告诉主动关闭方，我的数据也发送完了，不会再给你发数据了。
4. 第四次挥手：主动关闭方收到FIN后，发送一个ACK给被动关闭方，确认序号为收到序号+1，至此，完成四次挥手。

 

5、web性能优化的几种方式

1. JavaScript 压缩和模块打包 

其中之一就是可以得到更快的启动时间 
其中之二是模块打包用于将不同脚本打包在一起并放进同一文件。更少的HTTP请求和单个文件解析都可以减少加载时间。通常情况下，单独一种工具就可以打理打包和压缩。webpack就是其中之一。

2、按需加载资源 
资源（特别是图片）的按需加载或者说惰性加载，可以有助于你的web应用在整体上获得更好的性能。对于使用大量图片的页面来说惰性加载有着显著的三个好处。

减少向服务器发出的并发请求数量（这就使得页面的其他部分获得更快的加载时间）

减少浏览器的内存使用率（更少的图片，更少的内存）

减少服务器端的负载

大体上的理念就是只在必要的时候才去加载图片资源（如视频），比如在第一次被显示的时候，或者是在将要显示的石斛对其进行加载。由于这种方式跟你建站的方式密切相关，惰性加载的解决防范通常需要借助其他库的插件或者扩展来实现。

 
3、缓存 
Caches是用于存储那些被频繁存取的静态数据的组件，便于随后对于这个数据的请求可以更快地被响应，或者说请求方式更加高效。由于web应用是由很多可拆卸的部件组合而成，缓存就可以存在于架构中的很多部分。举例来说，缓存可以被放在动态内容服务器和客户端之间，就可以避免公共请求以减少服务器的负载，与此同时改善响应时间。其他缓存可能被放置在代码里，以优化某些用于脚本存取的通用模式，还有一些缓存kennel被放置在数据库或者是长运行进程之前。

 
4、使用索引加速数据库查询 
如果你需要解决数据库耗费大量时间的问题，是时候找出加速数据库的方法了。每个数据库和数据模型都有自己的权衡。数据库优化在每一方面都是一个主题：数据模型，数据库类型，具体实现方案，等等。提速可能不是那么简单。但是这儿有一个建议，可能可以对某些数据库有所帮助：索引。索引是一个过程，即数据库所创建的快速访问数据结构，从内部映射到键，可以提高检索相关数据的速度。大多数先打数据库都支持索引。索引并不是文档型数据库所独有的，也包括关系型数据库。为了使用索引来优化你的查询，你将需要研究一下应用程序的访问模式：什么是最常见的查询，在哪个键或列中执行搜索，等等。

5、负载均衡 
nginx+tomact 集群，实用化haship负载均衡方案可以避免sesson丢失。 
因为使用负载均衡，上传文件不要直接上传到tomcat目录下，可以通过ftp统一上传到单独的文件服务器

 

6、移动端的性能优化

 

1、加载优化 ，减少HTTP请求数目 ，因为手机浏览器同时响应请求为4个请求（android支持4个，ios 5后可支持6个），所以要尽量减少页面的请求数，首次加载同时请求数不能超过4个。

2、图片优化 压缩图片，图片是最占流量的资源，因此尽量避免使用他，使用时选择最合适的格式（实现需求的前提下，以大小判断），合适的大小，然后使用智图压缩，同时在代码中用Srcset来按需显示。

3、css优化，尽量避免在html标签中使用style属性。( 因为在HTML标签中的style会阻塞页面的渲染 ) ，避免使用CSS表达式。（因为其执行频率很高，当页面滚动或者鼠标移动的时候，就会执行，这会带来很大的性能损耗）

4、js优化，用一个变量保存列表的length的值，避免每次执行的时候到要计算该值。缓存DOM的选择与计算，避免每次Dom选择都要重新计算。

5、GPU加速: CSS中以下属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）来触发GPU渲染，请合理使用。

 

注：过渡使用这些属性，会引发手机过度耗电

 

前端优化 如图：

 

 

CSS相关的问题

7、css 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ css3新增伪类有那些？

1.id选择器（ # myid）  
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = "external"]）
9.伪类选择器（a: hover, li:nth-child）

 优先级为: 

 !important > id > class > tag  important 比 内联优先级高,但内联比 id 要高      

    

 css3新增伪类举例：   

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 
p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 
p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。 
p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。 :enabled  :disabled 控制表单控件的禁用状态。  
:checked        单选框或复选框被选中。

  css3有哪些新特性？ 

css3实现圆角（border-radius），阴影（box-shadow）
css3实现圆角（border-radius），阴影（box-shadow） 
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜增加了更多的css选择器  多背景 rgba  
在css3中唯一引入的伪元素是::selection.  媒体查询，多栏布局  border-image  

css3中新增了一种盒模型计算方式：box-sizing。盒模型默认的值是content-box, 新增的值是padding-box和border-box，几种盒模型计算元素宽高的区别如下：  content-box（默认） 

CSS3 box-sizing的作用

设置CSS盒模型为标准模型或IE模型。标准模型的宽度只包括content，二IE模型包括border和padding

box-sizing属性可以为三个值之一：

1、content-box，默认值，border和padding不计算入width之内

2、padding-box，padding计算入width内

3、border-box，border和padding计算入width之内

 

8、谈谈对前端安全的理解，有什么，怎么防范

前端安全问题主要有XSS、CSRF攻击
XSS：跨站脚本攻击
它允许用户将恶意代码植入到提供给其他用户使用的页面中，可以简单的理解为一种javascript代码注入。
XSS的防御措施：

1、过滤转义输入输出

2、避免使用eval、new Function等执行字符串的方法，除非确定字符串和用户输入无关

3、使用cookie的httpOnly属性，加上了这个属性的cookie字段，js是无法进行读写的

4、使用innerHTML、document.write的时候，如果数据是用户输入的，那么需要对象关键字符进行过滤与转义

CSRF：跨站请求伪造
其实就是网站中的一些提交行为，被黑客利用，在你访问黑客的网站的时候进行操作，会被操作到其他网站上
CSRF防御措施：

1、检测http referer是否是同域名

2、避免登录的session长时间存储在客户端中

3、关键请求使用验证码或者token机制

其他的一些攻击方法还有HTTP劫持、界面操作劫持

 

9、ES6、 let、const

 

let
let是更完美的var

1、let声明的变量拥有块级作用域,let声明仍然保留了提升的特性，但不会盲目提升。

2、let声明的全局变量不是全局对象的属性。不可以通过window.变量名的方式访问

3、形如for (let x…)的循环在每次迭代时都为x创建新的绑定

 

4、let声明的变量直到控制流到达该变量被定义的代码行时才会被装载，所以在到达之前使用该变量会触发错

 

const
定义常量值，不可以重新赋值，但是如果值是一个对象，可以改变对象里的属性值

const OBJ = "a":1, "b":2;OBJ.a = 3;OBJ = ;// 重新赋值，报错！console.log(OBJ.a); // 3

 

10、深拷贝与浅拷贝

 1、深拷贝与浅拷贝是什么：
浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存（内存区域没有隔离）。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存（内存区域隔离），修改新对象不会改到原对象。在多层对象上，浅拷贝只拷贝一层

 

浅拷贝举例：

var Chinese = 　　nation:‘中国‘;var Doctor =　　career:‘工程师‘function extendCopy(p) 　　var c = ;　　for (var i in p)  　　　　c[i] = p[i];　　　　return c;var Doctor = extendCopy(Chinese);Doctor.career = ‘工程师‘;alert(Doctor.nation); // 中国

深拷贝举例：

function deepCopy(p, c) 　 var c = c || ;　 for (var i in p) 　　　　if (typeof p[i] === ‘object‘) 　　　　　　c[i] = (p[i].constructor === Array) ? [] : ;　　　　　　deepCopy(p[i], c[i]);　　　　 else 　　　　　　c[i] = p[i];　　　　　 　 return c;

深拷贝实现方式：

•     手动复制方式，如上面的代码，缺点就是
•     Object.assign，ES6 的新函数，可以帮助我们达成跟上面一样的功能。

• var obj1 =  a: 10, b: 20, c: 30 ;var obj2 = Object.assign(, obj1);obj2.b = 100;console.log(obj1);//  a: 10, b: 20, c: 30  <-- 沒被改到console.log(obj2);//  a: 10, b: 100, c: 30 

转成 JSON 再转回来

用JSON.stringify把对象转成字符串，再用JSON.parse把字符串转成新的对象。缺点：只有可以转成JSON格式的对象才可以这样用，像function没办法转成JSON。

• jquery，有提供一个$.extend可以用来做 Deep Copy。

1. lodash，也有提供_.cloneDeep用来做 Deep Copy。
2. 递归实现深拷贝

function clone( o )     var temp = ;    for( var k in o )         if( typeof o[ k ] == ‘object‘ )             temp[ k ] = clone( o[ k ] );