前端经典问题总结，来看看你都会哪些？有哪些问题也很经典，但是还没提到的，评论回复我哦~！

大家好，我是梅巴哥er。本篇对前端的一些经常被问到的经典问题进行总结。
为便于学习，将对问题大致做如下分类（可能不是很准确，仅供参考用）：

• HMTL问题用H来标注
• CSS问题用C来标注
• JS问题用J来标注
• ES问题用E来标注
• Node等后端问题用N来标注
• React等框架问题用R来标注
• Webpack等打包工具问题用W来标注
• Ajax等接口方面的问题，用A来标注
• 其他问题用Q来标注

问题总结如下：

• N1.说一下http和https
• N2，tcp三次握手，一句话概括
• N3，tcp和udp的区别
• Q4，websocket的实现和应用
• N5，http请求方式，head方式
• Q6，一个图片url访问后直接下载怎样实现
• E7，讲几个很实用的BOM属性对象方法
• H8，说一下html5 drag api
• N9，说一下http2.0
• N10，补充400和401/403状态码
• A11，fetch发送2次请求的原因
• N12，cookie，sessionSorage，localStorage的区别
• Q13，说一下web worker
• H14，对html语义化标签的理解
• Q15，iframe是什么？有什么缺点
• H16，Doctype的作用是什么？严格模式与混杂模式如何区分？它们有何意义？
• N17，Cookie如何防范XSS攻击？
• N18，cookie和session的区别
• Q19，一句话概括RESTFUL
• Q20，讲讲viewport和移动端布局
• J21，click在ios上有300ms延迟，原因及如何解决？
• J22，addEventListener参数
• N23，介绍一下知道的http返回的状态码
• N24，http常用的请求头
• Q25，强缓存/协商缓存
• Q26，前端优化涉及哪些知识点
• N27，GET和POST的区别
• N28，http支持的请求方法
• C29，如何画一个三角形
• Q30，说一下浏览器缓存
• H31，HMTL5新增的元素
• Q32，在地址栏里输入一个URL，到这个页面呈现出来，中间会发生什么？
• N33，http2.0的特性
• Q34，浏览器在生成页面的时候，会生成哪两棵树？
• Q35，csrf和xss的网络攻击及防范
• Q36，怎么看网站的性能如何
• N37，介绍http协议（特征）
• N38，知道304吗，什么时候用304？
• Q39，具体有哪些请求头是跟缓存相关的？
• N40，cookie有哪些字段可以设置？
• Q41，html5和css3用的多吗？你了解它们的新属性吗？有在项目中用过吗？
• Q42，web性能优化
• Q43，浏览器缓存机制
• C44，说一下css盒模型
• C45，画一条0.5px的线
• H46，link标签和import标签的区别
• Q47，transition和animation的区别
• C48，Flex布局
• C49，垂直居中的方法
• Q50，关于js动画和css3动画的差异性
• H51，讲一下块元素和行元素
• C52，visibility=hidden, opacity=0, display=none，三者有何区别
• C53，双边距重叠问题
• C54，position属性比较
• C55，清除浮动的方法
• C56，css选择器有哪些，优先级排序怎么排？
• C57，如何实现图片在某个容器中居中摆放？
• C58，如何实现元素的垂直居中？
• C59，float的元素，它的display的属性是什么？
• C60，隐藏页面中某个元素的方法有哪些
• C61，三栏布局的实现方式，尽可能多写。浮动布局时，三个div的生成顺序有没有影响？
• Q62，什么是BFC？
• C63，calc属性
• C64，display：table和本身的table有什么区别？
• C65，z-index的定位方法
• C66，如果想要改变一个DOM元素的字体颜色，不在它本身上进行操作？
• C67，用的最多的css属性是啥？
• C68，line-height和height的区别
• C69，设置一个元素的背景颜色，背景颜色会填充哪些区域？
• C70，用css实现一个硬币旋转的效果
• C71，了解重绘和重排吗，知道怎么去减少重绘和重排吗，让文档脱离文档流有哪些方法
• C72，CSS画正方体，三角形
• C73，overflow的原理
• C74，box-sizing的语法和基本用处
• C75，flex布局
• C76，css预处理器有什么
• N77，get请求传参长度的误区
• N78，补充get和post请求在缓存方面的区别
• E79，说一下闭包
• E80，说一下类的创建和继承
• E81，如何解决异步回调地狱
• J82，说说前端中的事件流
• J83，如何让事件先冒泡后捕获
• J84，说一下事件委托
• Q85，说一下图片的懒加载和预加载
• J86，mouseover和mouseenter的区别
• J87，js的new操作符做了哪些事情
• E88，改变函数内部this指针的指向函数（bind，apply，call的区别）
• J89，js的各种位置，比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别？
• J90，js拖拽功能的实现
• J91，异步加载js的方法
• A92，Ajax解决浏览器缓存问题
• J93，js的节流和防抖
• J94，JS中的垃圾回收机制
• Q95，eval是做什么的
• Q96，如何理解前端模块化
• ES97，说一下Commonjs、AMD和CMD
• J98，对象深度克隆的简单实现
• J99，实现一个once函数，传入函数参数只执行一次
• A100，将原生的ajax封装成promise
• J101，js监听对象属性的改变
• E102，如何实现一个私有变量，用getName方法可以访问，不能直接访问
• J103， == 和 ===、以及Object.is的区别
• J104，setTimeout、setInterval和requestAnimationFrame之间的区别
• E105，自己实现一个bind函数
• J106，用setTimeout来实现setInterval
• J107，js怎么控制一次加载一张图片，加载完后再加载下一张
• E108，代码的执行顺序的考查

