前端面试知识点

---

前言__面试不要慌

这篇文章是我看视频课程的笔记,可能有一部分记录方式是我的习惯，所以会有些人觉得看不懂这很正常，主要是记录一些思路，可以参考我给的目录可以自己整理，都是面试的考点。
另外，希望大家面试的时候在遇到一些不懂问题时不要逃避，这没什么大不了，哪怕是经验丰富的开发也是会有这种情况，本身有一些比较难懂的原理在实际开发中很少遇到，在项目遇不到就不会这很正常。
祝大家看了我的文章有所收获，找到满意工作~~~~

---

一、HTML-css-js

1.HTML页面进行重绘和重排

⑴.浏览器的运行机制
①构建DOM树(生成内容树)：渲染HTML文档,将标签转换成DOM树中的DOM node；
②构建渲染树：解析css样式文件信息,使每个node节点都有了自己的样式；
③布局渲染树：从根节点(body)递归调用,计算位置大小,给出每个节点坐标；
④绘制渲染树

⑵.重绘
①定义：指一个元素外观的改变所触发的浏览器行为
②触发条件:改变元素外观属性(例如：color,background-color等)

⑶.重排(重构/回流)
①定义：指一个元素规模尺寸,布局
②触发条件:改变元素外观属性(例如：color,background-color等)
③重排必定引发重绘

2.网页验证码的作用*网页中几种常见验证码(介绍+技术)

⑴验证码种类
**种类：**智能无感知/滑动拼图/文字点选/图标点选/推理拼图/短信验证码/极验(滑动验证码)

⑵验证码作用
①**作用：**防止恶意注册,拖慢服务器;验证注册合法性；
②智能无感知/滑动拼图/文字点选/图标点选：大多是后台购买的，这种情况直接前端通过ajax发送验证码；

3.ES6的类class

//举例:如下两个Person函数效果相同
//构造函数
function Person(){
  this.name="建林",
  this.age=18
  this.say=funcion(){ console.log('Person的say') }
}
//class类
class Person{
  constructor(){
    this.name='建林'
    this.age=18
  }
  say(){ console.log('Person的say') }
}
//继承 Teacher继承Person
class Teacher extends Person{
  //复杂写法constructor
  constructor(){
    super();//this之前一定要调用super(),内部重复覆盖父,不重复添加(React会用上,vue可能用不上)
    this.name='思聪'
    this.score=100000000
    }
  //简单写法
  name='思聪'
  score=100000000
}

4.对async/await的理解,内部原理

▲ ajax、定时器延时器、事件处理(onclick等)、node.js读取文件：是异步代码,他会直接执行不会等。
▲注意：new Promise会立即执行

⑴ 使用promise解决地狱回调

//什么是promise
let p1 = new Promise(function(resolve,reject){
  //resolve成功的函数,reject失败的函数
})
p1.then(function(){成功函数},function(){失败函数})

//axios() 调用axios  是一个链式编程
function axios(){
  let p1=new Promise(function(resolve,reject){
    $ajax({})
  })
  //return p1
}
//axios就是这样封装的
axios().then(function(res){
  console.log('结果',res)
})

⑵ 使用async、await最简单就是可以省略掉then

原理：async、await就是Generator函数的语法糖
不使用async、await

dcoument.getelementById("btn").onclick=()=>{
  axios().then(function(res){
    console.log('结果',res)
  })
}

使用async、await

dcoument.getelementById("btn").onclick=async ()=>{
  let res=await axios()//等待成功才执行下面语句
  console.log('结果',res)
}

⑶ Promise方法

//then()、catch()方法
new Promise((resolve,reject) => {}).then().catch()
//all()方法：必须数组里面所有的promise执行完毕才成功
Promise.all([p1,p2,p3....],function)
//race()方法：只要数组里面一个成功race就执行了
Promise.race()

5.TS在项目中的使用

▲ 什么是TS(TypeScript)：是js的一个超集,支持ES6标准,比js有更严格的类型要求。
▲格式：变量:类型(any任何类型)

6.ES6装饰器的使用

⑴ 什么是装饰器
▲装饰器：就是用来注释或修改类和类方法与属性，与class类相关。

⑵ 修饰类基本形式
▲作用：可以实现代码复用

@decorator  //decorator装饰器
class A {}
//等同于
//class A {}
//A = decorator(A)  decorator是一个函数，相当于调用它给A类加上一些代码

举例应用：

