前端实习生面试题分析（一）
最近面试拿了很多公司的实习offer，只要是面试的都通过了。
接下来就分析下面试题，也能给自己一个提升吧，以便后续的面试更轻车熟路些，题目没什么顺序，想起什么写什么，还有我面试过程中的一些小套路。
估计要写好多，每天写几道题，而且有些经验性的东西也不容易写出来
这篇写的都是类似一些概念性的理论东西。
1.JS防抖和节流
先说为什么要做防抖和节流，针对一些会频繁触发的事件，像scroll、resize，如果正常绑定事件处理函数的话，可能在很短的时间内多次连续触发事件，十分影响性能。
所以，针对这种事件要做防抖或者节流处理。
1.防抖
做法就是限制下次函数调用之前必须等待的事件间隔。
实现方法就是维护一个定时器，规定事件后触发函数，规定时间内触发的话，就会取消之前的计时器并且重新设置计时器，这样一来，只有最后一次操作能触发。
2.节流
节流只允许一个函数在规定的时间内触发一次。
它和防抖最大的区别就是，节流函数不管事件触发多频繁，都保证事件处理函数只在规定的时间内触发一次；防抖只是最后一次事件才会触发事件处理函数。
比如在页面无限加载的场景下，我们需要用户在滚动页面时，每隔一段事件发送一次异步请求，而不是用户在停止页面滚动时发送异步请求。所以这种场景，就适合用节流来实现。
两种实现方式：
-
时间戳：容易理解，当高频事件触发时，第一次应该立即执行事件处理函数，然后再怎么频繁触发事件，也都是会等到规定的时间间隔后才执行一次。
-
定时器：当触发事件的时候，设置一个定时器，再触发事件的时候，若定时器是存在， 就什么都不做；知道规定时间后，定时器执行事件处理函数，然后定时器被清空，这样就可以设置下一个定时器。
2.TCP和UDP的区别
这个东西能说好多，面试要求简洁，就写个总结的答案，我推荐谢希仁的《计算机网络》第六版。
1.TCP是面向连接的运输层协议；UDP是无连接的，即发送数据之前不需要建立链接，因此减少了开销和发送数据的时延。
2.TCP提供可靠交付的服务，通过TCP连接传送的数据，无差错、不丢失、不重复、并且按时到达；UDP使用最大努力交付，即不保证可靠性交付，因此主机不需要维持复杂的连接状态。
3.TCP面向字节流，TCP中的“流”指的是流入到进程或从进程流出的字节序列；UDP是面向报文的，发送方的UDP对应用程序交下来的报文，在添加首部后就向下交付IP层。
4.UDP没有拥塞控制，因此网络出现的拥塞不会使源主机的发送速率降低，符合很多实时应用（如IP电话、实时视频会议等）的要求。
5.每一条TCP连接只能有两个端点，每一条TCP连接只能是点对点的；UDP支持一对一、一对多、多对一和多对多的交互通信。
6.UDP的首部开销小，只有8个字节，比TCP的20个字节的首部短。
7.TCP提供可靠的全双工通信，TCP允许通信双方的应用进程在任何时候都能发送数据；UDP是不可靠信道。
3.GET和POST的区别
红字标记的一定要说出来
- GET请求在浏览器回退时是无害的，POST会再次提交请求
- GET请求产生的URL地址可以被收藏，而POST不可以
- GET请求会被浏览器主动缓存，而POST不会，除非手动设置
- GET请求只能进行URL编码，而POST支持多种编码方式
- GET请求参数会被完整的保留在浏览器历史记录里，而POST中的参数不会被保留
- GET请求在URL中传递的参数是有长度限制的（不固定，因浏览器决定），而POST没有限制
- GET请求只接受ASC2字符，而对参数的数据类型POST没有限制
- GET请求比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感数据
- GET请求参数通过URL传递，而POST放在request.body上
4.JS加载时间线
1、创建Document对象，开始解析web页面。解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中。这个阶段document.readyState = \’loading\’。
2、遇到link外部css，创建线程加载，并继续解析文档。
3、遇到script外部js，并且没有设置async、defer，浏览器加载，并阻塞，等待js加载完成并执行该脚本，然后继续解析文档。
4、遇到script外部js，并且设置有async、defer，浏览器创建线程加载，并继续解析文档；对于async属性的脚本，脚本加载完成后立即执行。（异步禁止使用document.write()）
5、遇到img等，先正常解析dom结构，然后浏览器异步加载src，并继续解析文档。
6、当文档解析完成，document.readyState = \’interactive\’。
7、文档解析完成后，所有设置有defer的脚本会按照顺序执行。（注意与async的不同,但同样禁止使用document.write()）;
8、document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。
9、当所有async的脚本加载完成并执行后、img等加载完成后，document.readyState = \’complete\’，window对象触发load事件。
10、从此，以异步响应方式处理用户输入、网络事件等。
5.如何解决canvas高分屏模糊问题？
在分辨率比较高的屏幕，例如ip6/6s/mac等机器上，因为canvs绘制的是位图，所以会导致模糊，解决方法是根据屏幕分辨率修改canvas样式代码中的宽和高与canvas的width和height属性的比例
6.cookie、localStorage、sessionStorage区别
1.从数据生命周期上来说
- cookie：一般由服务器端生成，可设置失效时间，如果在浏览器端生成cookie，则默认关闭浏览器后失效。
- localStorage： 永久保存，除非被清除。
- sessionStorage： 仅在当前会话下有效，关闭页面或者浏览器被清除。
2.从数据存储方面来说
- cookie大小为4KB左右
- storage一般为5MB
3.从与服务器端通信方面
- cookie每次都会携带在HTTP头中，如果cookie保存过多会带来性能问题
- storage仅在客户端保存，不参与和服务器的通信
4.从易用性方面来说
- cookie原生接口不友好
- storage原生接口友好，也可自行封装
7.使用CDN的好处
CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。
CDN的基本原理是广泛采用各种缓存服务器，将这些缓存服务器分布到用户访问相对集中的地区或网络中，在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响应用户请求。
CDN网络是在用户和服务器之间增加Cache层，如何将用户的请求引导到Cache上获得源服务器的数据，主要是通过接管DNS实现，这就是CDN的最基本的原理
所以好处就能总结出来了：
- 加速不说了
2.为了实现跨运营商、跨地域的全网覆盖
- CDN加速可以覆盖全球的线路，通过和运营商合作，部署IDC资源，在全国骨干节点商，合理部署CDN边缘分发存储节点，充分利用带宽资源，平衡源站流量
3.保障网站安全
- CDN的负载均衡和分布式存储技术，可以加强网站的可靠性，相当无无形中给你的网站添加了一把保护伞，应对绝大部分的互联网攻击事件。防攻击系统也能避免网站遭到恶意攻击
4.异地备援
- 当某个服务器发生意外故障时，系统将会调用其他临近的健康服务器节点进行服务，进而提供接近100%的可靠性，这就让你的网站可以做到永不宕机
5.节约成本
- 使用CDN加速可以实现网站的全国铺设，你根据不用考虑购买服务器与后续的托管运维，服务器之间镜像同步，也不用为了管理维护技术人员而烦恼，节省了人力、精力和财力
8.手写一个快排
简单，找到枢轴，左右分治再递归就好了
function qucikSort (arr) {
if (arr.length <= 1) {
return arr
}
var num = Math.floor(arr.length / 2)
var numVal = arr.splice(num, 1)
var left = []
var right = []
for (var i = 0; i < arr.length; i++) {
if (arr[i] < numVal) {
left.push(arr[i])
} else if (arr[i] > numVal) {
right.push(arr[i])
}
}
return qucikSort(left).concat(numVal, qucikSort(right))
}
9.块级元素和内联元素的区别
1.块级元素的特点：
- 总是在新行上开始
- 高度、行高以及内外边距都可以控制
- 宽度默认是它容器的100%，除非设置一个值
- 它可以容纳内联元素和其他块级元素
2.内联元素的特点：
- 和其他元素都在同一行
- 高度、行高以及内外边距都不可控制
- 宽度就是它的文字或图片的高度，不可改变
- 内联元素只能容纳文本或者其他内联元素
常见的块级元素：address、center、div、dir、from、h1-h6、hr、ol、ul、li、table、p、pre、menu 等
常见的内联元素：a、b、br、em、font、i、img、input、label、select、span、strong、textarea
注： 设置了float或者position值为absolute和fixed都会使原来的内联元素变成块级元素