A. 前端面试题整理（一）
进程是CPU资源分配的最小单位，线程是CPU调度的最小单位
其中GUI渲染线程和JS引擎是无法同时工作的
默认情况下, TCP 连接会启用延迟传送算法 (Nagle 算法), 在数据发送之前缓存他们. 如果短时间有多个数据发送, 会缓冲到一起作一次发送 (缓冲大小见 socket.bufferSize), 这样可以减少 IO 消耗提高性能.
如果是传输文件的话, 那么根本不用处理粘包的问题, 来一个包拼一个包就好了. 但是如果是多条消息, 或者是别的用途的数据那么就需要处理粘包.
可以参见网上流传比较广的一个例子, 连续调用两次 send 分别发送两段数据 data1 和 data2, 在接收端有以下几种常见的情况:
A. 先接收到 data1, 然后接收到 data2 .
B. 先接收到 data1 的部分数据, 然后接收到 data1 余下的部分以及 data2 的全部.
C. 先接收到了 data1 的全部数据和 data2 的部分数据, 然后接收到了 data2 的余下的数据.
D. 一次性接收到了 data1 和 data2 的全部数据.
其中的 BCD 就是我们常见的粘包的情况. 而对于处理粘包的问题, 常见的解决方案有:
多次发送之前间隔一个等待时间
关闭 Nagle 算法
进行封包/拆包
通过滑动窗口协议（连续ARQ协议）实现，保证了分组无差错、有序接收、流量控制。接收方返回的ACK中会包含自己的接收窗口的大小，并且利用大小来控制发送方的数据发送。
当发送者收到了一个窗口为0的应答，发送者便停止发送，等待接收者的下一个应答。如果这个窗口不为0的应答在传输过程中丢失，发送者一直等待，接收者以为发送者收到该应答，等待接收新数据，这样双方就相互等待，从而产生死锁
TCP使用了持续计时器。每当发送者收到一个0窗口的应答后就启动该计时器。计时器到时便主动发送报文询问接收者的窗口大小。若接收者仍然返回0窗口，则重置该计时器继续等待；若窗口不为0，则标识应答报文丢失了，此时重置发送窗口开始发送，这样就避免了死锁的产生
拥塞控制是作用于网络的，防止网络负载过大，常用的方法：1.慢启动、拥塞避免 2.快重传、快恢复。流量控制是作用于接收者的，控制发送者的发送速度使接收者来得及接收，防止分组丢失
发送方维持一个叫做拥塞窗口CWnd的状态变量，控制着传输速度，TCP开始发送报文时CWnd=1。一个传输轮次所经历的时间就是往返时间RTT，每经过一个RTT并且按时收到确认，就将拥塞窗口CWnd加倍。还有一个叫慢启动门限ssthresh的状态变量，当CWnd<ssthresh时，使用慢启动，当CWnd>=ssthresh改用拥塞避免算法
每经过一个往返时间RTT就把发送方的拥塞窗口cwnd加1而不是加倍。无论在慢启动阶段还是拥塞避免阶段，只要发送方没有按时收到确认，就把慢启动门限设置为出现拥塞时的拥塞窗口cwnd的一半（但不小于2）。然后把拥塞窗口cwnd重置为1，执行慢启动算法
接收方收到一个失序的报文段后就立刻发出重复确认而不是等到自己发送数据时捎带确认。只要发送方一连收到三个重复确认就立即重传对方尚未收到的报文段，而不是等待重传计时器到期
当发送方连续收到三个重复确认时，把慢启动门限ssthresh减半，但是并不执行慢开始算法，而是将拥塞窗口cwnd设置为ssthresh减半后的值，直接执行拥塞避免算法。快重传配合快恢复的TCP Reno版本是目前使用最广的版本。
帧：HTTP/2 数据通信的最小单位消息：指 HTTP/2 中逻辑上的 HTTP 消息。例如请求和响应等，消息由一个或多个帧组成。
流：存在于连接中的一个虚拟通道。流可以承载双向消息，每个流都有一个唯一的整数ID
HTTP/1.x会在请求和响应中中重复地携带不常改变的、冗长的头部数据，给网络带来额外的负担。
服务端可以在发送页面HTML时主动推送其它资源，而不用等到浏览器解析到相应位置，发起请求再响应。例如服务端可以主动把JS和CSS文件推送给客户端，而不需要客户端解析HTML时再发送这些请求。
服务端可以主动推送，客户端也有权利选择是否接收。如果服务端推送的资源已经被浏览器缓存过，浏览器可以通过发送RST_STREAM帧来拒收。主动推送也遵守同源策略，服务器不会随便推送第三方资源给客户端。
HTTP 1.x 中，如果想并发多个请求，必须使用多个 TCP 链接，且浏览器为了控制资源，还会对单个域名有 6-8个的TCP链接请求限制。
HTTP2中：
同域名下所有通信都在单个连接上完成。
单个连接可以承载任意数量的双向数据流。
数据流以消息的形式发送，而消息又由一个或多个帧组成，多个帧之间可以乱序发送，因为根据帧首部的流标识可以重新组装
前端面试与进阶指南
从输入URL到页面加载的过程？如何由一道题完善自己的前端知识体系！
B. 高级前端面试题目大全(三)
解析： 第 41题
比如 sleep(1000) 意味着等待1000毫秒，可从 Promise、Generator、Async/Await 等角度实现
解析： 第 42 题
解析： 第 43 题
1、客户端使用https的url访问web服务器,要求与服务器建立ssl连接
2、web服务器收到客户端请求后, 会将网站的证书(包含公钥)传送一份给客户端
3、客户端收到网站证书后会检查证书的颁发机构以及过期时间, 如果没有问题就随机产生一个秘钥
4、客户端利用公钥将会话秘钥加密, 并传送给服务端, 服务端利用自己的私钥解密出会话秘钥
5、之后服务器与客户端使用秘钥加密传输
解析： 第 44 题
解析： 第 45 题
1.使用第一次push，obj对象的push方法设置 obj[2]=1;obj.length+=1
2.使用第二次push，obj对象的push方法设置 obj[3]=2;obj.length+=1
3.使用console.log输出的时候，因为obj具有 length 属性和 splice 方法，故将其作为数组进行打印
4.打印时因为数组未设置下标为 0 1 处的值，故打印为empty，主动 obj[0] 获取为 undefined
解析： 第 46 题
解析： 第 47 题
1、Function.prototype.apply和Function.prototype.call 的作用是一样的，区别在于传入参数的不同；
2、第一个参数都是，指定函数体内this的指向；
3、第二个参数开始不同，apply是传入带下标的集合，数组或者类数组，apply把它传给函数作为参数，call从第二个开始传入的参数是不固定的，都会传给函数作为参数。
4、call比apply的性能要好，平常可以多用call, call传入参数的格式正是内部所需要的格式
解析： 第 48 题
解析： 第 49 题
解析： 第 50 题
为什么在 Vue3.0 采用了 Proxy，抛弃了 Object.defineProperty？
解析： 第 51 题
解析： 第 52 题
解析： 第 53 题
解析： 第 54 题
如下：{1:222, 2:123, 5:888}，请把数据处理为如下结构：[222, 123, null, null, 888, null, null, null, null, null, null, null]。
解析： 第 55 题
解析： 第 56 题
解析： 第 57 题
解析： 第 58 题
解析： 第 59 题
解析： 第 60 题
解析： 第 61 题
解析： 第 62 题
解析： 第 63 题
解析： 第 64 题
解析： 第 65 题
解析： 第 66 题
随机生成一个长度为 10 的整数类型的数组，例如 [2, 10, 3, 4, 5, 11, 10, 11, 20] ，将其排列成一个新数组，要求新数组形式如下，例如 [[2, 3, 4, 5], [10, 11], [20]] 。
解析： 第 67 题
解析： 第 68 题
解析： 第 69 题
解析： 第 70 题
解析： 第 71 题
[图片上传失败...(image-2eeb30-1575446538468)]
<figcaption></figcaption>
解析： 第 72 题
解析： 第 73 题
解析： 第 74 题
解析： 第 75 题
解析： 第 76 题
示例 1：
示例 2：
解析： 第 77 题
解析： 第 78 题
解析： 第 79 题
解析： 第 80 题
解析： 第 81 题
解析： 第 82 题
解析： 第 83 题
习题： https://blog.csdn.net/qq_37024887/article/details/106784068
解析： 第 84 题
解析： 第 85 题
给定一个整数数组和一个目标值，找出数组中和为目标值的两个数。
你可以假设每个输入只对应一种答案，且同样的元素不能被重复利用。
示例：
解析： 第 86 题
解析： 第 87 题
以下数据结构中，id 代表部门编号，name 是部门名称，parentId 是父部门编号，为 0 代表一级部门，现在要求实现一个 convert 方法，把原始 list 转换成树形结构，parentId 为多少就挂载在该 id 的属性 children 数组下，结构如下：
解析： 第 88 题
解析： 第 89 题
[图片上传失败...(image-aea64e-1575446538470)]
解析： 第 90 题
解析： 第 91 题
[图片上传失败...(image-21d53f-1575446538470)]
解析： 第 92 题
示例 1：
中位数是 2.0
示例 2：
中位数是(2 + 3) / 2 = 2.5
解析： 第 93 题
解析： 第 94 题
解析： 第 95 题
解析： 第 96 题
解析： 第 97 题
解析： 第 98 题
解析： 第 99 题
解析：[第 100 题]( https://github.com/Advanced-Frontend/Daily-
C. 常见的web前端面试题及答案分享
1、 说下行内元素和块级元素的区别?行内块元素的兼容性使用?(IE8 以下)
答：行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行。兼容性：display:inline-block;*display:inline;*zoom:1。
2、box-sizing常用的属性有哪些?分别有什么作用?
答：box-sizing: content-box|border-box|inherit。content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。
border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
3、Doctype作用?标准模式与兼容模式各有什么区别?
答：告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
4、html5有哪些新特性?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?
答：HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
(1)绘画 canvas;
(2)用于媒介回放的 video 和 audio 元素;
(3)本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
(4)sessionStorage 的数据在浏览器关闭后自动删除;
(5)语意化更好的内容元素，比如 article、footer、header、nav、section;
(6)表单控件，calendar、date、time、email、url、search;
(7)新的技术webworker, websocket, Geolocation;
IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。当然也可以直接使用成熟的框架、比如html5shim。
以上就是环球青藤小编关于web前端面试题的相关分享，希望对大家有所帮助，想要了解更多相关内容，请及时关注本平台并进行查看!
D. WEB前端面试题
第二章 面试题基础篇
2.1 HTML面试题
面试题：行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
面试题：页面导入样式时，使用link和@import有什么区别？
面试题：title与h1的区别、b与strong的区别、i与em的区别？
面试题：img标签的title和alt有什么区别？
面试题：png、jpg、gif 这些图片格式解释一下，分别什么时候用？
2.2 CSS面试题
面试题：css背景纹路
面试题：介绍一下CSS的盒子模型
面试题：CSS选择符有哪些？哪些属性可以继承？
面试题：CSS优先级算法如何计算？
面试题：用CSS画一个三角形
面试题：一个盒子不给宽度和高度如何水平垂直居中？
面试题：display有哪些值？说明他们的作用。
面试题：对BFC规范(块级格式化上下文：block formatting context)的理解？
面试题：清除浮动有哪些方式？
面试题：在网页中的应该使用奇数还是偶数的字体？为什么呢？
面试题：写一个左中右布局占满屏幕，其中左、右俩块固定宽200，中间自适应宽，要求先加载中间块，请写出结构及样式。
面试题：什么是CSS reset？
面试题：css sprite是什么,有什么优缺点
面试题：display: none;与visibility: hidden;的区别
面试题：position有哪些值?有什么作用? 【特别多公司问】
面试题：line-height和height有什么区别？
面试题：opacity 和 rgba区别
2.3 JavaScript基础面试题
面试题：延迟加载JS有哪些方式？
面试题：JS数据类型有哪些？
面试题：null和undefined的区别
面试题：JS数据类型考题
面试题：==和===有什么不同
面试题：JS微任务和宏任务
面试题：JS作用域考题
面试题：JS对象考题
面试题：JS作用域+this指向+原型 考题
面试题：JS判断变量是不是数组，你能写出哪些方法？
面试题：slice是干嘛的、splice是否会改变原数组
面试题：JS数组去重
面试题：找出多维数组最大值
面试题：给字符串新增方法实现功能
面试题：找出字符串出现最多次数的字符以及次数
2.4 真正移动端 —— H5/C3面试题
面试题：什么是语义化标签
面试题：::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。
面试题：如何关闭iOS键盘首字母自动大写
面试题：怎么让Chrome支持小于12px 的文字？
面试题：rem和em有什么样区别
面试题：ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉
面试题：webkit表单输入框placeholder的颜色值能改变吗？
面试题：禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片
面试题：禁止ios和android用户选中文字
面试题：自适应 [淘宝无线适配]
面试题：响应式
第三章 面试题进阶篇
3.1 JavaScript进阶面试题
面试题：new操作符具体做了什么
面试题：闭包 【必须会】
面试题：原型链 【必须会】
面试题： JS继承有哪些方式
面试题：说一下call、apply、bind区别
面试题：sort背后原理是什么？
面试题：深拷贝和浅拷贝
面试题：localstorage、sessionstorage、cookie的区别
3.2 ES6面试题
面试题：var、let、const区别
面试题：作用域考题
面试题：将下列对象进行合并
面试题：箭头函数和普通函数有什么区别？
面试题：Promise有几种状态
面试题：find和filter的区别 【大厂】
面试题：some和every的区别 【大厂】
3.3 webpack面试题
面试题：webpack插件
3.4 Git面试题
面试题：git常用命令
面试题：解决冲突
面试题：GitFlow
第四章 面试题框架篇
4.1 区分初中高级的 —— Vue面试题
面试题：Vue2.x 生命周期有哪些？
1.系统自带八个
2.当一旦进入到某个组件会执行哪些生命周期
3.$el和$data在哪个阶段有
4.如果使用keep-alive会多俩个生命周期
5.如果加入keep-alive第一次进入组件会执行哪些生命周期
6.如果加入keep-alive第二次或者第N进入该组件会执行哪些生命周期
面试题：谈谈你对keep-alive的了解
面试题：v-if和v-show区别
面试题：v-if和v-for优先级 2.x
面试题：ref是什么？
面试题：nextTick是什么？
面试题：Vue中如何做样式穿透
面试题：scoped原理
面试题：Vuex是单向数据流还是双向数据流？
面试题：讲一下MVVM
面试题：双向绑定原理
面试题：什么是虚拟DOM
面试题：key是干什么？
面试题：diff算法
面试题：Vue组件传值
面试题：props和data优先级谁高？
面试题：computed、methods、watch有什么区别？
面试题：Vuex
面试题：Vue路由
面试题：Vue项目打包后出现空白页
4.2 微信小程序面试题
面试题：如何自定义头部？
面试题：如何自定义底部？
4.3 uni-app面试题
面试题：生命周期
面试题：条件编译
第五章 面试题性能优化篇
E. 前端面试会提问到哪些
在面试前端的过程中，有些问题是经常会被提问到的
一、基础篇
1. 在不使用第三个变量的情况下，如何调换a与b的值？
2. px与em的区别
3. 简述一下盒模型
4. 页面导入样式时，使用link和@import有什么区别？
5. 简述一下事件代理
二、HTML常见题目
01、Doctype作用？严格模式与混杂模式如何区分？它们有何意义？
02、HTML5为什么只需要写？
03、行内元素有哪些？块级元素有哪些？空(void)元素有哪些？
04、页面导入样式时，使用link和@import有什么区别？
05、介绍一下你对浏览器内核的理解？
06、常见的浏览器内核有哪些？
07、html5有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？
08、如何区分HTML和HTML5？
09、简述一下你对HTML语义化的理解？
10、HTML5的离线储存怎么使用，工作原理能不能解释一下？
三、CSS类的题目
01、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
02、CSS选择符有哪些？哪些属性可以继承？
03、CSS优先级算法如何计算？
04、CSS3新增伪类有哪些？
05、如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？
06、display有哪些值？说明他们的作用。
07、position的值relative和absolute定位原点是？
08、CSS3有哪些新特性？
09、请解释一下CSS3的Flexbox(弹性盒布局模型),以及适用场景？
10、用纯CSS创建一个三角形的原理是什么？
四、JavaScript类的题目
01、JavaScript中this是如何工作的
02、请解释原型继承的原理。
03、什么是闭包(closure)，如何使用它，为什么要使用它？
04、.call 和.apply的区别是什么？
05、请指出JavaScript 宿主对象(host objects) 和原生对象(native objects) 的区别？
06、请指出以下代码的区别：function Person(){}、var person = Person()、var person = new Person()？
07、请解释变量声明提升(hoisting)。
08、什么是 “use strict”; ？ 使用它的好处和坏处分别是什么？
09、什么是事件循环 (event loop)？
10、请解释同步 (synchronous) 和异步 (asynchronous) 函数的区别。
五、开发及性能优化类题目
01、如何规避javascript多人开发函数重名问题？
02、请说出三种减低页面加载时间的方法.
03、说说你所了解到的Web攻击技术。
04、说说你说了解的前端性能优化方法？
05、前端开发中，如何优化图像？图像格式的区别？
06、浏览器是如何渲染页面的？
07、页面重构怎么操作？
08、什么叫优雅降级和渐进增强？
09、前端需要注意哪些SEO？如何做SEO优化？
10、平时如何管理你的项目？
F. 前端面试题目汇总（一年经验）
部分题目 有些面试完忘记了，面试真的不能安排太紧凑啊，脑子完全不够用，血的教训😂
寒冬期前端准备总结---JS篇
寒冬期前端准备总结---浏览器篇
寒冬期前端准备总结---服务器和网络篇
寒冬期前端准备总结---CSS篇
寒冬期前端准备总结---框架篇
寒冬期前端准备总结---算法篇
（当时一个下午现场面试两家，累趴了，这家面的很差）
G. web前端面试经常问到的面试题有哪些
Web前端经常被问到的面试题及答案
一、HTML+CSS
1.对WEB标准以及W3C的理解与认识
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外
链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维
护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;
2.xhtml和html有什么区别
HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。
3.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
用于声明文档使用那种规范(html/Xhtml)一般为 严格 过度 基于框架的html文档
加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug
4.行内元素有哪些?块级元素有哪些?CSS的盒模型?
块级元素：div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css盒模型:内容，border ,margin，padding
5.CSS引入的方式有哪些? link和@import的区别是?
内联 内嵌 外链 导入
区别 ：同时加载
前者无兼容性，后者CSS2.1以下浏览器不支持
Link 支持使用javascript改变样式，后者不可
6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?
标签选择符 类选择符 id选择符
继承不如指定 Id>class>标签选择
后者优先级高
7.前端页面有哪三层构成，分别是什么?作用是什么?
结构层 Html 表示层 CSS 行为层 js
8.css的基本语句构成是?
选择器{属性1:值1;属性2:值2;……}
9.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?
Ie(Ie内核) 火狐(Gecko) 谷歌(webkit) opear(Presto)
二、Javascript
1.javascript的typeof返回哪些数据类型
Object number function boolean underfind
2.例举3种强制类型转换和2种隐式类型转换?
强制(parseInt,parseFloat,number)
隐式(== – ===)
3.split() join() 的区别
前者是切割成数组的形式，后者是将数组转换成字符串
4.数组方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部删除
Unshift()头部添加 shift()头部删除
5.事件绑定和普通事件有什么区别
6.IE和DOM事件流的区别
1.执行顺序不一样、
2.参数不一样
3.事件加不加on
4.this指向问题
7.IE和标准下有哪些兼容性的写法
Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target
8.ajax请求的时候get 和post方式的区别
一个在url后面 一个放在虚拟载体里面
有大小限制
安全问题
应用不同 一个是论坛等只需要请求的，一个是类似修改密码的
9.call和apply的区别
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
10.ajax请求时，如何解释json数据
使用eval parse 鉴于安全性考虑 使用parse更靠谱
11.b继承a的方法
12.写一个获取非行间样式的函数
function getStyle(obj,attr,value)
{
if(!value)
{
if(obj.currentStyle)
{
return obj.currentStyle(attr)
}
else
{
obj.getComputedStyle(attr,false)
}
}
else
{
obj.style[attr]=value
}
}