HTML:

1. src 和 href 的区别

2. 对 HTML 语义化的理解

3. DOCTYPE(⽂档类型) 的作⽤

4. script 标签中 defer 和 async 的区别

5. 常⽤的 meta 标签有哪些

6. HTML5 有哪些更新

1. 语义化标签

2. 媒体标签

3. 表单

4. 进度条、度量器

5.DOM 查询操作

6. Web 存储

7. 其他

7. img 的 srcset 属性的作⽤？

8. 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

9. 说一下 web worker

10. HTML5 的离线储存怎么使用，它的工作原理是什么--了解即可

11. 浏览器是如何对 HTML5 的离线储存资源进行管理和加载？

12. title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别？---了解即可

13. iframe 有那些优点和缺点？

14. label 的作用是什么？如何使用？---了解即可

15. Canvas 和 SVG 的区别

16. head 标签有什么作用，其中什么标签必不可少？

17. 文档声明（Doctype）和有何作用? 严格模式与混杂模式如何区分？它们有何意义?

18. 浏览器乱码的原因是什么？如何解决？---了解即可

19. 渐进增强和优雅降级之间的区别

20. 说一下 HTML5 drag API---了解即可

CSS:

一、CSS 基础

1. CSS 选择器及其优先级

2. CSS 中可继承与不可继承属性有哪些---了解即可

3. display 的属性值及其作用

4. display 的 block、inline 和 inline-block 的区别

5. 隐藏元素的方法有哪些

6. link 和@import 的区别

7. transition 和 animation 的区别---了解即可

8. display:none 与 visibility:hidden 的区别

9. 伪元素和伪类的区别和作用？

10. 对 requestAnimationframe 的理解

11. 对盒模型的理解

12. 为什么有时候⽤translate来改变位置⽽不是定位？

13. li 与 li 之间有看不见的空白间隔是什么原因引起的？如何解决？

14. CSS3 中有哪些新特性

15. 替换元素的概念及计算规则---不需要看

16. 常见的图片格式及使用场景

17. 对 CSSSprites 的理解---了解即可

18. 什么是物理像素，逻辑像素和像素密度，为什么在移动端开发时需要用到@3x, @2x 这种图片？

19. margin 和 padding 的使用场景

20. 对line-height 的理解及其赋值方式

21. CSS 优化和提高性能的方法有哪些？

22. CSS 预处理器/后处理器是什么？为什么要使用它们？

23. ::before 和 :after 的双冒号和单冒号有什么区别？

24. display:inline-block 什么时候会显示间隙？

25. 单行、多行文本溢出隐藏

26. Sass、Less 是什么？为什么要使用他们？

27. 对媒体查询的理解？

28. 对 CSS 工程化的理解

29. 如何判断元素是否到达可视区域

30. z-index 属性在什么情况下会失效

31. CSS3 中的 transform 有哪些属性

二、页面布局

1. 常见的 CSS 布局单位

2. px、em、rem 的区别及使用场景

3. 两栏布局的实现

4. 三栏布局的实现

水平垂直居中的实现

6. 如何根据设计稿进行移动端适配？

7. 对 Flex 布局的理解及其使用场景

8. 响应式设计的概念及基本原理

三、定位与浮动

1. 为什么需要清除浮动？清除浮动的方式

2. 使用 clear 属性清除浮动的原理？

3. 对 BFC 的理解，如何创建 BFC

4. 什么是 margin 重叠问题？如何解决？

5. 元素的层叠顺序

6. position 的属性有哪些，区别是什么

7. display、float、position 的关系

8. absolute 与 fixed 共同点与不同点

9. 对 sticky 定位的理解---了解即可

四、场景应用

1. 实现一个三角形

2. 实现一个扇形

3. 实现一个宽高自适应的正方形

4. 画一条 0.5px 的线

5. 设置小于 12px 的字体

6. 如何解决 1px 问题？

思路一：直接写 0.5px

思路二：伪元素先放大后缩小

思路三：viewport 缩放来解决

JavaScript:

一、数据类型

1. JavaScript有哪些数据类型，它们的区别？

2. 数据类型检测的方式有哪些

3. 判断数组的方式有哪些

