面试——前端经典面试题

一.H5

一.OSI七层网络模型
一.都是哪些层？
1.物理层：建立、维护、断开物理连接。
2.数据链路层：建立逻辑连接、进行硬件地址寻址、差错校验 [3] 等功能。
3.网络层：进行逻辑地址寻址，实现不同网络之间的路径选择。 协议有：IPV4 IPV6
4.传输层：定义传输数据的协议端口号，以及流控和差错校验。 协议有：TCP UDP
5.会话层：建立、管理、终止会话。
6.表示层：数据的表示、安全、压缩。格式有，JPEG、ASCll、EBCDIC、加密格式等
7.应用层：网络服务与最终用户的一个接口。协议有：HTTP FTP SMTP HTTPS
二.跨域
一.同源策略是什么？
同源策略即：同一协议，同一域名，同一端口号。当其中一个不满足时，我们的请求即会发生跨域问题。
二.为什么要提出同源策略？
如果没有同源策略，不同源的数据和资源（如HTTP头、Cookie、DOM、localStorage等）就能相互随意访问，根本没有隐私和安全可言。为了安全起见和资源的有效管理，浏览器当然要采用这种策略。
三.jsonp原理
ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。
四.cors原理
CORS（Cross-Origin Resource Sharing，跨源资源共享）定义了在必须访问跨源资源时，浏览器与服务器应该如何沟通。CORS 背后的基本思想，就是使用自定义的 HTTP 头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。
五.cors具体怎么实现？
六.cors什么时候发起预检请求，跟哪些字段有关。
七.iframe嵌入考虑跨域问题吗？
使用代理页面
使用postmessage
三.性能优化
一.域名服务
1.网站域名简洁明了，包含关键字
2.网站域名的时间越长，那样的域名将比一般网站得到大量的权重
二.HTTP传输
1.尽可能减少域名解析次数—减少跨站外部资源的引用
2.努力减少连接创建次数----使用Keep-Alive避免重复连接
3.尽力减少请求次数----合理设置Expires时间，资源合并
4.提高服务器端运行速度----提高数据运算及查询速度
5.尽可能减少响应数据长度—启用压缩
三.浏览器加载
1.开启浏览器缓存，缓存css,js，img
2.按需加载，把统计、分享等 js 在页面 onload 后再进行加载，可以提高访问速度；
3.优化 cookie ，减少 cookie 体积；
四.浏览器缓存

五.浏览器渲染
1、减少资源请求的次数和压缩数据内容——使用webpack进行资源打包，使用雪碧图
2、使用CDN加速
其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。
3、使用函数节流
六.代码优化
1、减少对DOM的操作
要避免在document上直接进行频繁的DOM操作，可以使用classname代替大量的内联样式修改，对于复杂的UI元素，设置position为absolute或fixed，尽量使用css动画，适当使用canvas尽量减少css表达式的使用，使用事件代理
2.图片懒加载，只加载可视区域的图片
3.合理的css选择符可以减轻浏览器的解析负担
. 避免使用通配规则。如 *{} 计算次数惊人！只对需要用到的元素进行选择
. 尽量少的去对标签进行选择，而是用class。如：#nav li{},可以为li加上nav_item的类名，如下选择.nav_item{}
. 不要去用标签限定ID或者类选择符。如：ul#nav,应该简化为#nav
. 尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素。
. 考虑继承。了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则
4.从js层面谈优化
. 解决渲染阻塞
如果在解析HTML标记时，浏览器遇到了JavaScript，解析会停止。只有在该脚本执行完毕后，HTML渲染才会继续进行。所以这阻塞了页面的渲染。
解决方法：在标签中使用 async或defer特性
. 减少对DOM的操作
对DOM操作的代价是高昂的，这在网页应用中的通常是一个性能瓶颈。
解决办法：修改和访问DOM元素会造成页面的Repaint和Reflow，循环对DOM操作更是罪恶的行为。所以请合理的使用JavaScript变量储存内容，考虑大量DOM元素中循环的性能开销，在循环结束时一次性写入。
减少对DOM元素的查询和修改，查询时可将其赋值给局部变量。
. 使用JSON格式来进行数据交换
JSON是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript原生格式，这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。
. 让需要经常改动的节点脱离文档流
因为重绘有时确实不可避免，所以只能尽可能限制重绘的影响范围。
七.渲染优化上函数节流,并让写了一个节流函数
概念： 规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。

function throttle(fn, gapTime) {
  let _lastTime = null;
  return function () {
    let _nowTime = + new Date()
    if (_nowTime - _lastTime > gapTime || !_lastTime) {
      fn();
      _lastTime = _nowTime
    }
  }
}
let fn = ()=>{
  console.log('boom')
}
setInterval(throttle(fn,1000),10)
如图是实现的一个简单的函数节流，结果是一秒打出一次boom

