# 前端技术面试题(Web QA)

提示

题目源自网络。答案仅是个人见解，欢迎斧正。

# 📁HTML

# ❓ html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？#27

# ❓ iframe的优缺点？#28

# ❓ HTML与XHTML——二者有什么区别 #21

# ❓ 你知道多少种Doctype文档类型？ #20

# ❓ Doctype作用? 严格模式与混杂模式如何区分？它们有何意义? #19

# ❓ 说说你对语义化的理解？#18

# ❓ 对`<meta></meta>`标签有什么理解 #86

# ❓ 关于SVG，内联SVG标签与Image标签引入SVG有何区别？#107

# ❓ Doctype作用? 严格模式与混杂模式如何区分？它们有何意义? #118

# 📁CSS

# ❓ IE 8以下版本的浏览器中的盒模型有什么不同 #25

# ❓ 浮动元素引起的问题和解决办法？#24

# ❓ 解释下浮动和它的工作原理？清除浮动的技巧 #23

# ❓ 常见兼容性问题？ #22

# ❓ 为什么要初始化CSS样式。#15

# ❓ CSS3有哪些新特性？#14

# ❓ 列出display的值，说明他们的作用。position的值， relative和absolute分别是相对于谁进行定位的？#13

# ❓ CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？#12

# ❓ 介绍一下CSS的盒子模型？#11

# ❓ position的absolute与fixed共同点与不同点 #10

# ❓ CSS中 link 和@import 的区别是？#9

# ❓ display:none和visibility:hidden的区别？#8

# ❓ 解释下 CSS sprites，以及你要如何在页面或网站中使用它。 #17

# ❓ 对BFC规范的理解？#16

# ❓ CSS样式覆盖规则 #80

# ❓ CSS3新增了很多的属性，下面一起来分析一下新增的一些属性 #84

# ❓ 阐述清除浮动的几种方式（常见问题）#72

# ❓ 写一个左中右布局占满屏幕，其中左右两块是固定宽度200 ，中间自适应宽，要求先加载中间块，请写出结构及样式：#71

# ❓ 一个200*200的div在不同分辨率屏幕上下左右居中，用css实现#70

# ❓ 分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景#134

# ❓ css sprite 是什么,有什么优缺点#135

# ❓ link与@import的区别#136

# ❓ display: block;和display: inline;的区别#137

# ❓ 容器包含若干浮动元素时如何清理浮动#138

# ❓ PNG,GIF,JPG 的区别及如何选#139

# ❓ display,float,position 的关系#140

# ❓ 如何水平居中一个元素#141

# 📁JS

# ❓Javascript有哪七种内置数据类型？#1

null、undefined、boolean、number、string、object、symbol

# ❓对于这些类型的判断，常用的方法有哪些？#2

typeof、instanceof、Object.prototype.toString、constructor

# ❓全局环境下的`this`、箭头函数的`this`、构造函数的this等各是什么？一句话阐明。#3

谁调用它，this就指向谁。

# ❓目前各大浏览器较新版本都开始支持ES模块了，如果要在浏览器中使用原生ES模块方案，需要在什么标签上添加什么属性？#4

只需要在script标签上添加type="module"属性就可以了。

# ❓ Js数组的拷贝 #5

# ❓ JavaScript中的浅拷贝与深拷贝 #108

# ❓ JS 科学计数法转换为正常数值 #6

# ❓ DOM操作——怎样添加、移除、移动、复制、创建和查找节点。#26

# ❓ 异步加载和延迟加载 #52

# ❓ ajax过程 javascript #51

# ❓ javascript继承的6种方法 #50

# ❓ javascript对象的几种创建方式 #49

# ❓ 性能优化的方法？ #46

# ❓ 对Node的优点和缺点提出了自己的看法？ #45

# ❓ 什么叫优雅降级和渐进增强？ #44

# ❓ 如何判断当前脚本运行在浏览器还是node环境中？ #43

# ❓ JavaScript中的作用域与变量声明提升？ #42