4. null和undefined区别

5. typeof null 的结果是什么，为什么？

6. intanceof 操作符的实现原理及实现

7. 为什么0.1+0.2 ! == 0.3，如何让其相等

8. 如何获取安全的 undefined 值？

9. typeof NaN 的结果是什么？

10. isNaN 和 Number.isNaN 函数的区别？

11. == 操作符的强制类型转换规则？

12. 其他值到字符串的转换规则？

13. 其他值到数字值的转换规则？

14. 其他值到布尔类型的值的转换规则？

15. || 和 && 操作符的返回值？

16. Object.is() 与比较操作符 “===”、“==” 的区别？

17. 什么是 JavaScript 中的包装类型？

18. JavaScript 中如何进行隐式类型转换？

19. + 操作符什么时候用于字符串的拼接？

20. 为什么会有BigInt的提案？

21. object.assign和扩展运算法是深拷贝还是浅拷贝，两者区别

二、ES6

1. let、const、var的区别

2. const对象的属性可以修改吗

3. 如果new一个箭头函数的会怎么样

4. 箭头函数与普通函数的区别

5. 箭头函数的this指向哪⾥？

6. 扩展运算符的作用及使用场景

7. Proxy 可以实现什么功能？

8. 对对象与数组的解构的理解

9. 如何提取高度嵌套的对象里的指定属性？

10. 对 rest 参数的理解

11. ES6中模板语法与字符串处理

三、JavaScript基础

1. new操作符的实现原理

2. map和Object的区别---了解即可

3. map和weakMap的区别---了解即可

4. JavaScript有哪些内置对象

5. 常用的正则表达式有哪些？

6. 对JSON的理解---了解即可

7. JavaScript脚本延迟加载的方式有哪些？

8. JavaScript 类数组对象的定义？

9. 数组有哪些原生方法？

10. Unicode、UTF-8、UTF-16、UTF-32的区别？---了解即可

（1）Unicode

（2）UTF-8

（3）UTF-16

（4） UTF-32

（5）总结

11. 常见的位运算符有哪些？其计算规则是什么？---了解即可

1. 按位与运算符（&）

2. 按位或运算符（|）

3. 异或运算符（^）

4. 取反运算符 (~)

5. 左移运算符（<<）

6. 右移运算符（>>）

7. 原码、补码、反码

12. 为什么函数的 arguments 参数是类数组而不是数组？如何遍历类数组?

13. 什么是 DOM 和 BOM？

14. 对类数组对象的理解，如何转化为数组

15. escape、encodeURI、encodeURIComponent 的区别

16. 对AJAX的理解，实现一个AJAX请求

17. JavaScript为什么要进行变量提升，它导致了什么问题？

18. 什么是尾调用，使用尾调用有什么好处？

19. ES6模块与CommonJS模块有什么异同？

20. 常见的DOM操作有哪些

1）DOM 节点的获取

2）DOM 节点的创建

3）DOM 节点的删除

4）修改 DOM 元素

21. use strict是什么意思 ? 使用它区别是什么？

22. 如何判断一个对象是否属于某个类？

23. 强类型语言和弱类型语言的区别

24. 解释性语言和编译型语言的区别---了解即可

25. for...in和for...of的区别

26. 如何使用for...of遍历对象

27. ajax、axios、fetch的区别

28. 数组的遍历方法有哪些

29. forEach和map方法有什么区别

四、原型与原型链

1. 对原型、原型链的理解

2. 原型修改、重写

3. 原型链指向

4. 原型链的终点是什么？如何打印出原型链的终点？

5. 如何获得对象非原型链上的属性？

五、执行上下文/作用域链/闭包

1. 对闭包的理解

2. 对作用域、作用域链的理解

1）全局作用域和函数作用域

2）块级作用域

3. 对执行上下文的理解

1. 执行上下文类型

2. 执行上下文栈

3. 创建执行上下文

六、this/call/apply/bind

1. 对this对象的理解

2. call() 和 apply() 的区别？

3. 实现call、apply 及 bind 函数（建议看一下鲨鱼哥的掘金手写）

七、异步编程

1. 异步编程的实现方式？