//装饰器是一个函数,可以给类或属性方法,加上一些东西
function testable(target) {
  target.age = 20;   // 为类添加静态属性
  target.prototype.grade = 3;  // 为类添加实例属性
  console.log('类调用了',target)  //打印出来target就是MyTestableClass 
}
//在类或属性方法前面写上**@函数名**就相当于要调用这个函数
@testable
class MyTestableClass {}

@testable
class p {}  //复用

当一个参数不够用，可以在修饰器外面再封装一层函数。见下面例子：

// 定义装饰器的外层函数
function mixins(...list) {
    // 返回一个装饰器函数
    return function(target) {
        Object.assign(target.prototype, ...list);
    }
}

const args = {
    f1() {}
    f2() {}
    f3() {}
};

// 使用mixins装饰器
@mixins(args)
class MyClass {};

let inst = new MyClass();
inst.f3();

实例：实际开发中，React 与 Redux 库结合使用时，常常需要写成下面这样。

class MyComponent extends React.Component {};
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

有了装饰器，就可以改写上面的代码。

@connect(mapStateToProps, mapDispatchToProps)
export default class MyComponent extends React.Component {};

⑶ 修饰类的方法 decorator(target, name, descriptor) {}
修饰器不仅可以修饰类，还可以修饰类的属性。

function readonly(target, name, descriptor) {
  console.log('target',target);//当前的person
  console.log('name',name);//装饰的那个属性或者方法名
  console.log('descriptor',descriptor)
    // descriptor对象原来的值如下
    // {
    //     value: specifiedFunction, //对象属性的默认值
    //     enumerable: false,  //对象属性是否可以通过for-in循环(枚举)
    //     configurable: true,  //能否使用delete、能否修改属性特征、能否修改访问器属性
    //     writable: true  //对象属性是否可以修改
    // }
    decorator.writable = false;  // 不可写
    return descriptor;
}

class Person {
  @readonly
  abc() {console.log('我是person的abc函数')}

  @readonly
  xx=123  //不可修改就是123
}

不细学了,未来再系统学习

7.事件执行机制

⑴ 宏观异步任务：setTimeout、setInterval、requestAnimationFrame、I/O；
⑵ 微观异步任务：nextTick、Promise[then()]、
▲顺序：先同再异；先微后宏。

例如1:

//给出以下执行顺序
console.log(1)
let p1 = new Promise(function (resolve) {
  console.log(2)
  resolve();
})  //new Promise会立即执行
p1.then(function() {
  console.log(3)
})  //.then是异步任务
console.log(4)
//所以执行结果为1 2 4 3

例如2:

console.log(1)
setTimeout(function () {
  console.log(2);
},0)  //宏观异步任务
new Promise(function (resolve) {
  console.log(3)
  resolve();
}).then(function() {  //微观异步任务
  console.log(4)
})
//所以执行结果为1 3 4 2

8.flex布局

比较简单不仔细写了

9.移动端部署–网站部署

⑴ 什么是上线部署：其实直白点说就是把写好的代码上传到公司买的服务器上面。
⑵ 核心问题讲解：npm run build(打包),生成build文件就是我们要的部署代码，再把build代码复制到服务器中(一般前端代码是git提交给项目经理,项目经理部署；或者提交给后台，后台复制到服务器中)。
⑶ 刷新404：vue react如果是history模式下，刷新之后404，需要服务器配置路由重写指向index.html才可以。(后台配置的问题)

10.cookie

⑴ 问题分析：cookie放哪里，cookie能做的事情和存在的价值；
▲cookie作用：服务器检查cookie来辨认用户等状态(现在不用了,用locastorage存token来统一解决)。

//▲存储cookie格式：document.cookie="键=值;expires=过期时间"
//cookie前端可以设置，后端也可以操作
document.cookie = "username='张三';"

//▲取出cookie格式
console.log(document.cookie)

⑵ 比较cookie、locastorage、sessionstorage区别
▲ cookie：存储数据量小；默认浏览器关闭就过期了，但是也可以自己设置过期时间；不安全(直接就可以看到存储的内容)；跨域有问题。
▲ locastorage：存储数据量大；不过期，但是可以删除；目前跨域问题都是用locastorage存token来统一解决。

11. 网站优化

懒加载、精灵图、减少http请求、控制浏览器缓存&h5缓存等，话题太多理解这几点对于经验少的也差不多够了。

12. h5离线存储manifest(h5新特性)