# ❓ 哪些操作会造成内存泄漏？ #41

# ❓ .call() 和 .apply() 的区别和作用？ #40

# ❓ documen.write和 innerHTML的区别 #39

# ❓ 如何解决跨域问题? #38

# ❓ js延迟加载的方式有哪些？ #37

# ❓ new操作符具体干了什么呢? #36

# ❓ null和undefined的区别？ #35

# ❓ 线程与进程的区别 #31

# ❓ bootstrap响应式实现的原理 #78

# ❓ px和em的区别 #77

# ❓ http 和 https 有何区别？如何灵活使用？#76

# ❓ Javascript中的定时器有哪些？他们的区别及用法是什么？#74

# ❓ 拖拽会用到哪些事件#73

# ❓ js操作获取和设置cookie#69

# ❓ js数组去重#68

# ❓ 如何获取UA？#67

# ❓ js对象的深度克隆 #65

# ❓ ajax 是什么?ajax 的交互模型?同步和异步的区别?如何解决跨域问题? #64

# ❓ js异步执行的四种方式 #106

# ❓ IE与火狐的事件机制有什么区别？如何阻止冒泡？#63

# ❓ JavaScript原型，原型链 ? 有什么特点？#62

# ❓ 写一个通用的事件侦听器函数?#61

# ❓ eval是做什么的？#60

# ❓ 哪些地方会出现css阻塞，哪些地方会出现js阻塞？#59

# ❓ GET和POST的区别，何时使用POST？#58

# ❓ 为什么要有同源限制？#57

# ❓ 请解释一下 JavaScript 的同源策略。#56

# ❓ Flash、Ajax各自的优缺点，在使用中如何取舍？#55

# ❓ javascript里面的继承怎么实现，如何避免原型链上面的对象共享 #54

# ❓ attribute和property的区别是什么 #102

# ❓ 编写一个方法求一个字符串的字节长度 #101

# ❓ 实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制 #100

# ❓ defer和async #99

# ❓ setTimeout、Promise、Async/Await 的区别 #115

# ❓ 快速排序的思想并实现一个快排？ #97

# ❓ 栈和堆的区别？ #96

# ❓ 栈和队列的区别? #95

# ❓ TCP和UDP的区别 #93

# ❓ 说说TCP传输的三次握手四次挥手策略 #92

# ❓ XML和JSON的区别？ #91

# ❓ jquery中.get()提交和.post()提交有区别吗？ #90

# ❓ $(document).ready()方法和window.onload有什么区别？ #89

# ❓ 判断一个字符串中出现次数最多的字符，统计这个次数 #88

# ❓ JavaScript中如何检测一个变量是一个String类型？请写出函数实现 #87

# ❓ jQuery的事件委托方法bind 、live、delegate、on之间有什么区别？ #83

# ❓ 请解释JSONP的工作原理，以及它为什么不是真正的AJAX。 #82

# ❓ 什么是闭包，如何使用它，为什么要使用它？ #81

# ❓ 关于JS事件冒泡与JS事件代理（事件委托） #79

# ❓ SERVLET API中forward() 与redirect()的区别？#104

# ❓ javascript 一个复杂的对象，怎么通过value获取到key #109

# ❓ 什么是防抖和节流？有什么区别？如何实现？ #110

# ❓ get请求传参长度的误区、get和post请求在缓存方面的区别 #111

# ❓ 定时器的执行顺序或机制？ #116

# ❓ `['1','2','3'].map(parseInt)` 输出什么,为什么? #117

# ❓ fetch发送2次请求的原因 #119

# ❓ var与let区别 #142

# ❓ 如何从浏览器的URL中获取查询字符串参数? #146

# ❓ JavaScript里函数参数arguments是数组吗？ #147

# ❓ 如何用JavaScript动态创建link标签到head里？#148

# ❓ 如何用javascript 动态脚本添加script标签到body里？#149

# ❓ js如何将两个对象合并成一个对象？#150

