# 前端技术面试题(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

# ❓ 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

# 📁 模块化&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

# 📁 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、sessionStorage、localStorage的区别 #125

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

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

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

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

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

# 📁 网站及优化

# ❓ 什么是 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