大家好，我是梅巴哥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，要学会引导，让别人往自己精通的领域去问。