# ❓ JS中的位置和宽度：clientWidth、offsetWidth、scrollWidth等区别？#154

# ❓ typeof运算符和instanceof运算符以及isPrototypeOf()方法的区别#156

# ❓ 如何将相同属性的数组对象合并并统计个数？#157

# ❓ JS中的“use strict” 严格模式#158

# ❓ JS 对象排序，根据对象的某一属性 #161

# ❓ js实现字符串全部替换的方法 #162

# ❓ 如何删除CSS属性#163

# ❓ 如何快速创建数组#164

# ❓ 查找数组中某个元素（多次）出现的位置#165

# ❓ 查找数组最大值#166

# ❓ 查找数组最小值#167

# ❓ 按照指定长度分割（一维）数组（成二维数组）#168

# ❓ 检查数组中某元素出现的次数#169

# ❓ 扁平化数组(多维数组并成一维数组)#170

# ❓ 对比两个数组并且返回其中不同的元素#171

# ❓ 对比两个数组并且返回其中相同的元素#172

# ❓ 正则表达式#173

# ❓ 数组从右删除 n 个元素#174

# ❓ 截取数组第一个符合条件的元素及其以后的元素#175

# ❓ 返回数组中下标间隔 nth 的元素#176

# ❓ 返回数组中第 n 个元素（支持负数）#177

# ❓ 返回数组头元素和末尾元素#178

# ❓ 数组乱排#180

# ❓ web上失去焦点和获取焦点事件#181

# ❓ 伪数组转换为数组#182

# ❓ 判读浏览器是否支持 CSS 属性#183

# ❓ 获取当前网页地址#184

# ❓ js监听div元素的宽高变化#185

# ❓ 获取滚动条位置#186

# ❓ 怎么让Chrome支持小于12px 的文字？#187

# ❓ 获取 url 中的参数#188

# ❓ 页面跳转，是否记录在 history 中#189

# ❓ 滚动条回到顶部带动画#190

# ❓ 复制文本到剪贴板#191

# ❓ 检测设备类型#192

# ❓ 时间戳转换为时间 #193

# ❓ 获取当前时间戳 #194

# ❓ 固定滚动条 #195

# ❓ 判断当前位置是否为页面底部 #196

# ❓ 判断元素是否在可视范围内 #197

# ❓ 进入全屏/退出全屏/全屏事件 #198

# ❓ 数字千分位分割 #199

# ❓ 生成随机数 #200

# ❓ 获取元素 css 样式 #201

# ❓ XSS与CSRF有什么区别吗？ #202

# ❓ 为什么要初始化CSS样式？ #203

# ❓ 写一个通用的事件侦听器函数? #204

# ❓ JS事件委托 #205

# ❓ js 查询div所有父元素 #206

# ❓ AMD和CMD的区别？ #207

# ❓ js 汉字转Unicode #209

# ❓ 获取网站的图标 #210

# ❓ 写一个等分字符串的方法 #211

# ❓ js在字符串的指定位置插入新的字符 #212

# ❓ setTimeout 和 setInterval区别 #224

# ❓ && 运算符能做什么 #234

# ❓ || 运算符能做什么 #235

# ❓ event.preventDefault() 和 event.stopPropagation()方法之间有什么区别？ #240

# ❓ 如何知道是否在元素中使用了`event.preventDefault()`方法？ #241

# ❓ 什么是 event.target ？ #242

# ❓ 什么是 event.currentTarget？ #243

# ❓ == 和 === 有什么区别？ #244

# ❓ 为什么在 JS 中比较两个相似的对象时返回 false？ #245

# ❓ !! 运算符能做什么？ #246

# ❓ 如何在一行中计算多个表达式的值？ #247

# ❓ 什么是提升？ #248

# ❓ 什么是作用域？ #249

# ❓ JavaScript 中的虚值是什么？如何检查值是否虚值？ #250

# ❓ JS实现颜色的10进制转化成rgba格式的方法 #251

# ❓ 对象的 prototype(原型) 是什么？ #252