2. setTimeout、Promise、Async/Await 的区别

（1）setTimeout

（2）Promise

（3）async/await

3. 对Promise的理解

4. Promise的基本用法

（1）创建Promise对象

（2）Promise方法

5. Promise解决了什么问题

6. Promise.all和Promise.race的区别的使用场景

7. 对async/await 的理解

8. await 到底在等啥？

9. async/await的优势

10. async/await对比Promise的优势

11. async/await 如何捕获异常

12. 并发与并行的区别？---了解即可

13. 什么是回调函数？回调函数有什么缺点？如何解决回调地狱问题？

14. setTimeout、setInterval、requestAnimationFrame 各有什么特点？

八、面向对象

1. 对象创建的方式有哪些？

2. 对象继承的方式有哪些？

九、垃圾回收与内存泄漏---了解即可

1. 浏览器的垃圾回收机制

（1）垃圾回收的概念

（2）垃圾回收的方式

（3）减少垃圾回收

2. 哪些情况会导致内存泄漏

性能优化：

一、CDN---了解即可

1. CDN的概念

2. CDN的作用

3. CDN的原理

4. CDN的使用场景

二、懒加载

1. 懒加载的概念

2. 懒加载的特点

3. 懒加载的实现原理

4. 懒加载与预加载的区别

三、回流与重绘

1. 回流与重绘的概念及触发条件

（1）回流

（2）重绘

2. 如何避免回流与重绘？

3. 如何优化动画？

4. documentFragment 是什么？用它跟直接操作 DOM 的区别是什么？

四、节流与防抖

1. 对节流与防抖的理解

2. 实现节流函数和防抖函数

五、图片优化

1. 如何对项目中的图片进行优化？

2. 常见的图片格式及使用场景

六、Webpack优化

1. 如何提⾼webpack的打包速度**?**

（1）优化 Loader

（2）HappyPack

（3）DllPlugin

（4）代码压缩

（5）其他

2. 如何减少 Webpack 打包体积

（1）按需加载

（2）Scope Hoisting

（3）Tree Shaking

3. 如何⽤webpack来优化前端性能？

4. 如何提⾼webpack的构建速度？

前端工程化：

一、Git

1. git 和 svn 的区别

2. 经常使用的 git 命令？

3. git pull 和 git fetch 的区别

4. git rebase 和 git merge 的区别

二、Webpack

1. webpack与grunt、gulp的不同？

2. webpack、rollup、parcel优劣？

3. 有哪些常⻅的Loader？

4. 有哪些常⻅的Plugin？

5. bundle，chunk，module是什么？

6. Loader和Plugin的不同？

7. webpack的构建流程**?**

8. 编写loader或plugin的思路？

9. webpack的热更新是如何做到的？说明其原理？

10. 如何⽤webpack来优化前端性能？

11. 如何提⾼webpack的打包速度**?**

12. 如何提⾼webpack的构建速度？

13. 怎么配置单⻚应⽤？怎么配置多⻚应⽤？

三、其他

1. Babel的原理是什么**?**

计算机网络：

一、HTTP协议

1. GET和POST的请求的区别

2. POST和PUT请求的区别

3. 常见的HTTP请求头和响应头

4. HTTP状态码304是多好还是少好

5. 常见的HTTP请求方法

6. OPTIONS请求方法及使用场景

7. HTTP 1.0 和 HTTP 1.1 之间有哪些区别？

8. HTTP 1.1 和 HTTP 2.0 的区别

9. HTTP和HTTPS协议的区别

10. GET方法URL长度限制的原因

11. 当在浏览器中输入 Google.com 并且按下回车之后发生了什么？

12. 对keep-alive的理解---了解即可

13. 页面有多张图片，HTTP是怎样的加载表现？

14. HTTP2的头部压缩算法是怎样的？---了解即可

15. HTTP请求报文的是什么样的？

16. HTTP响应报文的是什么样的？

17. HTTP协议的优点和缺点

18. 说一下HTTP 3.0

19. HTTP协议的性能怎么样 ---了解即可

20. URL有哪些组成部分

21. 与缓存相关的HTTP请求头有哪些

二、HTTPS协议

1. 什么是HTTPS协议？

