前端笔试面试题目整理（持续更新）

一、JS

1.前端开发面试题（应届生）-- js基础算法题

2.VK的秋招前端奇遇记(一)

3.VK的秋招前端奇遇记(二)

4.送你 43 道 JS 面试题

送你58道JavaScript面试题
28 道 JavaScript 面试题，看看能错几道？
【练习题】58道JavaScript基础测试题（上）
【练习题】58道JavaScript基础测试题（下）
提升开发幸福感的10条JS技巧
一道面试题引发的对 JavaScript 类型转换的思考
48道JavaScript正则表达式测试题
如何让你的 JS 写得更漂亮
奇怪的JavaScript：map和parseInt的反常应用
Array.from() 五个超好用的用途
【JavaScript 教程】事件——其他常见事件
20个常用的JavaScript字符串方法
处理 JS中 undefined 的 7 个技巧
8道有意思的JavaScript面试题，附解答
5分钟，掌握9个简洁的JavaScript技巧
JS创建对象的4种方式
ES6、ES7、ES8、ES9、ES10新特性一览
JavaScript 中的“黑话”
8种常见数据结构及其Javascript实现
JavaScript函数式编程究竟是什么?
apply、call、bind的使用和异同
深入了解 ES6 强大的 … 运算符
如何衡量一个人的 JavaScript 水平？
JavaScript 工具函数大全
JavaScript 手写代码无敌秘籍
JS中获取元素属性的8大方法
setTimeout 的实现原理和使用注意
箭头函数的this指向：箭头函数本身没有this，其用所在作用域的this

if(true) {
		let a=123;
}
console.log(a);

//输出undefined，因为let是块级作用域

// 模版字符串（es6）
var name="zhang";
var age=20;
console.log(`${name}的年龄是${age}`);
// 这个符号不是单引号，是tab键上面的

// 方法和属性的简写
var name = "zhang";
var app = {
		name
		// 相当于 "name": name;
}
console.log(app.name);

5.函数式编程入门教程

6.bootstrap

6道bootstrap 基础测试题

二、数据结构

1.前端应该如何准备数据结构和算法？

2.策略模式实现动态表单验证

3.十大经典排序算法的 JavaScript 实现01-冒泡排序

4.8种常见数据结构及其Javascript实现

三、CSS

css expression
2019 年了，你还不会 CSS 动画？
CSS如何在幕后工作？
CSS变量使用教程
CSS选择器从右向左的匹配规则

四、互联网理解（杂七杂八的）

1.Web语义化

2.SEO技巧

3.架构模式——MVC模式

MVC是三个单词的首字母缩写，它们是Model（模型）、View（视图）和Controller（控制）。

这个模式认为，程序不论简单或复杂，从结构上看，都可以分成三层。

1）最上面的一层，是直接面向最终用户的"视图层"（View）。它是提供给用户的操作界面，是程序的外壳。
2）最底下的一层，是核心的"数据层"（Model），也就是程序需要操作的数据或信息。
3）中间的一层，就是"控制层"（Controller），它负责根据用户从"视图层"输入的指令，选取"数据层"中的数据，然后对其进行相应的操作，产生最终结果。

这三层是紧密联系在一起的，但又是互相独立的，每一层内部的变化不影响其他层。每一层都对外提供接口（Interface），供上面一层调用。这样一来，软件就可以实现模块化，修改外观或者变更数据都不用修改其他层，大大方便了维护和升级。

4.资源描述框架RDF

资源描述框架（Resource Description Framework ，简称RDF），就是一套W3C提出的描述网络资源的方法。
RDF的基本思想很简单，就是说任何网络资源都可以唯一地用URI（统一资源标识符，Uniform Resource Identifier）来表示。在这里，可以简化地将URI理解成网址URL。

比如，世界第一大网站Yahoo！首页的网址是http://www.yahoo.com/，那么它的首页就可以用这个网址来唯一代表。

有了这个识别符以后，网络资源的其他特性都用"属性（Property）"="属性值（Property value）"这样的形式来表示。
请看上图，最顶部的方框表示网络资源http://www.yahoo.com/，下面的两个方框表示两个属性关系，一个是"资源作者=Yahoo!公司"，另一个是"资源名称=Yahoo！首页"。

RDF本身用xml文件的形式表示，比如上图写成xml文件就是：

<资源作者>Yahoo！公司
<资源名称>Yahoo！首页

5.TCP/IP模型的一个简单解释

6.数据类型和Json格式

7.关于URL编码

8.GET 和 POST 到底有什么区别？

9.HTTPS的七个误解（译文）

10.URL的井号

11.自适应网页设计（Responsive Web Design）

12.如何让搜索引擎抓取AJAX内容？

13.HTTP通信系列

SSL/TLS协议运行机制的概述
图解SSL/TLS协议
HTTP 协议入门
HTTPS 升级指南
HTTP/2 服务器推送（Server Push）教程
SSL延迟有多大？
HTTP Referer 教程
JS 服务器推送技术 WebSocket 入门指北
HTTP/3的过去、现在和未来
HTTPS是如何工作的
axios 是如何封装 HTTP 请求的
解读HTTP/2与HTTP/3 的新特性
解密HTTP/2与HTTP/3的新特性

14.深度解读当代前端架构进化史，下一个趋势在哪？

五、知识扩展

1.为什么文件名要小写？

2.CSS in JS 简介

3.WebSocket 教程

4.Server-Sent Events 教程

5.也许，DOM 不是答案

6.普通人的网页配色方案

7.前端 Web Workers 到底是什么？

8.promise学习笔记

面试：手写promise

9.用 preload 预加载页面资源

10.前端领域不需要架构师？

11.利用HTML5标签进行DDoS攻击的新方法揭秘

12.如何实现Web页面录屏？

13.2019 大龄前端如何准备面试？

14.前端性能-监控起步

15.前端代码质量-圈复杂度原理和实践

16.这5个Ajax的坑，你踩过几个？

17.微前端究竟好在哪？

六、数据库

1.数据库表连接的简单解释

2.用漫画的形式来讲解为什么MySQL数据库要用B+树存储索引？

七、react

React高频面试题梳理，看看面试怎么答？（上）

RN(一) 为什么要学习RN
React开发需要熟悉的JavaScript特性
看文吃瓜：React遭遇V8性能崩溃的故事
从零开始手写 redux
21个React开发神器
如何实现 React 中的状态自动保存？
WebWorker 在文本标注中的应用

react-redux

动手实现一个 react-redux
从零开始手写 redux

八、浏览器相关

面试须知：浏览器相关原理详细总结（1）
漫谈前端性能，突破React应用瓶颈（前端工作流的详细解释）
简述JS中的事件委托和事件代理
一文搞懂浏览器缓存机制
探寻浏览器渲染的秘密

九、Vue

30 道 Vue 面试题，内含详细讲解（涵盖入门到精通，自测 Vue 掌握程度）
7个有用的Vue开发技巧
你了解vue3.0响应式数据怎么实现吗？
5种处理Vue异常的方法

十、node

node.js的三大特点
JS 引擎 V8 如何与 Lite 模式两开花？

十一、网络安全

xss攻击
DDOS 攻击的防范教程

十二、模块化开发

详解JavaScript模块化开发
一看就懂之 webpack 高级配置与优化
还学不会webpack？看这篇！

十三、调试工具的使用

Chrome(谷歌)控制台，console实用教程
一位开发者的幽默独白：JavaScript工具怎么就这么烂
Chrome Devtools 高级调试指南（新）
21个极大提高开发效率的VS Code快捷键

十四

1.前端开发中，递归能用来干什么？什么时候用
2.饿了么UI实现拖拽