# ❓ 什么是 IIFE，它的用途是什么？ #253

# ❓ Function.prototype.apply 方法的用途是什么？ #254

# ❓ Function.prototype.call 方法的用途是什么？ #255

# ❓ Function.prototype.apply 和 Function.prototype.call 之间有什么区别？ #256

# ❓ Function.prototype.bind 的用途是什么？ #257

# ❓ 什么是函数式编程? JavaScript 的哪些特性使其成为函数式语言的候选语言？ #258

# ❓ 什么是高阶函数？ #259

# ❓ 为什么函数被称为一等公民？ #260

# ❓ 手动实现 Array.prototype.map 方法 #261

# ❓ 手动实现 Array.prototype.filter 方法 #262

# ❓ 手动实现 Array.prototype.reduce 方法 #263

# ❓ arguments 的对象是什么？ #264

# ❓ 页面导入样式时，使用link和@import有什么区别？ #265

# ❓ 如何创建一个没有 prototype(原型)的对象？ #266

# ❓ 为什么在调用这个函数时，代码中的`b`会变成一个全局变量? #267

# ❓ ECMAScript 是什么？ #268

# ❓ ES6或ECMAScript 2015有哪些新特性？ #269

# ❓ 什么是`Set`对象，它是如何工作的？ #275

# ❓ 什么是回调函数？ #276

# ❓ Promise 是什么？ #277

# ❓ 什么是 `async/await` 及其如何工作？ #278

# ❓ 什么是包装对象（wrapper object）？ #281

# ❓ 隐式和显式转换有什么区别？ #282

# ❓ 什么是NaN？以及如何检查值是否为NaN？ #283

# ❓ 如何判断值是否为数组？ #284

# ❓ 如何在不使用`%`模运算符的情况下检查一个数字是否是偶数？ #285

# ❓ 如何检查对象中是否存在某个属性？ #286

# ❓ 如何在 JS 中创建对象？ #287

# ❓ Object.seal 和 Object.freeze 方法之间有什么区别？ #288

# ❓ `in` 运算符和 `Object.hasOwnProperty` 方法有什么区别？ #289

# ❓ 函数表达式和函数声明之间有什么区别？ #290

# ❓ 调用函数，可以使用哪些方法？ #291

# ❓ 为什么typeof null 返回 object？如何检查一个值是否为 null？ #292

# ❓ new 关键字有什么作用？ #293

# ❓ Object.freeze() 和 const 的区别是什么？ #295

# ❓ 如何在js"深冻结"对象？ #296

# ❓ 在 JavaScript 中定义函数的14种方法 #297

# ❓ 什么是类数组对象？ #298

# ❓ 传递两个参数m，n，返回长度为m，所有元素都为n的数组，要求不能用循环 #299

# ❓ Array的join、push、splice、slice各有何用途，splice与slice有何异同？ #300

# ❓ 如何优雅的取随机字符串 #301

# ❓ 匿名函数自执行 #302

# ❓ 如何优雅的取整 #303

# ❓ 如何优雅的实现金钱格式化：1234567890 --> 1,234,567,890 #304

# ❓ 实现标准JSON的深拷贝 #305

# ❓ 最短的代码实现数组去重 #306

# ❓ 类数组转化为数组 #307

# ❓ 图片懒加载 #308

# ❓ 滚动加载 #309

# ❓ 渲染几万条数据不卡住页面 #310

# ❓ 打印出当前网页使用了多少种HTML元素 #311

# ❓ js中判断两个数组是否相等 #312

# ❓ 获取div相对文档的位置 #313

# ❓ 由平面圆弧上两点坐标及圆半径，计算圆心坐标 #314

# ❓ 计算两个向量的夹角（带方向） #316

# ❓ 实现链式调用 #317

# ❓ 两个数组求并集、差集 #318

# ❓ js对象中什么是可枚举性(enumerable)？ #319

# ❓ 实现一个call函数 #320

# ❓ 实现一个apply函数 #321

