前端笔试面试高频考点（基础向）

1. 基本语言

此类问题结合具体情境问题提问也较为常见。

1.1 html

1. 盒子模型（被问到过ie的盒子模型）；
2. html5 的新特性；
3. 块元素和行内元素；
4. href和src的区别；
5. DOM操作——怎样添加、移除、移动、复制、创建和查找节点；
   创建新节点
   ​ createDocumentFragment() //创建一个DOM片段
   ​ createElement() //创建一个具体的元素
   ​ createTextNode() //创建一个文本节点
   添加、移除、替换、插入
   ​ appendChild()
   ​ removeChild()
   ​ replaceChild()
   ​ insertBefore()
   查找
   ​ getElementsByTagName() //通过标签名称
   ​ getElementsByName() //通过元素的Name属性的值
   ​ getElementById() //通过元素Id，唯一性
6. iframe的优缺点以及应用场景；
7. 一个html网页的基本结构；
8. canvas。

HTML入门与进阶以及HTML5

1.2 css

1. css标签的权重；
2. 有哪些办法可以清除浮动；
3. 几种定位方式有哪些不同：relative，absolute，fixed；
4. 有几种方法可以让元素垂直居中；
5. flex弹性盒子：css3 flex 详解,可以实现div内容水平垂直居中；
6. css单位：em，rem，vw；
7. animation动画；
8. transform变换。

CSS入门

1.3 js

1. 基本数据类型和引用数据类型各有哪些，都有什么区别（ES5的时候，我们认知的数据类型确实是 6种：Number、String、Boolean、 undefined、object、Null。ES6中新增了一种Symbol。谷歌67版本中还出现了一种 bigInt。）；
2. 元素选择器；
3. 深拷贝和浅拷贝(很重要)（object的深拷贝和浅拷贝）；
4. 闭包（定义，优点，缺点）javascript深入理解js闭包
5. 内存泄漏
6. 定时器
7. es6新特性
8. promise
9. 异步（结合例题写输出较多）
10. 原型和原型链（apply，call）；
11. 冒泡和捕获（事件委托）；
12. 作用域和作用域链；
13. this（结合例题写输出较多） 经典Foo和gatName问题；
14. 内置函数，例：js将时间戳转换成正常时间；
15. 数组操作（可以做一些代码练习题）；
16. 字符串操作；
17. 正则表达式 手机号码验证的正则表达式。

2. 网络

2.1 AJAX

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML）通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。
原理：XMLHttpRequest

2.2 网络请求

1. 同源策略；
   所谓同源是指，域名，协议，端口相同。
   当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。
   如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。
2. 跨域；
3. HTTP请求回应解释100到505；
   1xx（临时响应）表示临时响应并需要请求者继续执行操作的状态代码。
   2xx （成功）表示成功处理了请求的状态代码。
   3xx （重定向） 表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。
   4xx（请求错误） 这些状态代码表示请求可能出错，妨碍了服务器的处理。
   5xx（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错。
4. xss攻击和csrf攻击的定义及区别。

2.3 cookies, sessionStorage, localStorage

相同点：都存储在客户端

不同点：

1. cookie存储的数据大小不能超过4k，主要用于存储账号密码
   sessionStorage和localStorage可存储5M+的数据
2. cookie在设置的过期时间之前一直有效，即使窗口或浏览器关闭
   sessionStorage在当前浏览器窗口关闭后自动删除localStorage存储持久数据，浏览器关闭后除非主动删除数据，数据不丢失
3. cookie的数据可以在服务器和客户端之间传输，sessionStorage和localStorage仅在本地保存

3.框架

3.1 VUE

1. 组件之间传值（必问）；
2. 生命周期（必问）；
3. vue的双向绑定原理及实现；
4. vue-router（路由）；
5. Vue: method/computed/watch的使用和区别；
6. keep-alive。

vue常见面试题

3.2 JQuery

1. 选择器；
2. 动画。

JQuery 入门

4. 优化

4.1 网站性能优化

1. 尽可能减少HTTP请求；
2. 使用雪碧图；
3. 压缩js和css 去除不必要的注释和空格；
4. 减少dom操作，尽可能用变量替代不必要的dom操作；
5. 合理使用缓存。

4.2 兼容性

最全整理浏览器兼容性问题与解决方案