前端开发面试题

JS面试题

1.介绍js的基本数据类型、引用类型、特殊类型

**基本数据类型**：String、Number、Boolean、undefined、null (es6新增Symbol)

**引用类型**： function、Object

**特殊类型**：undefined、null

2.原型链是什么 ?
每个对象都有一个prototype（原型），当访问一个对象属性时，如果不存在，那么它就会去prototype里找到这个属性，这个prototype又会有自己的protoType，于是就一直找下去，形成原型链。

3.JavaScript 如何实现继承？

(1)构造继承
(2)原型继承
(3)实例继承
(4)拷贝继承

4.null 和 undefined 有何区别？

null表示“无”的空值，转换数值为NAN；
undefined :是一个表示"无"的原始值,转换数值为0

5.Ajax 是什么？如何创建一个 Ajax ？

Ajax是异步；

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
(3)设置响应HTTP请求状态变化的函数
(4)发送HTTP请求
(5)获取异步调用返回的数据
(6)使用JavaScript和DOM实现局部刷新

6.CMD和AMD的区别
CMD推崇依赖就近(requireJs实现)，AMD推崇依赖前置(seaJs实现)

7.DOM操作

(1)创建新节点  
createDocumentFragment() //创建一个DOM片段  
createElement() //创建一个具体的元素  
createTextNode() //创建一个文本节点  
(2)添加、移除、替换、插入  
appendChild()  
removeChild()  
replaceChild()  
insertBefore() //在已有的子节点前插入一个新的子节点  
(3)查找  
getElementsByTagName() //通过标签名称  
getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)  
getElementById() //通过元素Id，唯一性

7.call和apply的作用是什么？区别是什么？

call和apply的功能基本相同，都是实现继承或者转换对象指针的作用；
唯一不通的是前者参数是罗列出来的，后者是存到数组中的；
call或apply功能就是实现继承的；与面向对象的继承extends功能相似；但写法不同；
语法：
.call(对象,args);//此地参数是指的是对象的参数，非方法的参数；
.apply(对象,a1,a2,a3)//参数数组的形式:[参数1，参数2,......]

8.栈和堆的区别

一、堆栈空间分配区别：  
　　1、栈（操作系统）：由操作系统自动分配释放 ，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈；  
　　2、堆（操作系统）： 一般由程序员分配释放，若程序员不释放，程序结束时可能由OS回收，分配方式倒是类似于链表。  
二、堆栈缓存方式区别：  
　　1、栈使用的是一级缓存， 他们通常都是被调用时处于存储空间中，调用完毕立即释放；  
　　2、堆是存放在二级缓存中，生命周期由虚拟机的垃圾回收算法来决定（并不是一旦成为孤儿对象就能被回收）。所以调用这些对象的速度要相对来得低一些。  
三、堆栈数据结构区别：  
　　堆（数据结构）：堆可以被看成是一棵树，如：堆排序；  
　　栈（数据结构）：一种先进后出的数据结构。

9.JS的垃圾回收机制是什么
垃圾回收机制指的是一块被分配的内存即不能使用，又不能回收，直到浏览器进程结束。

10.JS字符串操作函数

*   concat() – 将两个或多个字符的文本组合起来，返回一个新的字符串。
    
*   indexOf() – 返回字符串中一个子串第一处出现的索引。如果没有匹配项，返回 -1 。
    
*   charAt() – 返回指定位置的字符。
    
*   lastIndexOf() – 返回字符串中一个子串最后一处出现的索引，如果没有匹配项，返回 -1 。
    
*   match() – 检查一个字符串是否匹配一个正则表达式。
    
*   substr() 函数 -- 返回从string的startPos位置，长度为length的字符串
    
*   substring() – 返回字符串的一个子串。传入参数是起始位置和结束位置。
    
*   slice() – 提取字符串的一部分，并返回一个新字符串。
    
*   replace() – 用来查找匹配一个正则表达式的字符串，然后使用新字符串代替匹配的字符串。
    
*   search() – 执行一个正则表达式匹配查找。如果查找成功，返回字符串中匹配的索引值。否则返回 -1 。
    
*   split() – 通过将字符串划分成子串，将一个字符串做成一个字符串数组。
    
*   length – 返回字符串的长度，所谓字符串的长度是指其包含的字符的个数。
    
*   toLowerCase() – 将整个字符串转成小写字母。
    
*   toUpperCase() – 将整个字符串转成大写字母。

10.比较typeof与instanceof？
相同点：JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空，或者是什么类型的。

typeof的定义和用法：返回值是一个字符串，用来说明变量的数据类型。
Instanceof定义和用法：instanceof 用于判断一个变量是否属于某个对象的实例。

11. 跨域请求资源的方法
(1)、porxy代理