# ❓ 实现一个bind函数 #322

# ❓ instanceof的原理 #323

# ❓ Object.create的基本实现原理 #324

# ❓ new本质 #325

# ❓ 实现一个基本的Promise #326

# ❓ 实现一个基本的Event Bus #327

# ❓ js实现一个继承方法// 借用构造函数继承实例属性 #328

# ❓ 实现一个双向数据绑定 #329

# ❓ 实现一个简单路由 #330

# ❓ 实现懒加载 #331

# ❓ rem实现原理 #332

# ❓ 手写实现AJAX #333

# ❓ js实现拖拽 #334

# ❓ 实现一个节流函数 #335

# ❓ 实现一个防抖函数 #336

# ❓ 实现一个find函数，模拟原生的find函数，find(list, predicate)。 #338

# ❓ 去除富文本所有html标签 #345

# ❓ 实现回形遍历 #346

# 📁 模块化&ES5、ES6

# ❓ ES6的了解 #98

# ❓ 模块化发展历程 #112

# ❓ ES5的继承和ES6的继承有什么区别？ #114

# ❓ ES6下 `for-in` 循环的坑 #159

# ❓ JavaScript 中，class 能够创建一个类，function 也能创建一个类，两者创建的类有什么区别？#160

# ❓ Proxy是什么，有什么作用？ #223

# ❓ Map是什么，有什么作用？ #222

# ❓ Set是什么，有什么作用？ #221

# ❓ Symbol是什么，有什么作用？ #220

# ❓ 举一些ES6对Function函数类型做的常用升级优化? #219

# ❓ 举一些ES6对Object类型做的常用升级优化? #218

# ❓ 举一些ES6对Number数字类型做的常用升级优化? #217

# ❓ 举一些ES6对Array数组类型做的常用升级优化? #216

# ❓ 举一些ES6对String字符串类型做的常用升级优化? #215

# ❓ babel是什么，有什么作用? #214

# ❓ ES5、ES6和ES2015有什么区别? #213

# ❓ Reflect是什么，有什么作用？ #225

# ❓ Promise是什么，有什么作用？ #226

# ❓ Iterator是什么，有什么作用？ #227

# ❓ for...in 和for...of有什么区别 #228

# ❓ Generator函数是什么，有什么作用？ #229

# ❓ async函数是什么，有什么作用？ #230

# ❓ Class、extends是什么，有什么作用？ #231

# ❓ module、export、import是什么，有什么作用？ #232

# ❓ 日常前端代码开发中，有哪些值得用ES6去改进的编程优化或者规范？ #233

# ❓ 什么是箭头函数？ #270

# ❓ 什么是类？ #271

# ❓ 什么是模板字符串？ #272

# ❓ 什么是对象解构？ #273

# ❓ 什么是 ES6 模块？ #274

# ❓ 展开(spread )运算符和剩余(Rest) 运算符有什么区别？ #279

# ❓ 什么是默认参数？ #280

# ❓ 什么时候不使用箭头函数? 说出三个或更多的例子？ #294

# ❓ 什么是Babel，Babel能做什么 #315

# 📁 node.js

# ❓ npm 模块安装机制，为什么输入 npm install 就可以自动安装对应的模块？ #113

# ❓ Node.js 如何接收用户输入 #208

# 📁 react、Vue

# ❓ 写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？ #131

# ❓ React 中 setState 什么时候是同步的，什么时候是异步的？#132

# ❓ 为什么虚拟dom会提高性能?#133

# 📁 http、浏览器对象

# ❓ HTTPS 握手过程中，客户端如何验证证书的合法性 #120

# ❓ TCP三次握手和四次挥手 #121

# ❓ img iframe script 来发送跨域请求有什么优缺点？ #122

# ❓ http和https的区别？ #123

# ❓ 什么是Bom？有哪些常用的Bom属性？ #124

# ❓ 请描述一下 cookies sessionStorage和localstorage区别 #75

# ❓ Cookie如何防范XSS攻击 #126