⑴ 使用方式
▲在需要离线缓存存储的页面上加manifest = “cache.manifest”，如下代码(index.html)：

DOCTYPE html>
<html manifest = "cache.manifest">
....
html>

▲在根目录上创建文件名为cache.manifest文件，文件中代码内容如下：

CACHE MANIFEST
#v.0.11

CACHE  
js/app.js  
css/style.css  

NETWORK  
resour/logo.png  

FALLBACK  
/  /offline.html  

我的文件结构如图，具体配置根据实际更改：

13.websocker实现原理

⑴ 应用场景：聊天、客服、在线咨询、即时通讯等。
▲即时通讯原理：
①ajax轮询：使用定时器 每隔一秒钟发送ajax到后台，但是性能不好；
②websocker：

⑵ 代码构成

//需要连接的服务器端的URL  注意： ws或者wss一定要有 两者就是http协议和https协议的区别,后台要对应上websocket
var ws = new WebSocket("wss://echo.websocket.org");  

//建立链接
ws.onopen = function(evt) { 
  console.log("Connection open ..."); 
  ws.send("Hello WebSockets!");  //向服务器端发送数据的方法
};

//收到后台发送来的消息执行
ws.onmessage = function(evt) {  //发送完数据后，从服务器端接收相应返回的方法
  console.log( "Received Message: " + evt.data); 
  ws.close();
};
//发生错误 链接出错执行
ws.onerror = function(evt){
  console.log(evt);
}
//关闭链接执行的方法
ws.onclose = function(evt) {  
  console.log("Connection closed.");
};

▲socket.io是封装了WebSocket的代码
① 直接引入socket.io.js文件；
② 调用io链接，var socket = io() //相当于new WebSocket io给封装了；
③ 发送消息后台 socket.emit(“自己定义的参数”,参数)；
④ 接受socket.on(“自己定义事件”,function(msg) {})；

▲ 因为聊天会有很多图片、表情包等功能，所以一般聊天、客服、在线咨询等等，公司都是会买的，很少自己写。

二、移动端常见问题

1.移动端的兼容问题

兼容问题其实在实际开发不算是常见遇到，面试的时候有几点可以提一下；具体原理不懂很正常，因为一般开发就是遇不到。
▲兼容问题：有些js代码是支持安卓手机，有些支持ios执行；
▲判断是什么手机方法：window.navigator.userAgent。
⑴ 禁止图片点击放大

img{ pointer-events: none; }

⑵ 禁止ios识别长串数字为电话(相对常见)

<meta name="format-detection" content="telephone=no" />

⑶ 禁止复制、选中文本

<style lang="scss">
    .defaultStyleConfig {
        -webkit-user-select: none;/*webKit 浏览器*/
    }
style>

⑷ 安卓浏览器看背景图片，有些设备会模糊

background-size: contain;  /*二倍图原理*/

⑸ 下拉滚动卡顿

body { 
-webkit-overflow-scrolling:
touch;overflow-scrolling: touch;
}

Android3+和iOS5+支持CSS3的新属性为overflow-scrolling

⑹ 安卓手机不会自动播放视频
⑺ 半透明遮罩层改为全透明

2.移动端三种开发方式

⑴ 本地应用程序 (原生APP-安卓/ios)
⑵ 网页应用程序 (移动web)
⑶ 混合应用程序 (混合APP)

3.h5与app交互

三、浏览器工作原理

1.浏览器缓存

⑴ 问题分析：浏览器本身就有缓存的功能，为什么有时候刷新代码没有生效问题？浏览器怎么缓存呢？

⑵ 浏览器缓存分类：强缓存&协商缓存；
▲浏览器缓存：可以通过后台设置响应头控制。
▲强缓存：不发请求到服务器。
▲协商缓存：发请求到服务器。

⑶ 网站优化：懒加载、精灵图、减少http请求、控制浏览器缓存(设置请求头控制缓存,一般是后台写好)

四、跨域与安全

1.跨多页签通讯介绍

2.localstorage实现多页通讯

3.cookie实现多页通讯

4.websocker实现多页通讯

5.sharedwoker实现多页签通讯

6.多页签通讯题答题及解答思路

7.xss跨站脚本攻击和攻击类型

8.xss跨站脚本攻击的防御类型

五、vue

1.

2.

3.

4.

5.

6.

六、vue2

1.

2.

3.

4.

5.

6.

七、项目必会知识

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

11.

12.

13.

14.

15.

16.

17.

未完待遇…