2. TLS/SSL的工作原理

（1）散列函数hash

（2）对称加密

（3）非对称加密

3. 数字证书是什么？

4. HTTPS通信（握手）过程

5. HTTPS的特点

6. HTTPS是如何保证安全的？

三、HTTP状态码

1. 2XX (Success 成功状态码)

（1）200 OK

（2）204 No Content

（3）206 Partial Content

2. 3XX (Redirection 重定向状态码)

（1）301 Moved Permanently

（2）302 Found

（3）303 See Other---了解即可

（4）304 Not Modified

（5）307 Temporary Redirect

3. 4XX (Client Error 客户端错误状态码)

（1）400 Bad Request

（2）401 Unauthorized

（3）403 Forbidden

（4）404 Not Found

（5）405 Method Not Allowed---了解即可

4. 5XX (Server Error 服务器错误状态码)---了解即可

（1）500 Internal Server Error

（2）502 Bad Gateway

（3）503 Service Unavailable

（4）504 Gateway Timeout

5. 总结

6. 同样是重定向，307，303，302的区别？

四、DNS协议介绍---了解即可

1. DNS 协议是什么

2. DNS同时使用TCP和UDP协议？

3. DNS完整的查询过程

4. 迭代查询与递归查询

5. DNS 记录和报文

五、网络模型---了解即可

1. OSI七层模型

（1）应用层

（2）表示层

（3）会话层

（4）传输层

（5）网络层

（6）数据链路层

（7）物理层

2. TCP/IP五层协议

六、TCP与UDP---了解即可

1. TCP 和 UDP的概念及特点

2. TCP和UDP的区别

3. TCP和UDP的使用场景

4. UDP协议为什么不可靠？

5. TCP的重传机制

6. TCP的拥塞控制机制

7. TCP的流量控制机制

8. TCP的可靠传输机制

9. TCP的三次握手和四次挥手---了解即可

（1）三次握手

（2）四次挥手

10. TCP粘包是怎么回事，如何处理**?** ---了解即可（或者不需要看）

11. 为什么udp不会粘包？ ---了解即可（或者不需要看）

七、WebSocket

1. 对 WebSocket 的理解

2. 即时通讯的实现：短轮询、长轮询、SSE 和 WebSocket 间的区别？---了解即可

浏览器原理：

一、浏览器安全

1. 什么是 XSS 攻击？

（1）概念

（2）攻击类型

2. 如何防御 XSS 攻击？

3. 什么是 CSRF 攻击？

（1）概念

（2）攻击类型

4. 如何防御 CSRF 攻击？

5. 什么是中间人攻击？如何防范中间人攻击？

6. 有哪些可能引起前端安全的问题**?**

7. 网络劫持有哪几种，如何防范？

二、进程与线程

1. 进程与线程的概念

2. 进程和线程的区别

3. 浏览器渲染进程的线程有哪些

4. 进程之前的通信方式---了解即可

5. 僵尸进程和孤儿进程是什么？---了解即可（或者不需要看）

6. 死锁产生的原因？ 如果解决死锁的问题？---了解即可（或者不需要看）

7. 如何实现浏览器内多个标签页之间的通信?

8. 对Service Worker的理解

三、浏览器缓存

1. 对浏览器的缓存机制的理解

2. 浏览器资源缓存的位置有哪些？

3. 协商缓存和强缓存的区别

（1）强缓存

（2）协商缓存

4. 为什么需要浏览器缓存？

5. 点击刷新按钮或者按 F5、按 Ctrl+F5 （强制刷新）、地址栏回车有什么区别？

四、浏览器组成

1. 对浏览器的理解

2. 对浏览器内核的理解

3. 常见的浏览器内核比较

4. 常见浏览器所用内核---了解即可

5. 浏览器的主要组成部分

五、浏览器渲染原理

1. 浏览器的渲染过程

2. 浏览器渲染优化

3. 渲染过程中遇到 JS 文件如何处理？

4. 什么是文档的预解析？

5. CSS 如何阻塞文档解析？

6. 如何优化关键渲染路径？

7. 什么情况会阻塞渲染？

六、浏览器本地存储

1. 浏览器本地存储方式及使用场景