// 写出如下代码的输出结果
setTimeout(function(){
     console.log(1)},0);
new Promise(function(resolve,reject){
     
console.log(2);
resolve();
}).then(function(){
     console.log(3)
}).then(function(){
     console.log(4)});
process.nextTick(function(){
     console.log(5)});
console.log(6);

• E109，如何实现sleep的效果（es5或者es6）
• E110，简单的实现一个promise
• J111，Function.proto(getPrototypeOf)是什么？
• J112，实现js中所有对象的深度克隆（包装对象，Date对象，正则对象）
• N113，简单实现Node的Events模块
• E114，箭头函数中this指向举例
• J115，js判断类型的方法有哪些
• J116，数组常用方法有哪些
• J117，数组去重如何做
• E118，闭包 有什么用
• J119，事件代理在捕获阶段的实际应用
• J120，去除字符串首尾空格的方法有哪些，说出尽可能多的方法
• Q121，有哪些方面可以做到性能优化
• J122，能来讲讲JS的语言特性吗
• J123，如何判断一个数组(讲到typeof差点掉坑里)
• J124，你说到typeof，能不能加一个限制条件达到判断条件
• J125，JS如何实现跨域，都有哪些方法
• J126，Js基本数据类型
• J127，js深度拷贝一个元素的具体实现，写代码
• E128，之前说了ES6 set可以数组去重，是否还有其他的数组去重的方法
• J129，JS怎么实现全排列的算法，试写一段代码来实现。（全排列就是给定一个字符串，输出该字符串所有排列的可能。如输入“abc”，输出“abc,acb,bca,bac,cab,cba”。）
• E130，迄今为止，用过哪些ES6的知识
• Q131，跨域的原理是什么
• J132，不同数据类型的值的比较，是怎么转换的，有什么规则
• J133，null == undefined，为什么？
• E134，this的指向 哪几种
• E135，什么是暂时性死区？或者什么叫暂停死区？
• J136，写一个深度拷贝的代码
• Q137，有一个游戏叫做Flappy Bird，就是一只小鸟在飞，前面是无尽的沙漠，上下不断有钢管生成，你要躲避钢管。然后小明在玩这个游戏时候老是卡顿甚至崩溃，说出原因（3-5个）以及解决办法（3-5个）。这是一个关于解决实际问题的能力考查。
• J138，什么是按需加载
• J139，说一下什么是virtual dom
• W140，webpack用来干什么的
• Q141，ant-design优点和缺点
• E142，JS中继承实现的几种方式
• J143，写一个函数，第一秒打印1，第二秒打印2 。（用尽可能多的方法实现）
• R144，讲讲vue的生命周期（或者react生命周期）。
• J145，简单介绍一下symbol
• J146，什么是事件监听
• E147，介绍一下promise，及其底层如何实现
• J148，说说C++,Java，JavaScript这三种语言的区别
• J149，js原型链，原型链的顶端是什么？Object的原型是什么？Object的原型的原型是什么？在数组原型链上实现删除数组重复数据的方法。
• E150，什么是js的闭包？有什么作用，用闭包写个单例模式
• E151，promise+Generator+Async的使用
• J152，讲讲事件委托以及冒泡的原理
• J153，写个函数，可以转化下划线命名到驼峰命名
• J154，深浅拷贝的区别和实现
• J155，JS中string的startwith和indexof两种方法的区别
• J156，js字符串转数字的方法
• E157，let const var的区别 ，什么是块级作用域，如何用ES5的方法实现块级作用域（立即执行函数），ES6 呢
• E158，ES6箭头函数的特性
• E159，setTimeout和Promise的执行顺序考查。请写出如下代码的执行结果。