# ❓ 浏览器和 Node 事件循环的区别？ #127

# ❓ 简述HTTPS中间人攻击 #128

# ❓ 你了解的浏览器的重绘和回流导致的性能问题 #130

# ❓ CS和BS 到底是什么 #143

# ❓ OM 是什么？ #236

# ❓ 什么是事件传播? #237

# ❓ 什么是事件冒泡？ #238

# ❓ 什么是事件捕获？ #239

# 📁 网站及优化

# ❓ 什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？ #34

# ❓ 请说出三种减少页面加载时间的方法。 #33

# ❓ 如何对网站的文件和资源进行优化？ #32

# ❓ webSocket如何兼容低浏览器？ #30

# ❓ 从输入url到显示页面，都经历了什么 #85

# ❓ 网站重构的理解？#66

# ❓ 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？ #48

# ❓ http状态码有那些？分别代表是什么意思？ #47

# ❓ 说几条web前端优化策略 #129

# ❓ 为什么利用多个域名来提供网站资源会更有效？ #145

# 📁 网络及安全

# ❓ 前端安全问题？#53

# ❓ sql注入原理 #94

# ❓ 说说网络分层里七层模型是哪七层 #103

# 📁 存储

# ❓ 谈谈Cookie的优点和弊端 #7

# ❓ 彻底理解cookie，session，token #144

# ❓ 如何实现浏览器内多个标签页之间的通信? #29

# 📁 H5移动端适配

# ❓ 移动端唤起app #151

# ❓ 取消input在ios下，输入的时候英文首字母的默认大写 #152

# ❓android 上去掉语音输入按钮 #153

# 📁 其他面经库/知识库

markyun/My-blog

javascript-questions

前端面试每日 3+1（每日三问）haizlin/fe-interview

cucygh/fe-material cucygh/fe-material

helloyoucan/knowledge

JavaScript 进阶问题列表 javascript-questions

CSS 奇技淫巧 chokcoco/iCSS

笔试面试知识整理 HIT-Alibaba/interview

前端开发面试题大收集，前端面试集锦 paddingme/Front-end-Web-Development-Interview-Question

学习前端小帮手：系统学习 JavaScript 的每一个知识点 LFB/frontend

字节、阿里、美团、滴滴、腾讯等大厂高级前端面试题整理 Jack-cool/fe_interview

前端面试interview的Js题目收集，持续更新，勿浅尝辄止 nieyafei/front-end-interview-js link

Almost complete answers to "Front-end Job Interview Questions" which you can use to interview potential candidates, test yourself or completely ignore. yangshun/front-end-interview-handbook

Help the front End community to rock interview. khan4019/front-end-Interview-Questions link

前端面试复习笔记. CavsZhouyou/Front-End-Interview-Notebook link

A list of interview for front-end developer(前端开发者面试清单). Advanced-Interview-Question/front-end-interview link

前端面试必备题库，1000+面试真题，Html、Css、JavaScript、Vue、React、Node、TypeScript、Webpack、算法、网络与安全、浏览器. lgwebdream/FE-Interview link

前端乐园 abc-club/js-paradise link

本仓库是自己总结的前端开发一些基础知识，包括html5，css3， canvas， jQuery， less ，ES6， webpack，Vue等，同时也是自己工作中的踩坑总结，适合想要学习前端开发的伙伴，你可以clone项目到本地，然后一步一步跟着我的demo敲，希望大家都能全栈。 pubdreamcc/web-study

总结了前端面试过程中浏览器，计算机网络，数据结构与算法，HTML，CSS，JS，Vue等相关的面试知识。 lf2021/Front-End-Interview

前端面试知识点总结 huyaocode/webKnowledge

前端基础知识汇总 su37josephxia/frontend-basic link

前端面试常考问题整理，按模块知识点分类 Front-end-Developer-Questions by Modules and knowledge poetries/FE-Interview-Questions link

前端面试题汇总 yangjie2021/interview-frontend