最全前端面试集合

Posted bingerger

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了最全前端面试集合相关的知识,希望对你有一定的参考价值。

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、避免使用evalnew Function等执行字符串的方法,除非确定字符串和用户输入无关

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

4、使用innerHTMLdocument.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 ] );    

以上是关于最全前端面试集合的主要内容,如果未能解决你的问题,请参考以下文章

最全前端面试集合

最全前端面试集合

目前最全的前端开发面试题及答案

最全前端面试题

最全前端面试题

来自大厂 300+ 道前端面试题大全附答案(整理版)+前端常见算法面试题~~最全面详细