八.代码优化上queryselectAll和getBy的区别
querySelectorAll比getElementBy系列速度慢，因为querySelectorAll返回一个静态的NodeList（深克隆），getElementBy系列返回一个动态的实时变化的NodeList（HTMLCollection）（浅克隆，每次都返回一个指针）。
所以querySelectorAll会降低性能。
九.mouseenter和mouseover的区别
不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。对应mouseout
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。对应mouseleave
四.HTTP

五.TCP
一.介绍TCP
TCP是一种面向广域网的通信协议，作用是保证数据通信的完整性和可靠性，防止丢包。
二.介绍一下三次握手
1, TCP服务器进程先创建传输控制块TCB, 时刻准备接受客户端进程的连接请求, 此时服务器就进入了 LISTEN（监听）状态
2, TCP客户端进程也是先创建传输控制块TCB, 然后向服务器发出连接请求报文，此时报文首部中的同步标志位SYN=1, 同时选择一个初始序列号 seq = x, 此时，TCP客户端进程进入了 SYN-SENT（同步已发送状态）状态。TCP规定, SYN报文段（SYN=1的报文段）不能携带数据，但需要消耗掉一个序号。
3, TCP服务器收到请求报文后, 如果同意连接, 则发出确认报文。确认报文中的 ACK=1, SYN=1, 确认序号是 x+1, 同时也要为自己初始化一个序列号 seq = y, 此时, TCP服务器进程进入了SYN-RCVD（同步收到）状态。这个报文也不能携带数据, 但是同样要消耗一个序号。
4, TCP客户端进程收到确认后还, 要向服务器给出确认。确认报文的ACK=1，确认序号是 y+1，自己的序列号是 x+1.
5, 此时，TCP连接建立，客户端进入ESTABLISHED（已建立连接）状态。当服务器收到客户端的确认后也进入ESTABLISHED状态，此后双方就可以开始通信了。
三,四次挥手
1, 客户端进程发出连接释放报文，并且停止发送数据。
释放数据报文首部，FIN=1，其序列号为seq=u（等于前面已经传送过来的数据的最后一个字节的序号加1），此时客户端进入FIN-WAIT-1（终止等待1）状态。 TCP规定，FIN报文段即使不携带数据，也要消耗一个序号。
2, 服务器收到连接释放报文，发出确认报文，ACK=1，确认序号为 u+1，并且带上自己的序列号seq=v，此时服务端就进入了CLOSE-WAIT（关闭等待）状态。
TCP服务器通知高层的应用进程，客户端向服务器的方向就释放了，这时候处于半关闭状态，即客户端已经没有数据要发送了，但是服务器若发送数据，客户端依然要接受。这个状态还要持续一段时间，也就是整个CLOSE-WAIT状态持续的时间。
3, 客户端收到服务器的确认请求后，此时客户端就进入FIN-WAIT-2（终止等待2）状态，等待服务器发送连接释放报文（在这之前还需要接受服务器发送的最终数据）
4, 服务器将最后的数据发送完毕后，就向客户端发送连接释放报文，FIN=1，确认序号为v+1，由于在半关闭状态，服务器很可能又发送了一些数据，假定此时的序列号为seq=w，此时，服务器就进入了LAST-ACK（最后确认）状态，等待客户端的确认。
5, 客户端收到服务器的连接释放报文后，必须发出确认，ACK=1，确认序号为w+1，而自己的序列号是u+1，此时，客户端就进入了TIME-WAIT（时间等待）状态。注意此时TCP连接还没有释放，必须经过2∗MSL（最长报文段寿命）的时间后，当客户端撤销相应的TCB后，才进入CLOSED状态。
6, 服务器只要收到了客户端发出的确认，立即进入CLOSED状态。同样，撤销TCB后，就结束了这次的TCP连接。可以看到，服务器结束TCP连接的时间要比客户端早一些。
四.如果两次握手中间会出现什么问题
主要是为了防止已经失效的连接请求报文突然又传送到了服务器，从而产生错误。如果使用的是两次握手建立连接，假设有这样一种场景，客户端发送的第一个请求连接并且没有丢失，只是因为在网络中滞留的时间太长了，由于TCP的客户端迟迟没有收到确认报文，以为服务器没有收到，此时重新向服务器发送这条报文，此后客户端和服务器经过两次握手完成连接，传输数据，然后关闭连接。此时之前滞留的那一次请求连接，因为网络通畅了, 到达了服务器，这个报文本该是失效的，但是，两次握手的机制将会让客户端和服务器再次建立连接，这将导致不必要的错误和资源的费。
如果采用的是三次握手，就算是那一次失效的报文传送过来了，服务端接受到了那条失效报文并且回复了确认报文，但是客户端不会再次发出确认。由于服务器收不到确认，就知道客户端并没有请求连接。
五.tcp如何保证有效传输。
校验和
序列号
确认应答
超时重传
连接管理
流量控制
拥塞控制
六.拥塞控制原理
拥塞：在某段时间，如果对网络中的某一资源的需求超过了该资源所能提供的可用部分，网络的性能就要发生变化，这种情况叫阻塞
拥塞控制：防止过多的数据注入到网络当中，这样可以使网络中的路由器或链路不致过载。
拥塞控制有四种方法：
慢开始
当主机开始发送数据时，如果立即将大量数据字节注入到网络，那么就有可能因为不清楚当前网络的负荷情况而引起网络阻塞。所以，最好的方法是先探测一下，即由小到大逐渐增大发送窗口，也就是说，由小到大逐渐增大拥塞窗口数值。通常在刚刚发送报文段时，先把拥塞窗口cwnd设置为一个最大报文段MSS的数值。而在每收到一个新的报文段的确认后，把拥塞窗口增加至多一个MSS的数值。用这样的方法逐步增大发送方的拥塞窗口cwnd，可以使分组注入到网络的速率更加合理。（慢开始当中的“慢”并不是指cwnd的增长速率慢，而是在TCP开始发送报文段时先设置cwnd = 1,使得发送方在开始时只发送一一个报文段）
拥塞避免
让拥塞窗口cwnd缓慢的增大，即每经过一个往返时间RTT就把发送方的拥塞窗口cwnd加1，而不是加倍，这样拥塞窗口cwnd按线性规律缓慢的增长，比慢开始算法的拥塞窗口增长速率缓慢的多
快重传
一条TCP连接有时会因为等待重传计时的超时而空闲较长时间，慢开始和拥塞避免无法解决这类问题，因此提出了快重传和快恢复的拥塞控制方法。快重传算法要求首先接收方收到一个失序的报文段后立刻发出重复确认，而不要等待自己发送数据时才进行捎带确认
快恢复
i.当发送方连续收到三个重复确认时，执行“乘法减小”算法，慢启动门限减半，为了预防网络发生阻塞
ii.由于发送方现在认为网络很可能没有发生阻塞，因此现在不执行慢启动算法，而是把cwnd值设置为慢启动门限减半后的值，然后开始执行拥塞避免算法，拥塞窗口cwnd值线性增大。
七. tcp与udp区别
1、TCP面向连接（如打电话要先拨号建立连接）;UDP是无连接的，即发送数据之前不需要建立连接
2、TCP提供可靠的服务。也就是说，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达;UDP尽最大努力交付，即不保证可靠交付
Tcp通过校验和，重传控制，序号标识，滑动窗口、确认应答实现可靠传输。如丢包时的重发控制，还可以对次序乱掉的分包进行顺序控制。
3、UDP具有较好的实时性，工作效率比TCP高，适用于对高速传输和实时性有较高的通信或广播通信。
4.每一条TCP连接只能是点到点的;UDP支持一对一，一对多，多对一和多对多的交互通信
5、TCP对系统资源要求较多，UDP对系统资源要求较少。
八.让你实现一个基于tcp协议之上的协议，你怎么实现。
九.UDP在什么场景会用到？
六.cookie
一.Cookie的属性
name字段：一个cookie的名称
value字段：一个cookie的值
domain字段：可以访问此cookie的域名
path字段：可以访问此cookie的页面路径
二.如何将cookie写入客户端

 document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
 response.addCookie(cookie);  