（1）Cookie

（2）LocalStorage

（3）SessionStorage

2. Cookie有哪些字段，作用分别是什么

3. Cookie、LocalStorage、SessionStorage区别

4. 前端储存的⽅式有哪些？

5. IndexedDB有哪些特点？---了解即可

七、浏览器同源策略

1. 什么是同源策略

2. 如何解决跨越问题

（1）CORS

减少OPTIONS请求次数：

CORS中Cookie相关问题：

（2）JSONP

（3）postMessage 跨域

（4）nginx代理跨域

（5）nodejs 中间件代理跨域

（6）document.domain + iframe跨域

（7）location.hash + iframe跨域

（8）window.name + iframe跨域

（9）WebSocket协议跨域

3. 正向代理和反向代理的区别---了解即可

4. Nginx的概念及其工作原理---了解即可（或者不需要看）

八、浏览器事件机制

1. 事件是什么？事件模型？

2. 如何阻止事件冒泡

3. 对事件委托的理解

（1）事件委托的概念

（2）事件委托的特点

（3）局限性

4. 事件委托的使用场景

5. 同步和异步的区别

6. 对事件循环的理解

7. 宏任务和微任务分别有哪些

8. 什么是执行栈

9. Node 中的 Event Loop 和浏览器中的有什么区别？process.nextTick 执行顺序？

10. 事件触发的过程是怎样的

九、浏览器垃圾回收机制---了解即可

1. V8的垃圾回收机制是怎样的

2. 哪些操作会造成内存泄漏？

手写代码：

一、JavaScript 基础

1. 手写 Object.create

2. 手写 instanceof 方法

3. 手写 new 操作符

4. 手写 Promise

5. 手写 Promise.then

6. 手写 Promise.all

7. 手写 Promise.race

8. 手写防抖函数

9. 手写节流函数

10. 手写类型判断函数

11. 手写 call 函数

12. 手写 apply 函数

13. 手写 bind 函数

14. 函数柯里化的实现

15. 实现AJAX请求

16. 使用Promise封装AJAX请求

17. 实现浅拷贝

（1）Object.assign()

（2）扩展运算符

（3）数组方法实现数组浅拷贝

1）Array.prototype.slice

2）Array.prototype.concat

（4）手写实现浅拷贝

18. 实现深拷贝

（1）JSON.stringify()

（2）函数库lodash的_.cloneDeep方法

（3）手写实现深拷贝函数

二、数据处理

1. 实现日期格式化函数

2. 交换a,b的值，不能用临时变量

3. 实现数组的乱序输出

4. 实现数组元素求和

5. 实现数组的扁平化

6. 实现数组去重

7. 实现数组的flat方法

8. 实现数组的push方法

9. 实现数组的filter方法

10. 实现数组的map方法

11. 实现字符串的repeat方法

12. 实现字符串翻转

13. 将数字每千分位用逗号隔开

14. 实现非负大整数相加

13. 实现 add(1)(2)(3)

14. 实现类数组转化为数组

15. 使用 reduce 求和

16. 将js对象转化为树形结构

17. 使用ES5和ES6求函数参数的和

18. 解析 URL Params 为对象

三、场景应用

1. 循环打印红黄绿

（1）用 callback 实现

（2）用 promise 实现

（3）用 async/await 实现

2. 实现每隔一秒打印 1,2,3,4

3. 小孩报数问题

4. 用Promise实现图片的异步加载

5. 实现发布-订阅模式

6. 查找文章中出现频率最高的单词

7. 封装异步的fetch，使用async await方式来使用

8. 实现prototype继承

9. 实现双向数据绑定

10. 实现简单路由

11. 实现斐波那契数列

12. 字符串出现的不重复最长长度

13. 使用 setTimeout 实现 setInterval

14. 实现 jsonp

15. 判断对象是否存在循环引用

Vue:

Vue面试题推荐配合鲨鱼哥掘金文章-最全的Vue面试题 一起看

一、Vue 基础

1. Vue的基本原理

2. 双向数据绑定的原理

3. 使用 Object.defineProperty() 来进行数据劫持有什么缺点？

4. MVVM、MVC、MVP的区别