定义和用法：proxy代理用于将请求发送给后台服务器，通过服务器来发送请求，然后将请求的结果传递给前端。

实现方法：通过nginx代理；

注意点：1、如果你代理的是https协议的请求，那么你的proxy首先需要信任该证书（尤其是自定义证书）或者忽略证书检查，否则你的请求无法成功。
(2)、CORS 【Cross-Origin Resource Sharing】

定义和用法：是现代浏览器支持跨域资源请求的一种最常用的方式。

使用方法：一般需要后端人员在处理请求数据的时候，添加允许跨域的相关操作。
(3)、jsonp

定义和用法：通过动态插入一个script标签。浏览器对script的资源引用没有同源限制，同时资源加载到页面后会立即执行（没有阻塞的情况下）。

特点：通过情况下，通过动态创建script来读取他域的动态资源，获取的数据一般为json格式。

12.什么是闭包

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

13.什么是防抖和节流

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

或者：
防抖：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行

节流：指定时间间隔内只会执行一次任务

14.HTTP状态码

    100  Continue  继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
    200  OK   正常返回信息
    201  Created  请求成功并且服务器创建了新的资源
    202  Accepted  服务器已接受请求，但尚未处理
    301  Moved Permanently  请求的网页已永久移动到新位置。
    302 Found  临时性重定向。
    303 See Other  临时性重定向，且总是使用GET请求新的URI。
    304  Not Modified  自从上次请求后，请求的网页未修改过。
    400 Bad Request  服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
    401 Unauthorized  请求未授权。
    403 Forbidden  禁止访问。
    404 Not Found  找不到如何与URI相匹配的资源。
    500 Internal Server Error  最常见的服务器端错误。
    503 Service Unavailable服务器端暂时无法处理请求（可能是过载或维护）。

只需要记住（200，404，403，500，504）即可

15.浅拷贝和深拷贝的区别
浅复制：仅仅是指向被复制的内存地址，如果原地址发生改变，那么浅复制出来的对象也会相应的改变。

深复制：在计算机中开辟一块新的内存地址用于存放复制的对象。

16.["1","2","3"].map(parseInt) 的答案是多少？

[1,NaN,NaN]
因为 parseInt 需要两个参数(val,radix)，其中 radix 表示解析时用的基数。
map 传了3个(element,index,array)，对应的 radix 不合法导致解析失败。

17.HTTP有什么特点

• 简单快速：客户向服务器请求服务时，只需传送请求方法和路径
• 灵活：HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记
• 无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接 (深入-持久连接、管线化)
• 无状态：HTTP协议是无状态协议(Cookie的出现)

18.http和https协议有什么区别
http: 是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少

https: 是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL

• http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议
• http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443
• http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全

19.从输入URL到页面加载全过程
1、浏览器的地址栏输入URL并按下回车。
2、浏览器查找当前URL是否存在缓存，并比较缓存是否过期。
3、DNS解析URL对应的IP。
4、根据IP建立TCP连接（三次握手）。
5、HTTP发起请求。
6、服务器处理请求，浏览器接收HTTP响应。
7、渲染页面，构建DOM树。
8、关闭TCP连接（四次挥手）。

20.列举ES6新特性
es6新特性

21.哪些常见操作会造成内存泄漏？**
内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。

垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。

闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）。

22.线程与进程的区别？**
一个程序至少有一个进程,一个进程至少有一个线程。

线程的划分尺度小于进程，使得多线程程序的并发性高。

另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。

线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。

从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。

22.你有哪些性能优化的方法？**
（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。

（2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

（3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。

（4） 当需要设置的样式很多时设置className而不是直接操作style。

（5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

（6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。

（7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。

23.什么叫优雅降级和渐进增强？
优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。

渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。

24.js函数的参数是值传递还是引用传递？

• 基本类型：Undefined、Null、Boolean、Number 和 String，这 5 种基本数据类型是按值访问的。
• 引用类型：Object。是按引用访问的。
• 按值传递参数：函数外部变量a传给函数b，在函数内部改变b的值，a不会跟着改变。
• 按引用传递参数：函数外部变量a传给函数b，在函数内部改变b的值，a也会跟着改变。

vue面试题

vue面试题
Vue 3.0 和 Vue 2.0的对比
vue登录权限实现

webpack面试题

html面试题

1.Doctype作用？标准模式与兼容模式各有什么区别
1、告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
2、标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

2.HTML5 为什么只需要写<!DOCTYPE html>
HTML5不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。
而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

3.行内元素有哪些？块级元素有哪些？空元素有哪些？
行内元素：a b i em span input select strong等
块级元素：h1~h6 p div ul ol dl li等
空元素：meta link br hr img input area等