setTimeout(function() {
     
console.log(1)
}, 0);
new Promise(function(resolve, reject) {
     
console.log(2)
for (var i = 0; i < 10000; i++) {
     
if(i === 10) {
     console.log(10)}
i == 9999 && resolve();
}
console.log(3)
}).then(function() {
     
console.log(4)
})
console.log(5);

• J160，有了解过事件模型吗，DOM0级和DOM2级有什么区别，DOM的分级是什么
• J161，平时是怎么调试JS的
• J162，JS的基本数据类型有哪些，基本数据类型和引用数据类型的区别，NaN是什么的缩写，JS的作用域类型，undefined==null返回的结果是什么，undefined与null的区别在哪，写一个函数判断变量类型
• J163，setTimeout(fn,100);100毫秒是如何权衡的
• E164，写一个newBind函数，完成bind的功能
• J165，怎么获得对象上的属性：比如说通过Object.key（）
• E166，简单讲一讲ES6的一些新特性
• E167，call和apply是用来做什么的？
• J168，了解事件代理吗，这样做有什么好处
• Q169，如何使不同页面之间进行通信
• E170，如何写一个继承？
• J171，给出以下代码，输出的结果是什么？原因？ for(var i=0;i<5;i++) { setTimeout(function(){ console.log(i); },1000); } console.log(i)
• E172，给两个构造函数A和B，如何实现A继承B？
• E173，如果已经有三个promise，A、B和C，想串行执行，该怎么写？
• Q174，知道private和public吗
• E175，async和await具体该怎么用？
• E176，知道哪些ES6，ES7的语法
• J177，js加载过程阻塞，解决方法
• J178，js对象类型，基本对象类型以及引用对象类型的区别
• J179，JavaScript中的轮播实现原理？假如一个页面上有两个轮播，你会怎么实现？
• J180，写一段代码，来计算输入的一个年份中有多少周
• E181，面向对象的继承方式
• J182，引用类型常见的对象
• E183，讲讲class类
• E184，箭头函数和function有什么区别
• J185，assign的深拷贝
• J186，arguments
• J187，Eventloop
• J188，jquery源代码考查
• J189， 给定jquery的一个方法，讲讲它的实现原理
• C190，bootstrap清除浮动的方法
• C191，请你说一下Bootstrap
• J192，关于dom的api有什么
• A193，ajax返回的状态
• A194，实现一个Ajax，需要什么样的流程
• A195，如何实现ajax请求，假如我有多个请求，我需要让这些ajax请求按照某种顺序一次执行，有什么办法呢？如何处理ajax跨域
• A196，写出原生Ajax
• A197，如何实现一个ajax请求？如果我想发出两个有顺序的ajax需要怎么做？
• Q198，移动应用和web应用的关系
• Q199，知道PWA吗
• Q200，做过移动端吗
• J201，知道touch事件吗
• Q202，移动端的DEMO什么的有没有做过点的
• W203，webpack和gulp区别（模块化与流的区别）
• R204，redux用处
• R205，redux里常用方法
• R206，前端流行框架的考查。说说vue react angularjs jquery的区别
• N207，node的事件方法讲讲看
• N208，node的特性，适合处理什么场景
• N209，你有用到Express,讲讲Express
• E210，promise的状态有那些
• J211， 数组移除第一个元素的方法有哪些？
• R212，介绍一下react（或vue等，以下同）
• R213，React单项数据流
• R214，react生命周期函数和react组件的生命周期
• R215，react和Vue的原理，区别，亮点，作用
• R216，reactJs的组件交流（父子组件之间的交流，和非父子关系的组件交流）
• R217，有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢
• R218，项目里用到了react，为什么要选择react，react有哪些好处
• R219，怎么获取真正的dom
• R220，setState之后的流程
• R221，react高阶组件知道吗？
• R222，React的jsx，函数式编程
• R223，react的组件是通过什么去判断是否刷新的
• N224，HTTP缓存机制
• Q225，websocket和ajax的区别是什么，websocket的应用场景有哪些
• Q226，知道什么跨域方式吗，jsonp具体流程是什么，如何实现原生Jsonp封装，优化，对于CORS，服务器怎么判断它该不该跨域呢
• N227，怎么生成token，怎么传递
• Q228， 二叉树层序遍历
• Q229，B树的特性，B树和B+树的区别
• E230，尾递归
• E231，如何写一个大数阶乘？递归的方法会出现什么问题？
• J232，把多维数组变成一维数组的方法
• Q233，知道的排序算法有哪些， 说一下冒泡快排的原理
• Q234，说一下你了解的数据结构和它们的区别
• Q235，几种常见的排序算法，手写
• J236，数组的去重，尽可能写出多个方法
• J237，如果有一个大的数组，都是整型，怎么找出最大的前10个数
• J238，知道数据结构里面的哪些常见的数据结构
• J239，找出数组中第k大的数组出现多少次，比如数组【1，2，4，4，3，5】第二大的数字是4，出现两次，所以返回2 。（考查实际代码操作，这块是考查比重最大的）
• J240，合并两个有序数组
• J241， 给一个数，去一个已经排好序的数组中寻找这个数的位置（通过快速查找，二分查找）
• J242，有一个矩形，用一个矩形（这个矩形和上个矩形没有任何关系）去裁剪原来那个矩形，剩下的部分，怎么用一个线分成两个面积相等的部分
• Q243，作为前端开发，如果遇到资源无法加载，会是什么问题，如何解决（考查实操场景）
• 244，（以下是常见的hr问题）介绍一下前端的学习经历
• 245，为什么选择前端
• 246，作为一个专业的前端，你觉得应该掌握哪些知识
• 247，什么时候接触前端
• 248，大学学过哪些编程的课
• 249，对未来三年职业的规划
• 250，你一般是通过什么方式学习前端的？
• 251，你还有什么我没问到的优势吗
• 252，看过什么书
• 253，简单的介绍一下你自己，你知道哪些技术
• 254， 你为什么学前端，以及你学前端怎么坚持下来的
• 255，你认为一名前端工程师应该具备什么特点？一般是和产品，ui沟通做页面还是直接把图
• 256，如果直接按照图来做，有没有遇到过页面上实现不了的功能？遇到这样的问题怎么进行处理？
• 257，看书的话，你是怎么判断书上的知识一定是对的？
• 258，学过哪些框架？
• 259，到现在为止接触过几个项目，有在哪里实习过？
• 260，必定考查的是前端基础知识和算法，越是大厂，问到的底层实现就越多。去大厂的决定因素是完成的项目质量和算法深入程度。
• 261，对熟悉、了解和精通等词汇，要合理运用，比如熟悉jq，了解css，精通html（哈哈哈哈）。不要乱用，因为实际被问的时候，会根据你的了解程度来问问题。
• 262，要学会引导，让别人往自己精通的领域去问。