5. Computed 和 Watch 的区别

6. Computed 和 Methods 的区别

7. slot是什么？有什么作用？原理是什么？

8. 过滤器的作用，如何实现一个过滤器

9. 如何保存页面的当前的状态

优点

缺点

优点

缺点

优点

缺点

10. 常见的事件修饰符及其作用

11. v-if、v-show、v-html 的原理

13. v-if和v-show的区别

14. v-model 是如何实现的，语法糖实际是什么？

15. v-model 可以被用在自定义组件上吗？如果可以，如何使用？

16. data为什么是一个函数而不是对象

17. 对keep-alive的理解，它是如何实现的，具体缓存的是什么？

18. $nextTick 原理及作用

19. Vue 中给 data 中的对象属性添加一个新的属性时会发生什么？如何解决？

20. Vue中封装的数组方法有哪些，其如何实现页面更新

21. Vue 单页应用与多页应用的区别

22. Vue template 到 render 的过程

23. Vue data 中某一个属性的值发生改变后，视图会立即同步执行重新渲染吗？

24. 简述 mixin、extends 的覆盖逻辑

25. 描述下Vue自定义指令

26. 子组件可以直接改变父组件的数据吗？

27. Vue是如何收集依赖的？

28. 对 React 和 Vue 的理解，它们的异同

29. Vue的优点

30. assets和static的区别

31. delete和Vue.delete删除数组的区别

32. vue如何监听对象或者数组某个属性的变化

33. 什么是 mixin ？

34. Vue模版编译原理

35. 对SSR的理解

36. Vue的性能优化有哪些

37. 对 SPA 单页面的理解，它的优缺点分别是什么？

38. template和jsx的有什么分别？

39. vue初始化页面闪动问题

40. extend 有什么作用

41. mixin 和 mixins 区别

42. MVVM的优缺点**?**

43. Vue.use的实现原理

二、生命周期

1. 说一下Vue的生命周期

2. Vue 子组件和父组件执行顺序

3. created和mounted的区别

4. 一般在哪个生命周期请求异步数据

5. keep-alive 中的生命周期哪些

三、组件通信

（1） props / $emit

1. 父组件向子组件传值

2. 子组件向父组件传值

（2）eventBus事件总线（$emit /$on）

（3）依赖注入（project / inject）

（3）ref / $refs

（4）$parent /$children

（5）$attrs /$listeners

（6）总结

四、路由

1. Vue-Router 的懒加载如何实现

2. 路由的hash和history模式的区别

1. hash模式

2. history模式

3. 两种模式对比

3. 如何获取页面的hash变化

4. $route 和$router 的区别

5. 如何定义动态路由？如何获取传过来的动态参数？

6. Vue-router 路由钩子在生命周期的体现

7. Vue-router跳转和location.href有什么区别

8. params和query的区别

9. Vue-router 导航守卫有哪些

10. 对前端路由的理解

五、Vuex

1. Vuex 的原理

2. Vuex中action和mutation的区别

3. Vuex 和 localStorage 的区别

4. Redux 和 Vuex 有什么区别，它们的共同思想

5. 为什么要用 Vuex 或者 Redux

6. Vuex有哪几种属性？

7. Vuex和单纯的全局对象有什么区别？

8. 为什么 Vuex 的 mutation 中不能做异步操作？

9. Vuex的严格模式是什么,有什么作用，如何开启？

10. 如何在组件中批量使用Vuex的getter属性

11. 如何在组件中重复使用Vuex的mutation

六、Vue 3.0

1. Vue3.0有什么更新

2. defineProperty和proxy的区别

3. Vue3.0 为什么要用 proxy？

4. Vue 3.0 中的 Vue Composition API？

5. Composition API与React Hook很像，区别是什么

七、虚拟DOM

1. 对虚拟DOM的理解？

2. 虚拟DOM的解析过程

3. 为什么要用虚拟DOM

4. 虚拟DOM真的比真实DOM性能好吗

5. DIFF算法的原理

6. Vue中key的作用

7. 为什么不建议用index作为key?

Vue性能优化：

前言

一、代码层面的优化

二、Webpack 层面的优化

三、基础的 Web 技术优化