4.页面导入样式时，使用link和@import有什么区别？
（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题。

5.介绍一下你对浏览器内核的认识？
主要分成两部分：渲染引擎和JS引擎。
渲染引擎：负责取得网页内容，整理讯息，以及计算网页的显示方式，然后输出至显示器或打印机。浏览器的内核不同对于网页的语法解释会有不同，所以渲染的效果也不同。
JS引擎：解析和执行javascript来实现网页的动态效果。
最开始渲染引擎和JS引擎没有很明确的区分，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

6.常见的浏览器内核有哪些？
1、浏览器：IE，Chrome，FireFox，Safari，Opera。
2、内核：Trident，Gecko，Presto，Webkit。

7.HTML5有哪些新特性、移除了哪些元素？
HTML5现在已不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加。
　绘画：canvas;
　媒体播放：video和audio元素；
　本地离线存储：localStorage和sessionStorage;
　语义化更好的元素，如article、footer、header、nav、section;
　表单控件，如calendar、date、time、email、url、search;
　新的技术，webworker,websockert,Geolocation;
移除的元素：
　纯表现的元素：big，center,font,basefont,strike,s,u;
　对可用性产生负面影响的元素：frame,frameset,noframes;

8.HTML5有哪些新特性、移除了哪些元素？
IE6/7/8支持通过document.createElement方法产生的标签，可以使用这种方法来兼容，还要添加上标签默认的样式。
识别HTML5：通过DOCTYPE声明，新增的结构元素，功能元素

9.请描述一下cookies,sessionStorage,localStorage的区别？
cookie是网站为了标识用户身份而储存在用户本地终端的数据（通常经过加密）。
cookie数据始终在同源的http请求中携带，即会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小：
　cookie数据大小不能超过4k。
　sessionStorage和localStorage虽然也有存储大小限制，但比cookie大得多，有5M或更大。
有效时间：
　cookie　　　　　在cookie设置的过期时间之前一直有效，即使浏览器关闭
　sessionStorage　数据在当前浏览器窗口关闭之后自动删除
　localStorage　　 存储持久数据，浏览器关闭之后数据不丢失除非主动删除数据

10.HTML5的from如何关闭自动完成功能？
给不想要提示的 from 或某个 input 设置为 autocomplete=off。

css面试题

1.如何理解CSS的盒子模型？

（1）盒子模型有两种：IE盒子模型、标准W3C盒子模型；IE的content部分包含了border和pading。
（2）标准W3C盒模型包含：内容(content)、填充(padding)、边界(margin)、边框(border)。

2.CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS 3新增伪类有哪些？

id选择器（# myid）
类选择器（.myclassname）
标签选择器（div、h1、p）
相邻选择器（h1 + p）
子选择器（ul < li）
后代选择器（li a）
通配符选择器（ * ）
属性选择器（a[rel = "external"]）
伪类选择器（a: hover, li: nth - child）
可继承： font-size font-family color, UL LI DL DD DT;
不可继承 ：border padding margin width height ;
优先级就近原则，样式定义最近者为准，载入样式以最后载入的定位为准。
优先级为：
       !important >  id > class > tag  
       important 比 内联优先级高
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  单选框或复选框被选中。

3.列出display的值，说明它们的作用。position的值里，relative和absolute定位原点是？

block 像块类型元素一样显示。
none 缺省值。像行内元素类型一样显示。
inline-block 像行内元素一样显示，但其内容像块类型元素一样显示。
list-item 像块类型元素一样显示，并添加样式列表标记。
relative和absolute定位原点：
absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。
relative：生成相对定位的元素，相对于其正常位置进行定位。

4.如何定义高度为1px的容器？

div{
heigh：1px; 
width:10px; 
background:#000; 
overflow:hidden
} 
IE 6下这个问题是默认行高造成的，overflow:hidden | zoom:0.08 | line- height:1px这样也可以解决。

5.用纯 CSS 创建一个三角形的原理是什么？

把上、左、右三条边隐藏掉（颜色设为 transparent）
#demo {
  width:0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

6.介绍一下 Sass 和 Less 是什么？它们有何区别？

Sass (Syntactically Awesome Stylesheets)是一种动态样式语言，语法跟css一样(但多了些功能)，比css好写，而且更容易阅读。Sass语法类似与Haml，属于缩排语法（makeup），用意就是为了快速写Html和Css。
Less一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。
区别：
(1))Sass是基于Ruby的，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出Css到浏览器，也可以在开发环节使用Less，然后编译成Css文件，直接放到项目中，也有Less.app、SimpleLess、CodeKit.app这样的工具，也有在线编译地址。
(2)变量符不一样，less是@，而Scss是$，而且变量的作用域也不一样，后面会讲到。
(3)输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded。
(4)Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。