前端实习生面试题分析（一）

最近面试拿了不少公司的实习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支持一对1、一对多、多对一和多对多的交互通讯。

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加载时间线

一、建立Document对象，开始解析web页面。解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中。这个阶段document.readyState = 'loading'。

二、遇到link外部css，建立线程加载，并继续解析文档。

三、遇到script外部js，而且没有设置async、defer，浏览器加载，并阻塞，等待js加载完成并执行该脚本，而后继续解析文档。

四、遇到script外部js，而且设置有async、defer，浏览器建立线程加载，并继续解析文档；对于async属性的脚本，脚本加载完成后当即执行。（异步禁止使用document.write()）

五、遇到img等，先正常解析dom结构，而后浏览器异步加载src，并继续解析文档。

六、当文档解析完成，document.readyState = 'interactive'。

七、文档解析完成后，全部设置有defer的脚本会按照顺序执行。（注意与async的不一样,但一样禁止使用document.write()）;

八、document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。

九、当全部async的脚本加载完成并执行后、img等加载完成后，document.readyState = 'complete'，window对象触发load事件。

十、今后，以异步响应方式处理用户输入、网络事件等。

---

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的最基本的原理

因此好处就能总结出来了：

1. 加速不说了

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-h六、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都会使原来的内联元素变成块级元素