三.cookie与session的区别
1.存储位置不同
cookie的数据信息存放在客户端浏览器上。session的数据信息存放在服务器上。
2.存储容量不同
单个cookie保存的数据<=4KB，一个站点最多保存20个Cookie。
对于session来说并没有上限，但出于对服务器端的性能考虑，session内不要存放过多的东西，并且设置session删除机制。
3.存储方式不同
cookie中只能保管ASCII字符串，并需要通过编码方式存储为Unicode字符或者二进制数据。session中能够存储任何类型的数据，包括且不限于string，integer，list，map等。
4.服务器压力不同
cookie保管在客户端，不占用服务器资源。对于并发用户十分多的网站，cookie是很好的选择。session是保管在服务器端的，每个用户都会产生一个session。假如并发访问的用户十分多，会产生十分多的session，耗费大量的内存。
四.浏览器如何禁止别人访问cookie
五.localStorage，sessionStorage的区别。
六.cookie localStorage sessionStorage有什么区别？
七.cookie如何保存登录状态
八.cookie有哪些字段
九.后端session存在哪
七.雪碧图
一.雪碧图为什么能优化性能?
减少HTTP连接,一次性传输,HTTP有并发限制
二.雪碧图如何优化？
其实雪碧图把多张图合并,一定程度上减小了体积,单个图片要包含很多无用信息,但是在HTTP层的优化可以被多路复用替代了
三.一次性加载100张图怎么办?
1.将图片服务和应用服务分离
2.简单粗暴的压缩方案
3.图片懒加载
4.将图片压缩成base64格式来节约请求
八.Xss,csrf
一.如何防止xss攻击
利用模板引擎 开启模板引擎自带的 HTML 转义功能。例如： 在 ejs 中，尽量使用 <%= data %> 而不是 <%- data %>； 在 doT.js 中，尽量使用 {{! data } 而不是 {{= data }； 在 FreeMarker 中，确保引擎版本高于 2.3.24，并且选择正确的 freemarker.core.OutputFormat。
避免内联事件 尽量不要使用 onLoad=“onload(’{{data}}’)”、onClick=“go(’{{action}}’)” 这种拼接内联事件的写法。在 JavaScript 中通过 .addEventlistener() 事件绑定会更安全。
避免拼接 HTML 前端采用拼接 HTML 的方法比较危险，如果框架允许，使用 createElement、setAttribute 之类的方法实现。或者采用比较成熟的渲染框架，如 Vue/React 等。
时刻保持警惕 在插入位置为 DOM 属性、链接等位置时，要打起精神，严加防范。
增加攻击难度，降低攻击后果 通过 CSP、输入长度配置、接口安全措施等方法，增加攻击的难度，降低攻击的后果。
主动检测和发现 可使用 XSS 攻击字符串和自动扫描工具寻找潜在的 XSS 漏洞。
二.如何保证表单安全
为防止xss攻击，表单的每个字段提交需要做校验或者编码过滤。防止特殊的标签之类的提交到后台。
三.常见的网站攻击
九.渲染机制
一.浏览器的渲染机制原理
二.为什么使用Virtual DOM
三.直接操作DOM的弊端是什么？
四.BOM的相关属性
十.其他
一.H5的新特性
语义化标签：header、footer、section、nav、aside、article
增强型表单：input 的多个 type
新增表单元素：datalist、keygen、output
新增表单属性：placehoder、required、min 和 max
音频视频：audio、video
canvas
地理定位
拖拽
本地存储：localStorage - 没有时间限制的数据存储；sessionStorage - 针对一个 session 的数据存储，当用户关闭浏览器窗口后，数据会被删除
新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause
WebSocket：单个 TCP 连接上进行全双工通讯的协议
二.从输入url到显示页面都发生了什么
(1) 浏览器获取输入的域名www.baidu.com
(2) 浏览器向DNS请求解析www.baidu.com的IP地址
(3) 域名系统DNS解析出百度服务器的IP地址 （详细介绍DNS）-通过网关出去
(4) 浏览器与该服务器建立TCP连接(默认端口号80)
(5) 浏览器发出HTTP请求，请求百度首页
(6) 服务器通过HTTP响应把首页文件发送给浏览器
(7) TCP连接释放
(8) 浏览器将首页文件进行解析，并将Web页显示给用户。
三.如何理解HTML语义化?
语义化，其实就是用恰当的标签，去展示恰当的内容
更省代码：更少的HTML代码。如果技术的革新不是为了省代码，那将毫无意义；
更清晰的DOM结构：你不再需要些一堆冗余且意义不明的标签，有利于书写css和js；
更有利于SEO：可以提高搜索引擎的有效爬取，提高网站的流量；
可读性：如果不幸网站的样式丢失，清晰的结构依然使你的页面可读性较高；
互用性：没人喜欢维护一坨烂代码，语义化的HTML代码，让你的团队维护更轻松。
四.AJAX 支持同步请求吗？
async：false为同步
五.CDN的作用
1、节省骨干网带宽、降低带宽的需求量、节约成本。
2、加速功能，解决由于用户访问量大造成的服务器过载问题。
3、克服网站分布不均，降低网站建设和维护成本。
4、提高网络稳定性。
5、可以隐藏源站，还可以防御网络攻击。
六.html文件解析过程
七.浏览器的重排，重绘
八.回流与重绘，如何避免回流
九.在交互过程中如果数据传送完了，还不想断开连接怎么办，怎么维持
十.websocket与ajax的区别
十一.fetch API与传统request的区别
十二.如何判断一个IP是不是国内IP？
十三.如何判断一个对象是不是空对象？
十四.POST一般可以发送什么类型的文件
十五.如果页面卡顿你会怎么解决？
十六. 什么是堆，什么是栈，在哪里应用
十七.讲一下什么是 eventloop
十八.chrome的字体最小为12px，如何设置10px的字体（使用transform:scale()属性进行缩放)
十九.讲了一下协商缓存的机制
二十.简单请求和options预检请求
二十一.Etag过程
二十二.web worker，web storage，怎样验证本地数据的有效性
二十三.缓存机制http头部属性 强制缓存，协商缓存，优先级，以及meta标签
二十四.缓存命中率的问题，怎样确保缓存全部数据，缓存命中率不是100%应该怎么办
二十五.然后如何实现上传文件断开之后继续重传
二十六.如果服务端想更新一个强制缓存，有什么解决方案？
二十七.websocket了解吗？
二十八.post get区别
二十九.强缓存如何判断命中
三十.事件流，阻止冒泡的方法
三十一.ssr是什么, 内部原理, 顺带问了如何做seo优化
三十二.token的作用是什么
三十三.content-type 分别在响应和请求有些什么属性
三十四.Restful API
三十五.Etag生成的原理

二.CSS理解题

一.flex布局
一.flex 有兼容性怎么办
按照向下兼容，把旧版本的写法放在下面
二.flex有哪些属性，分别代表什么意思
二.animation动画
一.如何提高css动画性能
1.尽量使用 transform 当成动画熟悉，避免使用 height,width,margin,padding 等；
使用 transform，浏览器只需要一次生成这个元素的位图，并在动画开始的时候将它提交给 GPU 去处理 。之后，浏览器不需要再做任何布局、 绘制以及提交位图的操作。从而，浏览器可以充分利用 GPU 的特长去快速地将位图绘制在不同的位置、执行旋转或缩放处理。
2.要求较高时，可以开启浏览器开启 GPU 硬件加速。
使用-webkit-transform:transition3d(0,0,0)开启GPU硬件加速。
二.web动画的实现方式
canvas元素结合JS
CSS3结合Jquery实现
三.transform、animation、translation 各种乱七八糟属性
transform
旋转：rotate() 顺时针旋转给定的角度，允许负值rotate(30deg)
扭曲：skew()元素翻转给定的角度，根据给定的水平线(x轴)和垂直线（Y轴）参数：skew(30deg,20deg)
缩放：scale()放大或缩小，根据给定的宽度（X轴）和高度（Y轴）参数：scale(2,4)
移动：translate()平移，传进x,y值，代表沿x轴和y轴平移的距离
所有的2D转换方法组合在一起： matrix()旋转、缩放移动以及倾斜元素
matrix(scale.x,scale.y,translate.x,translate.y)
translation
(1) 执行变换的属性：transition-property;
(2) 变换延续的时间：transition-duration;
(3) 在延续时间段，变换的速率变化：transition-timing-function //例：平缓进入、先快后慢；
(4) 变换延迟时间： transition-delay
animation
动画名称: animation-name
动画时间 animation-duration
动画速度 animation-timing-function: linear（匀速变化） ease（低俗开始，然后加快，快结束的时候再放慢） ease-in（低速开始） ease-out（低速结束） ease-in-out（低俗开始，低速结束） steps()
动画延迟 animation-delay
动画次数 animation-iteration-count: infinite
动画方向 animation-direction:
动画播放状态: animation-play-state: running pause
动画完成时的状态: animation-fill-mode:forwards backwards
四.css动画要如何实现？
三.BFS
一.bfc布局是什么
BFC，即Block Formatting Contexts（块级格式化上下文）
具有BFC特性的元素可以看做是隔离了的独立容器，容器里面的元素不会再布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。
通俗一点来讲，可以把BFC，理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
二.如何形成BFC
三.BFC与IFC的区别
四.BFC会与float元素相互覆盖吗？为什么？举例说明
四.其他
一.inline、block与inline-block元素的区别
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（很霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点。
inline-block 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
二.常见的行内块元素有哪些？
其中img和input为行内块元素。
三.css3有哪些新特性
边框圆角：border-radius
盒子阴影：box-shadow
文字阴影：text-shadow
2d、3d变换：transform，rotate()，scale()，skew()，translate()
过度动画：transition
自定义动画：animation
四.Script标签异步特性
一般的script标签（不带async等属性）加载时会阻塞浏览器，也就是说，浏览器在下载或执行该js代码块时，后面的标签不会被解析，例如在head中添加一个script，但这个script下载时网络不稳定，很长时间没有下载完成对应的js文件，那么浏览器此时一直等待这个js文件下载，此时页面不会被渲染，用户看到的就是白屏（网页文件已下载好，但浏览器不解析）
而使用async属性，浏览器会下载js文件，同时继续对后面的内容进行渲染
通常如果js不需要改变DOM结构时可以使用async进行异步加载（比如一些统计代码可以异步加载，因为此代码与页面执行逻辑无关，不会改变DOM结构）
五.响应式和自适应的区别
1、自适应网站是使用不同设备浏览时呈现不同的网页，网页内容及版式风格或相似或完全不同，和PC端属于不同的网站模板，数据库内容或相同一致，或独立不同，目的在于为了符合访客的浏览。针对一些优化人员，更习惯于做到数据库同步，使PC端的网址和内容与移动端的网址和内容一一对应。
2、响应式网站是使用不同的设备浏览网站时，网站样式风格、内容和网址都是完全一样的，PC端和移动端属于同一个网站模板，数据库完全一致，也非常符合搜索引擎的优化规则。
六.浮动是什么，举个栗子，为什么需要清除浮动，有没有不需要清除的情况
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
当子元素设置了float属性之后，且父元素的高度和宽度没有进行设置，而是由子元素支撑起来，则会导致父元素的高度塌陷
七.css中position哪些？
absolute fixed relative static inherit
八.点透问题。为什么会有点透现象。
在移动端不使用click而用touch事件代替触摸是因为click事件有着明显的延迟，由于我们在touchstart阶段就已经隐藏了罩层A，当click被触发时候，能够被点击的元素则是其下的B元素，由于B绑定了click事件（或者B本身默认存在click事件），所以B的click事件被触发，产生了点透的情况。
九.display:none,visibility:hidden,opactiy:0的区别
十.一个div里面包含着另一个div，里面的div外边距是15%，问两个div的排列情况
十一.箭头函数与普通函数的区别
十二.为什么设置font-weight是数字的时候作用会失效？
十三.说说block元素和in-line元素？ 二者的不同点和特征有哪些?
十四.img是行内元素吗？为什么可以设置宽高呢
十五.清除浮动的方法
十六.relative和absolute的区别
十七选择器优先级
十八.伪元素 伪类
十九.em和rem的区别
二十.css为什么要从右往左匹配；
二十一.box-sizing有哪些属性

三.CSS操作题

一.CSS水平居中

div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】，
兼容性：,IE7及之前版本不支持
div{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}

div绝对定位水平垂直居中【margin 负间距】 这或许是当前最流行的使用方法。
div{
width:200px;
height: 200px;
background:green;
position: absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
}

二.垂直居中
三.css实现三角形的原理是什么？请写出实现。
四.双栏布局
五.三栏布局
六.水平垂直居中
七.设计弹出层的具体过程
八.单行文本溢出，多行文本溢出把代码实现写出来
九.一个矩形，水平垂直居中，且宽高比为 2:1
十.实现一个单行容器内：左边一行文字，右边一个btn，文字边长过程中，不会把btn挤下去，而是文字超出省略
十一.css实现进度条
十二.实现两边定宽，中间自适应的布局
十三.css实现左边固定宽度，右边自适应的两栏布局
十四.左侧固定，右侧自适应，利用flex。Flex布局
十五.做一个弹窗的垂直居中
十六.css实现一个直角梯形
十七.CSS怎么画扇形
十八.实现一个弹窗水平垂直居中，要有遮罩层，如何实现点击遮罩层以外的就关闭弹窗

四.JS理解题

一.同步和异步
一.同时并发请求如何保证返回有序？
二.异步操作优先级
(宏任务 微任务)
二.阻塞和非阻塞
三.多路复用
四.promise
一.Promise原理
二.如何用promise封装ajax？
三.用promise和async实现每间隔1s,2s,3s…打印i
四.promise怎么实现，说了下实现过程
五.catch怎么实现
六.all怎么实现
七.Promise的三种状态
五.async
一.用async实现一个list的顺序输出
二.await和async 本质
三.类数组转化成数组的方法
四.async await怎么实现
六.闭包
一.什么是闭包？
闭包是指有权访问另一个函数作用域中的变量的函数。
特性：
（1）.函数嵌套函数
（2）.函数内部可以引用外部的参数和变量
（3）.参数和变量不会被垃圾回收机制回收
二.如何创建闭包？
三.闭包，平时在哪用到？
四.举例示意闭包
五.闭包的缺点
七.原型链
一.如何理解原型链?
二.讲一下什么是 prototype
三.原型、原型链的区别
四.__proto__和prototype的区别和关系?用代码说明。
五.讲一下怎么判断原型链，typeof 和 instanceof 有什么区别
八.其他
二.js的构造函数里面有什么操作
三.new一个对象中间做了什么操作
四.async和generator有什么区别，写一个async和generator函数，并介绍区别
五.用正则解析url
六.箭头函数和普通函数的区别，什么时候有(没有)必要用箭头函数
七.知道 indexOf 的实现方式吗？
八.setstate() 接收几个参数，都是干什么的
九.函数中的 arguments 是数组吗？若不是，如何将它转化为真正的数组？
十.0.1+0.2>0.3的输出是什么？为什么会得到这个结果？如何获得想要的结果？
十一.什么是类数组对象？其数据结构是什么样的？如何将类数组对象转换为数组？
十二.如何判断一个变量为数组？
十三.viewport各个属性值的意义，以及如何实现不用viewport控制用户不能缩放
（用js监听屏幕宽度。）
十四.封装一个类型鉴定函数
十五. 事件轮训机制
十六.let const var的区别
十七.Number()的存储空间是多大，如果后台发送了一个超过最大字节的数字怎们办
十八.有哪些设计模式
十九.js中this指向有几种，并且如何解决this指向混乱问题 答案是箭头函数
二十.setTimeout、setInterval与requestAnimationFrame
二十一.数据类型转换的原理
二十二.浮点数计算0.7+0.1，原因
二十三.window.onload和document.onload区别
二十四.数组的typeof是什么，如何判断数组，几种方法
二十五.es6特性
二十六.call，apply的区别与应用
二十七.bind的polyfill实现
二十八.new一个构造函数的过程 return的东西是啥
二十九.this的四种绑定
三十.JS的异步与事件循环
三十一.和=的区别
三十二.讲一下xhr和fetch
三十三.JSON的传输数据格式，哪些类型是不支持的
三十四.如何判断一个对象是NaN
三十五.instanceOf实现的原理
三十六.深拷贝和浅拷贝区别

五.JS操作题

一.手写六种继承
二.洗牌算法

function getMess(arr) {
   return arr.sort(function() {
       return (Math.random - 0.5);
   });
}

function getMess(arr) {
   var n = arr.length;
   var newArr = [];
   while(n) {
       // 随机获取一个数组下标
       var i = Math.floor(Math.random()*n--);
       // 把该随机下标对应的值push到新数组里面，原数组删除该值
       newArr.push(arr.splice(i, 1)[0]);
   }
   return newArr;
}

三.手写柯里化实现
在数学和计算机科学中，柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。

function curry(fn, argLen, currArgs) {
    return function() {
        console.log("arguments:", arguments, arguments.length)
        var args = [].slice.call(arguments);
        console.log("args:", args)
        // 首次调用时未提供最后一个参数
        if (currArgs !== undefined) {
            args = args.concat(currArgs);
        }
        // 递归出口
        if (args.length == argLen) {
            return fn.apply(this, args);
        } else {
            return curry(fn, argLen, args);
        }
    }
}
function sumOf(a, b, c, d) {
    return a + b + c + d;
}
// 改造普通函数，返回柯里函数
var sum = curry(sumOf, 4);

四.数组去重至少3种

let arr1 = [5, 5, 9, 9, 6, 3, 5, 4, 8, 6, 4, 5];
function unique(arr) {
  return Array.from(new Set(arr));
}
unique(arr1);

let arr1 = [5, 5, 9, 9, 6, 3, 5, 4, 8, 6, 4, 5];
function unique(arr){
    let map = new Map();
    let array = new Array();  // 数组用于返回结果
    for (let i = 0; i < arr.length; i++) {
        if(map.has(arr[i])) { // 判断 map 中是否已有该 key 值
            map.set(arr[i], true);  // 后面的true 代表该 key 值在原始数组中重复了，false反之
        } else {  // 如果 map 中没有该 key 值，添加
            map.set(arr[i], false);  
            array.push(arr[i]);
        }
    } 
    return array;
}
unique(arr1);

let arr1 = [5, 5, 9, 9, 6, 3, 5, 4, 8, 6, 4, 5];
function unique(arr) {
  var arr2 = [];
  for (let i = 0; i < arr.length; i++) {
    if (arr2.indexOf(arr[i]) === -1) {
      arr2.push(arr[i]);     
    }
  }
  return arr2;
}
unique(arr1）

五.写一个promise
六.实现bind函数

let b = Function.prototype.bind
Function.prototype.bind = Function.prototype.bind || function bind(ctx) {
    let that = this
    let slice = Array.prototype.slice
    let bindArgs = slice.call(arguments,1)
    // bind可以传递参数，返回的被绑定的函数同样可以传参，所以这里先保存第一次bind的参数，忽略ctx，从 index 1 开始
    // 后面将调用时的参数传递进去，concat成一个array
    return function b(args) {
        // slice.call 将 arguments 转换为 Array
        that.apply(ctx,bindArgs.concat(slice.call(arguments)))
      // From https://stackoverflow.com/a/960870/7529562
      //NOTE: The slice function is intentionally generic; it does not require that its this value be an Array object. 
      //Therefore it can be transferred to other kinds of objects for use as a method.
      // Whether the slice function can be applied successfully to a host object is implementation-dependent.

      //Therefore, slice works on anything that has a length property, which arguments conveniently does.
    }
}

function test (a,b) {
    console.log(arguments)
}

let obj = {
    name: "wwc"
}

let newtest = test.bind(obj,'1','2')
newtest('3','4')

apply实现bind
七.图片懒加载代码，做节流处理
八.实现一个类方法的链式调用Human(‘Jack’).eat().rest(5).go().sleep(10)
九.实现函数A()，多次调用输出1，2，1，2。。。
十.写一个发布订阅模式
十一.实现一个简单队列，让1.2.3分别在第一秒，第三秒，第五秒打印出来。

new queue( )
.task(1000, ()=>{
    console.log(1);
})
.task(2000, ()=>{
    console.log(2);
})
.task(1000, ()=>{
    console.log(3);
})
.start( );

十二.如何实现连续打印1-5，每秒打印一个？
十三.如何实现回型数组？
十四.JSON.stringify的实现，要考虑null、undefined，循环引用的情况下需要报错
十五.查询字符串中出现最多次数的字符，用js写代码。
十六.this指向问题，改进，用了箭头函数与call，随后让写call的实现!!
十七.实现一个构造函数 new的时候每次加一
十八.手写原生 ajax
十九.实现一个tab组件
二十.js类型，封装一个类型鉴定函数
二十一.js都有哪些基础类型？
二十二.==的隐式转换
二十三.实现一个简单的 EventEmitter
二十四.5个feach请求，请求完成后要求立即执行，但最终的输出顺序要按照要求输出ABCDE
二十五.订阅发布者模式和观察者模式的区别
二十六.使用原生js写一个http请求

六.Vue.js

一.写一个router class
二.VDOM给开发者带来了什么
三.vue的最大特点
四.jquery和vue的本质区别
五.vue框架有没实现敏感字符过滤，如果不想过滤该用什么。
六.vue双向数据绑定的过程，用v-bind举例
七.怎么实现数据驱动
八.vue的diff是为什么，浏览器重绘重排前会diff吗，为什么？
九.vue响应式getter\setter原理
十.Vue 如何监听一个不会触发 render 的数据
十一.写一个函数防抖
十二.写一个函数节流
十三.路由原理
十四.讲讲Vue的插槽slot 和scope slot
十五.vue响应式原理
十六.vue 中 computed 与 watch 的内在是如何实现的 ？
vue事件修饰符，原生dom事件，捕获
vue自定义事件会冒泡吗
vue事件是冒泡阶段还是捕获阶段触发
为什么会有vuex这样的状态管理类库
vue里面父子组件怎么传递数据
不是父子组件又怎么传递数据
vue中父组件传递下来的数据，子组件改变会对父组件视图造成影响吗
vuex里的数据是怎样实现实时更新的
computed和method有什么区别？
v-if和v-for能不能写在同一个标签中？（能，但会造成性能问题）
v-if和v-show的区别
什么是MVVM，MVC和MVVM的区别

七.Node.js

一.express
1.Express中间件介绍
二.其他
一.CommandJS,AMD,CMD分别是什么？
command是服务器端的，是同步的如nodejs
AMD和CMD是浏览器端的，是异步的，如requirejs
commandJS是服务器端模块的规范化，node就采用的这种规范，一个单独的文件就是一个模块，加载模块采用require。command加载模块是同步进行的，所有的加载都执行后才能执行后面的操作。command主要用于服务器的编程所以很多需要加载的文件已经存在在本地磁盘上了，加载起来比较快，不用考虑异步加载的方式。而浏览器中加载文件中采用异步加载的方式。AMD，CMD来啦
AMD 是 RequireJS 在推广过程中对模块定义的规范化产出
CMD是SeaJS在推广过程中对模块化定义的规范化产出
AMD和CMD最明显的区别就是在模块定义时对依赖的处理不同
AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块
CMD推崇就近依赖，只有在用到某个模块的时候再去require
二.ES6的模块化和commonJS，AMD的最本质的区别是什么？
三.你觉得mongoose有什么作用？
四.简单介绍 node 中的 child_process 模块，父子进程的通信机制
五.简单介绍一下 body-parser 的作用和原理
六.基于 http 模块，写一个 http server，并且处理 POST 请求
七.关系型和非关系型数据库的区别
八.说明一下nodejs中的IO控制
九.node的事件循环和浏览器的区别
十.module exports 和exports区别

八.算法

一.链表算法
1.反转链表
2.查找两个链表的交叉节点
3.判断一个链表是否有环
二.数组算法
1.有序选k个数如何保证最小
2.实现两个数组交替打印
3.斐波那契数列，如何在使用递归的情况下，不爆栈，怎么优化
4.给定一个升序数组，如何找到连续的元素，并返回连续元素组成的序列？例如，给定数组[1,2,3,4,6,9,22,23]，返回数组[“1->4”,“6”,“9”,“22->23”]。
5.从给定的无序、不重复的数组data中，取出n个数，使其相加和为sum。并给出算法的时间/空间复杂度 。(不需要找到所有的解，找到一个解即可)
6.给你一个长度为N的排好序的数组，要求给出数组元素之和为M的情况
7.n维数组转换成1维数组，比如:[1,[2,3],[[4],[5,6]]]变成[1,2,3,4,5,6]
8.实现找第k大的数
9.一个数组里找出和为target的两个数
10.手动实现Array.reduce()。
11.两个有序数组的合并
三.其他
1.36进制数相加
2.优先队列
3.找出【1000，990000】的所有对称数
4.用reduce来实现map
5.选择排序
6.快速排序
7.如何判断是不是完全二叉树
8.写个函数反转字符串
9.二叉树的前中后序遍历，已知前中序，求原有的二叉树
10.深度遍历
11.广度遍历
12.查找最长无重复的字串
13.leetcode 1
14.查找第一个缺失的正整数
15.小朋友分饼干

九.微信小程序

一.微信小程序和浏览器的运行环境有什么区别？
二.微信小程序生命周期
三.

十.webpack

一.webpack打包产物是怎样的，到底是为了什么，优化了什么，为什么要合并文件？
二.webpack压缩js css的方法
三.loader和plugin区别

十一.智力题

一.虎吃羊
二.智力测试题：27只小白鼠，有26瓶解药，1瓶毒药，怎么用最少的白鼠找出其中的毒药