ToB企服应用市场:ToB评测及商务社交产业平台

标题: 【面试】前端面试八股文 [打印本页]

---

作者: 玛卡巴卡的卡巴卡玛    时间: 2024-10-28 21:06
标题: 【面试】前端面试八股文
前端思维导图长处大可爱html+css+js+node全面可下载千峰html+css轻便漂亮千峰js轻便漂亮 一、JS

1、使用

（1）标签引用

1. <script>
2.     alert("Hello,World!");
3. </script>

复制代码

（2）文件引用

1. <script src="main.js"></script>

复制代码

2、特点

• 解释型语言：JS不需要被编译为呆板码而是直接执行，开辟轻松
  
• 动态型语言：JS变量与任何值类型都不关联，都可以重新分配类型值
  
• 弱类型语言：变量数据类型不确定，赋值后界说。当操作涉及不匹配的类型时，答应隐式转换
  
• 基于原型的面向对象
  
• 严格区分巨细写
  

3、标识符

• 标识符：指给变量、函数、属性或函数参数起名字
  
• 要求：
  
  
  
  • 第一个字符必须是字母、下划线（ _ ）或美元符号（ $ ）
    
  • 其它字符可以是字母、下划线、美元符号或数字
    
  • 按照惯例，ECMAScript 标识符采取驼峰命名法
    
  • 标识符不能是关键字和保存字符
    
  
  

4、数据类型

（1）数据类型

• 简单/基本数据类型：在存储变量中存储值本身，因此也叫值类型，存放到栈（空间）
  

名称类型值String字符串型‘123’Number数值型123Boolean布尔型true/falseNullnull型空UndefinedUndefined型未界说SymbolSymbol型Symbol() 天生唯一值Bigint整数型大整数

• 复杂数据类型：在存储变量中存储地点，因此也叫引用数据类型，存放到堆（空间）
  
  
  
  • 通过new关键字创建的对象（体系对象、自界说对象）
    
  
  

名称类型值Object对象{ “key”:“value” }Array数组[…]Function函数fn()Date日期函数new Date()Math数学公式MathRegExp正则new RegExp(“正则表达式”, “匹配模式”) （2）类型判定

• typeof obj：不适用复杂类型判定，多体现object
  

1. console.log(typeof "123")                // string
2. console.log(typeof 123)                        // number
3. console.log(typeof true)                // boolean
4. console.log(typeof undefined)        // undefined
5. console.log(typeof null)                // object => 所有值均32位，最低的3位表示数据类型，null全部为0，而object前三位是000

复制代码

• obj instanceof Object ：不适用基本类型判定
  

1. console.log([1, 2] instanceof Array)                         // true
2. console.log(function(){} instanceof Function)         // true
3. console.log({a:1} instanceof Object)                         // true
4. console.log(new Date() instanceof Date)                        // true
5. console.log(new RegExp() instanceof RegExp)         // true

复制代码

• obj.constructor：直接找到元素的构造函数类型
  

1. const str = '111'
2. const num = 666
3. const sym = Symbol(66)
4. const arr = [1,2,3,5]
5. const date = new Date()
6. const func = function(){}
7. const reg = new RegExp()
8. const map = new Map()
9. const set = new Set()
10. // null和undefined没有constructor，obj.constructor => Object() { [native code] }
12. console.log(str.constructor === String)     // true
13. console.log(num.constructor === Number)     // true
14. console.log(sym.constructor === Symbol)     // true
15. console.log(arr.constructor === Array)      // true
16. console.log(date.constructor === Date)      // true
17. console.log(func.constructor === Function)  // true
18. console.log(reg.constructor === RegExp)     // true
19. console.log(map.constructor === Map)        // true
20. console.log(set.constructor === Set)        // true

复制代码

• Object.prototype.toString.call(obj)：最准确，推荐使用
  

1. Object.prototype.toString.call("")              // "[object String]"
2. Object.prototype.toString.call(123)             // "[object Number]"
3. Object.prototype.toString.call(true)            // "[object Boolean]"
4. Object.prototype.toString.call(null)            // "[object Null]"
5. Object.prototype.toString.call(undefined)       // "[object Undefined]"
6. Object.prototype.toString.call(Symbol())        // "[object Symbol]"
7. Object.prototype.toString.call(42n)             // "[object BigInt]"
8. Object.prototype.toString.call({ a: 1 })        // "[object Object]"
9. Object.prototype.toString.call([1, 2])          // "[object Array]"
10. Object.prototype.toString.call(new Date())      // "[object Date]"
11. Object.prototype.toString.call(function () {})  // "[object Function]"

复制代码

（3）类型转换

• 类型转换：把数据类型的变量转换成需要的数据类型
  
• 体现转换：根据逻辑需要对数据进行体现转换
  

转换类型方法含义StringString(数据)转换为字符串变量.toString(进制)转换为对应进制字符串NumberNumber(数据)转换为数字parseInt(数据)只保存整数parseFloat(数据)可以保存小数BooleanBoolean(数据)转换为布尔值

• 隐式转换：某些运算符被执行时，体系自动转换
  +：一元操作符转换成Number；任何数据和字符串相加效果都是字符串
  - * /：把数据转成数字类型
  

转换类型原始数据类型转换后的值String数字类型'n'null'null'undefined'undefined'布尔类型true变'true',false变'false'Number空字符/null0非空字符串数字/NaN（有非数字）true/false1/0undefinedNaNNaNtypeof NaN => "number"BooleanString非空字符串为true，空字符串为falseNumber非零数字为true，0和NaN为falseObject任何对象为true，null为falseUndefined无true，Undefined为false   运行情况对数据类型隐式转换的影响：很多内置函数期望传入的参数数据类型是固定的，如:alert(value)期望传入string类型参数，如果传入number或object等非string类型的数据，就会发生数据类型的隐式转换
  5、深浅拷贝

（1）基本类型拷贝

• 基本类型数据的值保存在栈中，对它进行拷贝时，为新变量开辟了新空间，数据互相不影响，不涉及深浅拷贝问题
  

（2）引用类型拷贝

• 复杂数据类型存储在栈中的值是一个指针，指向存储对象的内存地点，涉及深浅拷贝问题
  
  
  
  • 浅拷贝：仅复制指向某对象的指针，不复制对象本身，新旧对象共享同一块内存
    
  • 深拷贝：创造一个相同的对象，新旧对象不共享内存，修改新对象不会改到原对象
    
  
  

类型与原数据是否指向同一对象第一层数据为基本数据类型原数据中包罗子对象赋值是改变原数据改变原数据浅拷贝否不改变原数据改变原数据深拷贝否不改变原数据不改变原数据   深拷贝方法
- JSON：JSON.stringify()，JSON.parse()
- Object.assign()
- jQuery 方法 $.extend()
- 递归
  6、var let const

• 相同点：声明变量
  
• 差别点：
  

类型varletconst作用域函数作用域块作用域块作用域重新赋值是是否声明不赋值是是否变量提拔是否否重复声明是否否全局声明变量为window对象属性是否否   尽量克制使用var，优先使用const，将来会修改的变量使用let
const必须初始化，声明时大写变量，不能修改变量声明的值，可以修改对象内部属性
let无需初始化，不可以修改变量声明的值
  7、箭头函数

• 匿名：都是匿名函数，使用=>简化界说
  
• this：声明情况确定箭头函数this指向，通过查找作用域链确定this值，无法改变this指向
  
• new：不能作为构造函数使用，同样也没有new.target值和原型
  
• arguments：箭头函数没有自己的arguments对象，可以访问外围函数的arguments对象或用rest参数…解决
  

   得当与this无关的回调 ：定时器、数组回调
不得当与this有关的回调： 变乱回调 、对象的方法
判定箭头函数
  8、原型和原型链（面向对象编程）

• 面向对象编程是对步伐的更高级别封装，高度复用
  

（1）构造函数

• 界说：使用new关键字来创建对象的函数，首字母一样平常大写
  
• 功能：存放全局变量
  
• 步骤
  
  
  
  • 创建一个新对象
    
  • 将构造函数的作用域赋给新对象（this指向实例对象）
    
  • 执行构造函数中的代码（为实例对象添加属性）
    
  • 返回新对象（实例对象）
    
  
  

1. function Person(name, age) {
2.            this.name = name;
3.            this.age = age;
4.     this.species = '人类';
5.     this.say = function () {
6.         console.log("Hello");
7.     }
8. }
10. let per1 = new Person('xiaoming', 20);

复制代码

（2）实例对象

• 界说：通过构造函数new出来的对象，全部函数都是Function()的实例
  
• 功能：存放数据
  

（3）原型对象

• 界说：构造函数创建的某个实例的原型对象
  
• 功能：存放对应数据的操作方法（变乱处理函数）
  
• 显式原型：使用prototype属性查找原型，是函数类型数据的属性
  
• 隐式原型：使用__proto__属性查找原型，这个属性指向当前对象构造函数的原型对象，是对象类型数据的属性，可以在实例对象上使用
  

   js每个函数类型数据，都有一个prototype属性指向原型对象
原型对象又有个constructor属性，指向它的构造函数
  

• 原型链：如果某对象在自己和原型对象上都没有查到属性，通过__proto__属性继续查找原型对象的原型对象，尽头是Object.prototype，未找到返回undefined
  
  
  
  

9、作用域和作用域链

（1）作用域

• 界说：规定变量和函数的可使用范围
  
• 局部作用域：函数中可以访问
  
• 全局作用域：全局中可以访问
  

（2）作用域链

• 界说：各作用域的嵌套关系，如果自身作用域未声明该变量，则通过作用域链层层查找
  
• 区别：雷同原型链，但原型链中查找不到对象属性返回undefined；作用域链中查找不到属性抛出ReferenceError
  
• 作用域嵌套
  
  
  
  • 内部作用域有权访问外部作用域
    
  • 外部作用域无法访问内部作用域（闭包登场解决）
    
  • 兄弟作用域不可互相访问
    
    
    
    
  
  

10、执行栈和执行上下文

（1）执行栈

• 特点是先辈后出
  
• 当进入一个执行情况，就会创建出它的执行上下文，然后进行压栈；当步伐执行完成时，它的执行上下文就会被销毁，进行弹栈
  
• 栈底永久是全局情况的执行上下文，栈顶永久是正在执行函数的执行上下文
  
• 只有浏览器关闭的时候全局执行上下文才会弹出
  

（2）执行上下文

• 全局执行上下文
  
  
  
  • 创建一个全局的window对象，规定this指向window，执行js的时候压入栈底，关闭浏览器的时候弹出
    
  
  
• 函数执行上下文
  
  
  
  • 每次函数调用时，都会新创建一个函数执行上下文
    
  • 执行上下文分为创建阶段和执行阶段
    
    
    
    • 创建阶段：函数情况会创建变量对象：arguments对象（并赋值）、函数声明（并赋值）、变量声明（不赋值），函数表达式声明（不赋值）；确定this指向；确定作用域
      
    • 执行阶段：变量赋值、函数表达式赋值，使变量对象编程活跃对象
      
    
    
  
  
• eval执行上下文
  

11、闭包

（1）界说

• 本质是函数嵌套函数
  

（2）作用

• 长处
  
  
  
  • 保护：保护函数内的变量安全，克制命名冲突
    
  • 保存：在内存中维持一个变量，可以做缓存不被垃圾接纳机制接纳
    
  • 降耗：匿名自执行函数可以镌汰内存斲丧
    
  
  
• 缺点
  
  
  
  • 内存走漏：被引用的私有变量不能被销毁，增大了内存斲丧，可能导致内存走漏；可以使用完变量后手动为它赋值null
    
  • 低落性能：由于闭包涉及跨域访问，以是会导致性能损失；可以通过把跨作用域变量存储在局部变量中，然后直接访问局部变量减轻对执行速率的影响
    
  
  

（3）应用

• 设计模式中的单例模式
  
• for循环中的保存i的操作
  
• 防抖和节流
  
• 函数柯里化
  

12、内存泄漏和垃圾接纳机制

（1）内存走漏

• 界说：不再用的内存没有被实时开释，导致该段内存无法被使用
  
• 缘故原由：已经无法通过js访问某对象，而垃圾接纳机制却以为该对象还在被引用，因此不开释该对象
  
• 影响：内存无法开释，积少成多，体系会越来越卡以至于崩溃
  

（2）垃圾接纳机制

• 配景：写代码时创建的基本类型、对象、函数等，都需要占内存。JS基本数据类型存储在栈内存，引用数据类型存储在堆内存，但引用数据类型会在栈内存中存储一个实际对象的引用（内存走漏）
  
• 界说：定期找出不可达的对象（变量设置为null），然后将其开释
  
• 方法：
  
  
  
  • 标记扫除法：分为标记和扫除两个阶段，标记阶段需要从根节点遍历内存中的全部对象，并为可达的对象做上标记；扫除阶段则把没有标记的对象（非可达对象）销毁
    
    
    
    • 长处：实现简单
      
    • 缺点：内存碎片化；内存分配速率慢
      
    
    
  • 引用计数法：主要纪录对象是否被其他对象引用，如果没有就被垃圾接纳机制接纳。策略是跟踪纪录每个变量值被使用的次数，当变量值引用次数为0时，垃圾接纳机制就会把它整理掉
    
    
    
    • 长处：可以实现立即进行垃圾接纳
      
    • 缺点： 需要计数器；无法解决循环引用时计数不为0无法接纳的问题
      
    
    
  
  

13、JS 执行机制

（1）进程和线程

• 进程：体系进行资源分配的最小单位，具有一定独建功能的步伐关于某个数据集合上的一次运行活动
  
• 线程：体系安排CPU执行的最小单位，可以明白为子任务
  
  
  
  • 关系：线程可以视作为进程的子集，一个进程可以有多个线程并发执行
    
  • 区别：差别操作体系资源管理方式。进程有独立的地点空间，一个进程崩溃后，在保护模式下不会对其它进程产生影响；线程只是一个进程中的差别执行路径
    
  
  

（2）单线程

• 配景：JS有可视DOM，多线程可能会导致差别线程同时增、删、改DOM节点，导致浏览器无法顺遂执行
  
• 界说：一次只能执行一段代码，执行时如果碰到耗时操作，默认停下等待操作完成后继续执行
  
• 解决：JS一样平常把比较耗时的操作做异步处理
  

（3）同步和异步

• 同步任务：在主线程上列队执行的任务。只有前一个任务执行完毕，才能执行下一个任务
  
• 异步任务：进入任务队列的任务。只有任务队列通知主线程，某个异步任务可以执行了，该任务才会进入主线程
  
• 变乱循环：
  
  
  
  • 同步任务依次进入主线程并执行，形成一个执行栈
    
  • 异步任务进入任务队列并注册回调函数
    
  • 全部同步任务执行完毕，从任务队列中提取异步任务执行
    
  
  

   异步任务分为宏任务和微任务，任务队列也分为宏任务队列和微任务队列：
宏任务：运行情况提供的异步操作，如：setTimeOut、setInternal、DOM监听、UI rendering、ajax、变乱绑定等
微任务：js 语言自身的异步操作，如：Promise的then、catch、finally和process的nextTick等
在一个宏任务周期中会执行当前周期全部微任务，都执行完毕进入下一个宏任务周期，以是任务执行次序为：同步任务>微任务>宏任务
  14、回调函数

（1）界说

• 函数也是一种变量，可以作为参数传给其他函数，在该外部函数中被调用以完成任务
  

（2）特点

• 执行：不会立即执行，通过()运算符调用才会执行
  
• 闭包：回调函数是一个闭包，能访问到其外层界说的变量
  
• this：指向离它最近或嵌套级别的函数的调用者
  

   解决回调函数this指向的方法：
- 箭头函数
- let self = this
  （3）长处

• 业务逻辑分离
  
• 克制重复代码
  
• 进步代码可维护性和可读性
  

（4）回调地狱

• 界说：回调函数中嵌套回调函数
  
• 目的：实现代码次序执行
  
• 缺点：造成代码可读性差，后期不好维护
  

1. setTimeout(function () {
2.    console.log('第一次打印');
3.     setTimeout(function () {
4.         console.log('第二次打印');
5.         setTimeout(function () {
6.             console.log('第三次打印');
7.         }, 1000)
8.     }, 2000)
9. }, 3000)

复制代码

• 解决：Promise、async/await
  

15、Promise

（1）界说

• Promise是异步编程的一种解决方案，本质是一个构造函数
  
• Promise雷同容器，保存着某个将来才会结束的变乱（通常是一个异步操作）的效果
  
• 从语法上说，Promise是一个对象，从它可以获取异步操作的消息
  
• Promise提供同一的API，各种异步操作都可以用同样的方法进行处理
  

（2）特点

• 对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的效果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“答应”，表示其他手段无法改变
  
• 一旦状态改变，就不会再变，任何时候都可以得到这个效果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会不停保持这个效果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个效果。这与变乱（Event）完全差别，变乱的特点是，如果你错过了它，再去监听，是得不到效果的
  

（3）优缺点

• 长处：
  
  
  
  • 可以将异步操作以同步操作的流程表达出来，克制了层层嵌套的回调函数
    
  • Promise对象提供同一的接口，使得控制异步操作更加容易。
    
  
  
• 缺点：
  
  
  
  • 无法取消Promise，一旦新建就立即执行，无法中途取消
    
  • 如果不设置回调函数，Promise内部抛出的错误，不会反应到外部
    
  • 当处于pending状态时，无法得知现在进展到哪一个阶段（刚开始或将完成）
    
  
  

（4）基本用法

• new Promise调用构造函数，其参数是一个函数，该函数的两个参数分别又是两个函数reslove和reject
  
• promise对象自带两个方法then和catch，这两个方法中会分别再传入一个回调函数，返回所需成功或失败的信息
  
  
  
  • then方法返回的是一个新的Promise实例，因此可以采取链式写法，即then方法后面再调用另一个then方法
    
  • catch方法调用指定发生错误时的回调函数
    
  
  

1. const promise = new Promise((resolve,reject)=>{
2.     //异步代码
3.     setTimeout(()=>{
4.         // resolve(['111','222','333'])
5.         reject('error')
6.     },2000)
7. })
8. promise.then((res)=>{
9.     console.log('success',res)        // success
10. }).catch((err)=>{
11.     console.log('fail',err)                // error
12. })

复制代码

• 
  
  
  
  • promise对象自带finally方法用于指定不管 Promise 对象最后状态怎样，都会执行的操作，本质是then方法的特例
    
  
  

1. promise
2. .then(result => {···})
3. .catch(error => {···})
4. .finally(() => {···});

复制代码

• all方法用于将多个 Promise 实例，包装成一个新的 Promise 实例
  

1. const databasePromise = connectDatabase();
2. const booksPromise = databasePromise.then(findAllBooks);
3. const userPromise = databasePromise.then(getCurrentUser);
5. Promise.all([
6.   booksPromise,
7.   userPromise
8. ])
9. .then(([books, user]) => pickTopRecommendations(books, user))

复制代码

16、async/await

• async/await 是对 Promise 的升级，用同步的方法写异步的代码
  
• async用于声明一个函数是异步的，await是等待一个异步方法执行完成
  

（1）async

• 作为一个关键字放到声明函数前面，表示该函数为异步任务，不会壅闭后面函数的执行
  
• 返回数据时自动封装为一个Promise对象
  

（2）await

• 不能单独使用，只能在使用async界说的函数中使用
  
• ​后面可以直接跟一个 Promise实例对象
  
• 可以直接拿到Promise中resolve中的数据
  

17、改变this指向（call、apply、bind）

（1）this

• 平凡函数：this指向调用者
  
• 箭头函数：本身无this，使用父作用域的this
  

   平凡函数：没有调用者，this默认指向window
箭头函数：this指向外包裹函数；如果没有外包裹函数，this指向window
特殊情况：严格模式下，this指向window就变为undefined
  （2）改变this指向的三个方法

• fn.call(this指向对象, 参数列表)
  

1. let obj1 = {
2.         name : 'james',
3.         getName1 : function(a,b,c) {
4.             console.log(`getName ${this.name}`); // getName davis
5.             console.log(`参数:${a},${b},${c}`); // 参数:1,2,3
6.         }
7.     }
8. let obj2 = {
9.         name : 'davis',
10.         getName2 : function() {
11.             console.log(`getName ${this.name}`);
12.         }
13.     }
14. obj1.getName1.call(obj2)
15. obj1.getName1.call(obj2,1,2,3)

复制代码

  call 在函数调用时改变函数this指向，第一个参数暂时改变this指向并立即执行
call 支持传入多个参数
  

• fn.apply(this指向对象, 参数数组)
  

1. let obj1 = {
2.     name : 'james',
3.     getName1 : function(a,b,c) {
4.         console.log(`getName ${this.name}`); // getName davis
5.         console.log(`参数:${a},${b},${c}`); // 参数:1,2,3
6.     }
7. }
8. let obj2 = {
9.     name : 'davis',
10.     getName2 : function() {
11.         console.log(`getName ${this.name}`);
12.     }
13. }
14. obj1.getName1.apply(obj2,[1,2,3])

复制代码

  apply 在函数调用时改变函数this指向，第一个参数暂时改变this指向并立即执行
apply 支持传入两个参数，第二个参数只能是数组情势
高级用法：Math.min/max.apply(false, arr)
  

• fn.bind(this指向对象, 参数列表)
  

1. let obj1 = {
2.     name : 'james',
3.     getName1 : function(a,b,c) {
4.         console.log(`getName ${this.name}`); // getName davis
5.         console.log(`参数:${a},${b},${c}`); // 参数:1,2,3
6.     }
7. }
8. let obj2 = {
9.     name : 'davis',
10.     getName2 : function() {
11.         console.log(`getName ${this.name}`);
12.     }
13. }
14. let fn = obj1.getName1.bind(obj2,1,2,3)
15. fn()

复制代码

  bind 第一个参数改变this指向，不自动执行，调用返回函数永久改变this指向
bind 可以传入多个固定参数
  18、继续

（1）配景

• 在实际编码过程中，很多雷同方法存放于构造函数中，会导致内存浪费（内存走漏），此时可以用继续解决
  

（2）界说

• 继续就是通过某种方式让一个对象可以访问另一个对象中的属性和方法
  

（3）方式

• 原型链继续：将父类的实例作为子类的原型
  
• 构造继续：使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类（没用到原型）
  
• 实例继续：为父类实例添加新特性，作为子类实例返回
  
• 组合继续：通过调用父类构造，继续父类的属性并保存传参的长处，然后通过将父类实例作为子类原型，实现函数复用
  
• 寄生组合继续：通过寄生方式，砍掉父类的实例属性，如许在调用两次父类的构造的时，不会初始化两次实例方法/属性，克制组合继续的缺点
  
  
  
  

19、防抖和节流

（1）防抖

• 防抖：触发变乱后n秒内只执行一次函数，若在n秒内重复触发，则重新计时
  
• 作用：防止抖动，克制变乱重复触发
  
• 案例：输入框搜刮遐想、页面缩放
  

1. function debounce(fn, delay){
2.         let timer = null;
3.         return function(){
4.                 clearTimeout(timer);
5.                 timer = setTimeout(()=> {
6.                         fn.apply(this, arguments);
7.                 }, delay)
8.         }
9. }

复制代码

（2）节流

• 节流：一连触发变乱但n秒内只执行一次函数，稀释函数的执行频率
  
• 作用：镌汰流量，稀释变乱触发频率
  
• 案例：鼠标频繁点击、鼠标滚动变乱
  

1. function throttle(fn, delay){
2.     let canUse = true
3.     return function(){
4.         if(canUse){
5.             fn.apply(this, arguments)
6.             canUse = false
7.             setTimeout(()=>canUse = true, delay)
8.         }
9.     }
10. }

复制代码

20、BOM/DOM

（1）常用的 BOM 对象和方法

BOM 对象和方法含义alert(“提示”)提示信息confirm(“确认”)确认信息prompt(“输入”)弹出输入框open(“url”,“black/self”,“新窗口巨细”)打开网页close()关闭当前网页 （2）常见的 DOM 元素选择方式

DOM 元素选择方式含义getElementById通过ID获取getElementsByClassName通过类名获取getElementsByTagName通过标署名获取document.documentElement获取 htmldocument.body获取 bodyquerySelector通过选择器获取一个元素（开辟常用）querySelectorAll通过选择器获取一组元素（开辟常用） 二、HTML/CSS

1、标签

（1）块级元素（display：block）

• 块级元素独占一行
  
• 宽度默认是容器的 100%
  
• 宽、高，内、外边距都可以单独设置
  
• 可以容纳内联元素和其他块级元素       div 、p、h1~h6、hr
  表单：form、fieldset、legend
  列表：ul、ol、li、dl、dt、dd
  表格：table、caption、thead、tbody、tfoot、th、tr、td
  语义化标签：header、footer、main、nav、section、article、pre
  

（2）行内元素（display：inline）

• 和相邻的行内元素在一行
  
• 默认的宽度就是本身内容的宽度
  
• 宽、高无效，但是程度方向上的内外边距可以设置，垂直方向无效
  
• 行内元素只能容纳纯文本或其他行内元素（a 标签除外）       a、span、abbr、small、b、strong、em、br、cite、i、code、label、q、select、sub、sup、textarea、var
  

（3）行内块元素（display：inline-block）

• 和相邻的行内（块）元素在一行，中间有空白间隙
  
• 默认的宽度就是本身内容的宽度
  
• 宽、高，内、外边距都可以设置
  
• 通过 inline-block、浮动、绝对定位、固定定位转化过来       img、input
  

标签类型分列方式宽高边距设置默认宽度块级元素独占一行均可单独设置容器的100%行内元素与相邻行内元素在一行宽、高无效，
程度方向上的内外边距可以设置，垂直方向无效自身内容的宽度行内块元素与相邻的行内（块）元素在一行，
中间有空白间隙均可单独设置自身内容的宽度 2、盒模型

名称含义width宽度height高度padding元素内容与元素边框间隔（添补）margin元素边框间距（盒子间距）

• 外边距合并：尺度文档流中，块级元素 margin 在垂直方向出现叠加征象，大值覆盖小值
  
  
  
  • 兄弟盒子：相邻块级元素垂直外边距取大值           只给同级元素中的一个元素设置 margin-top/bottom
    给每一个元素添加父元素，然后触发 BFC 规则（不推荐）
    
  • 父子盒子：嵌套块级元素垂直外边距子带父           使用伪元素 ::before，::after
    触发 BFC （overflow、float、display、position）
    给父元素设置 margin、padding (不推荐)
    
  
  

（1）尺度盒模型（content-box）

• 设置的 width 与 height 只包罗内容的宽、高， 不含边框和内外边距
  
• 尺寸计算公式：
  

   盒子实际宽度 = border _ 2 + padding _ 2 + 内容宽度(width)
盒子实际高度 = border _ 2 + padding _ 2 + 内容高度(height)
  

（2）怪异盒模型（border-box）

• 设置的 width 与 height 包罗内容的宽、高、边框、内边距，不含外边距
  
• 尺寸计算公式：       盒子实际宽度 = width = border _ 2 + padding _ 2 + 内容宽度
  盒子实际高度 = height = border _ 2 + padding _ 2 + 内容高度
  

3、浮动与清浮动

（1）浮动

• 元素 float 离开文档流移动（left/right），直到外边沿碰到包罗框或另一个浮动框位置
  

（2）清浮动

• 扫除浮动元素导致的高度塌陷，使页面布局正常体现
  

   （1）添加高度：父元素添加 height/border/padding
（2）额外标签：浮动元素后添加一个空块级元素含属性 clear:both
（3）单伪元素：父元素添加 .clearfix::after{content:‘’; display:block;clear:both}
（4）双伪元素：父元素添加 .clearfix::after,.clearfix::before // 趁便扫除外边距塌陷
（5）overflow ：父元素添加 overflow:hidden
  

• 常用清浮动配置
  

1. .clearfix::after{
2.         content: '';
3.         display: block;
4.         height: 0;
5.         clear: both;
6.         visibility: hidden;
7. }

复制代码

4、选择器

（1）基本选择器

基本选择器使用通配符同一调配全部属性，用*调用class元素中界说 class 属性，用 .类名调用id元素中界说id属性，用 #id名调用element用 标署名调用群组同时选择 多个类名，逗号隔开 （2）层次选择器

层次选择器使用包罗/后代元素被包罗在前一个元素内，选择此父元素内全部后代，用 父元素 后代元素 调用子匹配元素的孩子，用 父元素 > 子元素 调用相邻兄弟修改兄元素后第一个紧邻的弟元素样式，用 兄元素 + 弟元素 调用通用兄弟修改兄元素后全部弟元素样式，用 兄元素 ~ 弟元素 调用 （3）伪类选择器

• 链接伪类
  

链接伪类含义a:link未访问a:visited访问后a:hover悬停时a:avtive点击时

• 目的伪类
  
  
  
  • URL 通过锚点 #id 指向页面特定元素
    
  • 用 :target 调用
    
  
  

目的伪类含义<a href="#id">操作者变乱触发对象<p id="id">指向者变乱实施对象E:target查找点击操作者

• UI元素状态伪类
  

UI元素状态伪类含义E:hover鼠标指针移到元素上E:active元素激活时input:focus表单位素获取焦点时input:enabled全部启用的表单位素input:disabled全部禁用的表单位素input:checked复选或单选按钮选中状态的表单位素

• 布局伪类
  

布局伪类含义E:first-child查找兄弟元素中的第一个元素E:last-child查找兄弟元素中的最后一个元素E:nth-child(n)查找兄弟元素中的第n个元素E:nth-last-child(n)查找兄弟元素中倒数第n个元素E:first-of-type查找同类型兄弟元素中的第一个元素E:last-of-type查找同类型兄弟元素中的最后一个元素E:nth-of-type(n)查找同类型兄弟元素中第n个元素E:nth-last-of-type(n)查找同类型兄弟元素中倒数第n个元素Enly-child查找只有一个子元素的元素Enly-of-type查找只有一个同类型子元素的元素E:empty查找元素内部无任何文本和标签的元素E:root查找 HTML 页面中的根元素(html)E:first-letter查找元素首字母E:first-line查找元素首行E:selection查找选中文本(修改字体/配景颜色)

• 否定伪类
  

否定伪类含义E:not(F)E元素中除了F以外的全部元素 （4）伪元素

伪元素含义E::aftercontent 在元素之后体现E::beforecontent 在元素之前体现E::first-letter界说指定元素首字母E::first-line界说指定元素首行E::selection界说被用户选取的部分（修改字体/配景颜色） （5）属性值匹配

• 属性值前面添加元素（E）进一步限定，不添加元素（E）选择范围更广
  

属性值含义E[attr]包罗指定属性的元素[attr = “val”]包罗完全匹配属性值的元素[attr ^ = val]包罗 val 片断开头的元素[attr $ = val]包罗val 片断末端的元素[attr * = val]包罗 val 片断的元素[attr ~ = val]包罗属性值字符的元素，val 单独存在或与其他属性值空格隔开[attr | = val]包罗起始片断完全匹配的元素，起始值是 val 或 val- 开头 5、css 优先级

选择器优先级important!无条件优先内联样式1000id选择器100class、伪类、属性10标签伪元素1 6、常见布局方式

常见布局

（1）float

• 特点：元素离开了文档流，使父容器的高度塌陷，但是不离开文本流
  

float含义none默认无浮动left左浮动right右浮动

• 解决：清浮动
  
  
  
  • 父级添加 overflow : hidden
    
  • 父级添加 clearfix（推荐）
    
  
  

1. // 给父级元素添加了一个 ::after 伪元素，通过扫除伪元素的浮动，达到撑起父元素高度的目的.clearfix::after{
2.         content: '';
3.         display: block;
4.         height: 0;
5.         clear: both;
6.         visibility: hidden;
7. }

复制代码

• 
  
  
  
  • 浮动元素后添加空标签（不推荐）
    
  
  

1. <div style="clear: both"></div>                // 易造成结构混乱，不利于后期维护

复制代码

（2）position

• 特点：可以精准定位页面中的恣意元素
  
• 设置非 static 定位以后，可以设置 left、right、top、bottom
  

position类型是否脱标参照系是否常用static静态定位否尺度流很少relative相对定位否 (占位)自身位置单独使用absolute绝对定位是（不占位）带定位的父级搭配父级定位元素fixed固定定位是（不占位）浏览器可视区单独使用sticky粘性定位否 (占位)浏览器可视区单独使用   网页布局总结：
层级：尺度流（海底） ==> 浮动盒子（陆地） ==> 定位盒子（天空）
区别：
① 尺度流：块盒子上下分列
② 浮动：块盒子左右分列
③ 定位：盒子堆叠，默认后来居上，z-index 值调整堆叠次序
  （3）flex

功能：动态分列元素的方向、次序和方式

• 决定容器中元素的分布、分列，创建自适应浏览器窗口的弹性布局
  
• 自动将行内子元素转换为块级子元素
  
  
  
  

• flex 属性
  

flex盒子属性含义flex-direction主轴方向flex-wrap换行flex-flow前两条简写情势justify-content主轴对齐方式align-items侧轴对齐方式align-content多根轴线对齐方式

• 
  
  
  
  • 主轴对齐
    
  
  

justify-content含义flex-start当前行的最左边flex-end当前行的最右边center当前行的中间位置space-between两头对齐（间隔均分，首尾贴边）space-around两头环绕（间隔均分，首尾一半）space-evenly两头均分（间隔均分，首尾同均）

• 
  
  
  
  • 侧轴对齐
    
  
  

align-items含义flex-start当前行的最上边flex-end当前行的最下边center当前行的中间位置stretch子元素无高度或 auto，默认拉伸baseline以子元素第一行笔墨的基线对齐

• 项目属性
  

项目盒子含义order项目的分列次序，数值越小分列越靠前，默以为0flex-grow项目的放大比例，默以为0flex-shrink项目的缩小比例，默以为1flex-basis主轴是否有多余空间flex前三者简写，默以为0 1 autoalign-self单个项目个性对齐方式 （4）grid

• 特点：现在唯一一种 CSS 二维布局
  
• 网格单位：小格子，网格元素中最小的单位
  
• 网格线：划分网格的线，界说的是网格轨道
  

代码类型含义display:grid/inline-grid创建网格容器使其直系子元素成为网格项目grid-template-columns设置列设置列宽和数量（repeat()）grid-template-rows设置行设置行高和数量（repeat()）grid-gap设置行间距和列间距grid-row-gap与grid-column-gap的简写place-items设置项目位置align-items和justify-items的简写place-content设置grid位置align-content和justify-content的简写 （5）多列布局

功能代码含义划分列数column-count值的巨细代表列数多少调整列宽column-width列宽过小无影响，列宽过大改变列数调整间距column-gap一样平常不调整，默认即可列间隔线column-rule雷同border检索列高column-fill检索列高是否均分，或占满父元素高度 balance(默认)/auto(自动撑满)跨列标题column-span子元素设置all即可(前五全部设置父元素) （6）table

   父级容器 - display:table
子级容器 - display:table-cell
  （7）BFC

• 界说：BFC（Block Formatting Context），块级格式化上下文
  
• 特点：独立的布局空间，内部子元素不影响外部标签
  

触发条件触发值根元素htmlfloatleft、right、inheritpositionabsolute、fixedoverflowhidden、auto、scrolldisplayflex、inline-flex、grid、inline-block、table-cell

• 用途：
  
  
  
  • 自适应两栏布局
    
  • 扫除内部浮动
    
  • 阻止元素被浮动覆盖
    
  • 阻止 margin 重叠
    
  • 解决高度塌陷问题
    
  
  

   高度塌陷：父元素自适应高度，子元素浮动后脱标(离开尺度流)，父元素高度为 0
  7、度量单位

• 布局视口：编写的页面
  
• 视觉视口：屏幕窗口
  
• 理想视口：通过meta标签将布局直接放到视觉视口
  

1. <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no">

复制代码

度量单位含义参照物px像素/%百分比父元素em相对于父元素字体巨细父元素字体rem相对根元素字体巨细根元素字体vw相对于视口的宽度，1vw 等于视口宽度的1%（总视口宽度为100vw）视口宽度vh相对于视口的高度，1vh 等于视口高度的1%（总视口高度为100vh）视口高度rpx小步伐独有，把全部装备的屏幕，在宽度上中分为750份750rpx 8、HTML5/CSS3 新特性

（1）语义化标签

• 代码布局：使页面没有css的情况下，也可以或许出现出很好的内容布局
  
• 有利于SEO：爬虫依赖标签来确定关键字的权重，因此可以和搜刮引擎创建良好的沟通，资助爬虫抓取更多的有用信息
  
• 提拔用户体验：例如title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活运用
  
• 便于团队开辟和维护：语义化使得代码更具有可读性，让其他开辟职员更加明白你的html布局，镌汰差异化
  
• 方便其他装备剖析：如屏幕阅读器、盲人阅读器、移动装备等，以有意义的方式来渲染网页
  

（2）增强型表单

• 增长 type 类型：color、date、datetime、datetime-local、email、month、number、range、search、tel、time 等
  

• 增长 select 元素（下拉选框）、textarea 元素（文本域）、button 元素（按钮）、datalist 元素（预界说选项列表）
  

（3）媒体元素

• audio：音频
  
• video：视频
  

（4）canvas 绘图

• canvas 是画布，可以绘制复杂图形、做动画、处理图像、开辟游戏、处理视频，支持二维矢量绘图、三维绘图
  
• canvas 元素本身没有绘图本领，绘制工作通过 JS 调用 getContext(‘2d’)完成
  

（5）svg 绘图（可伸缩矢量图）

（6）地理定位

• 使用 getCurrentPosition() 方法来获取用户的位置，从而实现队地理位置的定位
  

（7）拖放API

（8）Web Worker

• worker 加载脚本文件 => 创建独立工作线程（主线程之外运行） => worker 线程运行结束把效果返回给主线程(处理计算密集型任务，优化主线程) =>浏览器提供JS多线程运行的宿主情况
  

（9）Web Storage

• 把握 cookie、Localstorage、 SessionStorage 三者区别
  

Web Storage数据生命周期存放数据巨细与服务器端通讯易用性Cookie可设置失效时间，默认是关闭浏览器后失效4K左右每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题原生Cookie接口不友好，需要步伐员自己封装localStorage除非被扫除，否则永久保存5MB左右仅在客户端保存，不到场和服务器的通讯原生接口可以接受，也可以再次封装sessionStorage仅在当前会话下有用关闭页面或浏览器后被扫除5MB左右仅在客户端保存，不到场和服务器的通讯原生接口可以接受，也可以再次封装 （10）Websocket

• 把握 websocket 和 HTTP 的区别
  
  
  
  • 相同点：HTTP 和 Websocket 都是基于TCP的应用层协议
    
  • 差别点：
    
    
    
    • websocket 是双向通讯协议，模拟socket协议，可以双向发送和接受消息；HTTP 是单向的，通讯只能由客户端发起。
      
    • websocket 是需要浏览器和服务器通过握手创建连接，HTTP 是浏览器向服务器发送连接，服务器预先不知道这个连接。
      
    
    
  • 接洽：websocket 创建握手时需要基于 HTTP 进行传输，创建连接之后不再需要HTTP协议
    
  
  

（11）选择器

（12）边框与圆角

   border-radius：程度半径/垂直半径
四个值：左上/右上/右下/左下
三个值：左上/右上和左下/右下
两个值：左上和右下/右上和左下
一个值：4角见效
  （13）rgba

• rgba(r, g, b, a);
  

（14）盒子

• box-shadow: cx cy 含糊程度 扩展程度 颜色 内阴影;
  
• box-sizing:border-box;
  

（15）配景与渐变

• background：color position size repeat origin clip attachment image;
  
• background-image: linear-gradient(to方向/deg, color1 , color2);
  

（16）过渡

• transition：property duration timing-function delay;
  

（17）变换

• transform：
  
  
  
  • 2D：rotate(deg) translate() scale() skew(deg);
    
  • 3D：
    
    
    
    • 开启：transform-style: preserve-3d;
      
    • 景深：perspective: px;
      
    
    
  
  

（18）动画

• animation：animationname，duration，timing-function，delay，count，direction（默认normal），play-state（默认running）
  

1. @keyframes  animationname{
2.   keyframes-selector{
3.   cssStyles;
4. }

复制代码

三、计算机网络

1、HTTP 报文

• 构成：请求/相应行、请求/相应头、请求/相应体
  
  
  
  

2、常见状态码

（1）状态码类型

状态码类别缘故原由短语1xxInformation（信息状态码）接受的请求正在处理2xxSuccess（成功状态码）请求正常处理完毕3xxRedirection（重定向状态码）需要进行附加操作以完成请求4xxClient Error（客户端错误状态码）服务器无法处理请求5xxServer Error（服务端错误状态码）服务器处理请求出错 （2）常见状态码

1xx信息状态码100（继续） 接受的请求正在处理2xx成功状态码200（成功） 服务器已成功处理请求，服务器提供了请求网页201（已创建） 请求成功并且服务器创建了新的资源202（已接受） 服务器已接受请求，但尚未处理3xx重定向状态码300（多种选择） 表示要完成请求，需要进一步操作，通常用来重定向301（永久移动） 资源已被分配了新的 URL302（暂时移动） 资源暂时被分配了新的 URL303（查察其他位置） 表示资源存在另一个URL，用GET方法获取资源304（未修改） 自从前次请求后，请求网页未修改过。服务器返回此相应时，不会返回网页内容4xx客户端错误状态码400（错误请求) 服务器不明白请求的语法401(未授权) 发送的请求需要身份验证，可能需要登录403（禁止) 服务器拒绝请求404（未找到) 服务器找不到请求的网页5xx服务端错误状态码500（服务器内部错误） 服务器碰到错误，无法完成请求501（尚未实施） 服务器不具备完成请求的功能502（错误网关） 服务器作为网关或代理，从上游服务器收到无效相应503（服务不可用） 服务器现在无法使用（由于超载或停机维护） 3、TCP 三次握手/四次挥手

• UDP：在传送数据前不需要创建连接，远地的主机在收到UDP报文后也不需要确认。虽然UDP不提供可靠交付，但因此省去很多的开销，使它的速率较快。实时性要求较高的服务，常使用UDP。对应的应用层的协议主要有 DNS、TFTP、DHCP、SNMP、NFS 等
  
• TCP：提供面向连接的服务，在传送数据之前必须先创建连接，数据传送完成后要开释连接。因此TCP是一种可靠的运输服务，但因此增长了很多开销，比如确认，流量控制等。对应的应用层的协议主要有 SMTP、TELNET、HTTP、FTP 等
  

（1）TCP连接的创建（三次握手）

• 最开始客户端和服务器都处于CLOSED状态。自动打开连接的为客户端，被动打开连接的是服务器
  

   

• TCP服务器进程先创建传输控制块TCB，时刻准备接受客户进程的连接请求，此时服务器就进入了LISTEN（监听）状态
  
• TCP客户进程也是先创建传输控制块TCB，然后向服务器发出连接请求报文，这是报文首部中的同部位SYN=1，同时选择一个初始序列号 seq=x ，此时，TCP客户端进程进入了 SYN-SENT（同步已发送状态）状态。TCP规定，SYN报文段（SYN=1的报文段）不能携带数据，但需要斲丧掉一个序号
  
• TCP服务器收到请求报文后，如果同意连接，则发出确认报文。确认报文中应该 ACK=1，SYN=1，确认号是ack=x+1，同时也要为自己初始化一个序列号 seq=y，此时，TCP服务器进程进入了SYN-RCVD（同步收到）状态。这个报文也不能携带数据，但是同样要斲丧一个序号
  
• TCP客户进程收到确认后，还要向服务器给出确认。确认报文的ACK=1，ack=y+1，自己的序列号seq=x+1，此时，TCP连接创建，客户端进入ESTABLISHED（已创建连接）状态。TCP规定，ACK报文段可以携带数据，但是如果不携带数据则不斲丧序号
  
• 当服务器收到客户端简直认后也进入ESTABLISHED状态，此后两边就可以开始通讯了
  

  （2）TCP连接的开释（四次挥手）

• 数据传输完毕后，两边都可开释连接。最开始客户端和服务器都是处于ESTABLISHED状态，然后客户端自动关闭，服务器被动关闭
  
  
  
  

   

• 客户端进程发出连接开释报文，并且停止发送数据。开释数据报文首部，FIN=1，其序列号为seq=u（等于前面已经传送过来的数据的最后一个字节的序号加1），此时，客户端进入FIN-WAIT-1（终止等待1）状态。 TCP规定，FIN报文段纵然不携带数据，也要斲丧一个序号
  
• 服务器收到连接开释报文，发出确认报文，ACK=1，ack=u+1，并且带上自己的序列号seq=v，此时，服务端就进入了CLOSE-WAIT（关闭等待）状态。TCP服务器通知高层的应用进程，客户端向服务器的方向就开释了，这时候处于半关闭状态，即客户端已经没有数据要发送了，但是服务器若发送数据，客户端依然要接受。这个状态还要持续一段时间，也就是整个CLOSE-WAIT状态持续的时间
  
• 客户端收到服务器简直认请求后，此时，客户端就进入FIN-WAIT-2（终止等待2）状态，等待服务器发送连接开释报文（在这之前还需要接受服务器发送的最后的数据）。
  服务器将最后的数据发送完毕后，就向客户端发送连接开释报文，FIN=1，ack=u+1，由于在半关闭状态，服务器很可能又发送了一些数据，假定此时的序列号为seq=w，此时，服务器就进入了LAST-ACK（最后确认）状态，等待客户端简直认
  
• 客户端收到服务器的连接开释报文后，必须发出确认，ACK=1，ack=w+1，而自己的序列号是seq=u+1，此时，客户端就进入了TIME-WAIT（时间等待）状态。注意此时TCP连接还没有开释，必须经过2∗ *∗MSL（最长报文段寿命）的时间后，当客户端打消相应的TCB后，才进入CLOSED状态
  
• 服务器只要收到了客户端发出简直认，立即进入CLOSED状态。同样，打消TCB后，就结束了这次的TCP连接。可以看到，服务器结束TCP连接的时间要比客户端早一些
  

  4、网页从开始到加载的过程（输入url以后你的电脑淦了什么）

• 输入网址后做域名剖析：
  
  
  
  • 先查察本地hosts文件是否保存对应ip地点，若有直接发起请求
    
  • 未果从本地区名服务器查找
    
  • 未果从根域名服务器查找，查找到对应的ip地点后把对应规则保存到本地的hosts文件
    
  
  
• 根据 ip 地点查到服务器：进行http请求，三次握手四次挥手创建断开连接
  
• 服务器处理：
  
  
  
  • 返回304，协商缓存，直接使用客户端缓存即可
    
  • 返回200，同时返回对应的数据
    
  
  
• 服务器返回数据，客户端自上而下执行代码：
  
  
  
  • CSS加载，不壅闭DOM树剖析，但会壅闭DOM树渲染，且壅闭后续JS执行
    
  • JS加载，由于增删节点可能影响DOM剖析，可以给script添加一个defer或者async的标签
    
    
    
    • defer：不会壅闭DOM剖析，等DOM剖析完之后在运行，在DOMContentloaed之前
      
    • async: 不会壅闭DOM剖析，等该资源下载完成之后立刻运行
      
    
    
  • DOM树渲染和Render树渲染（浏览器渲染过程）
    
    
    
    • 剖析html并构建Dom树
      
    • 剖析css并形成css树
      
    • 将cssom和dom合并成render树
      
    • 布局 render 树（layout）
      
    • 绘制 render 树（painting）
      
    • 回流重绘
      
    
    
  
  

5、回流/重绘

（1）界说

• 回流：布局引擎根据各种样式计算每个盒子在页面上的巨细与位置
  
• 重绘：回流布局完毕，浏览器根据每个盒子特性进行绘制，更改元素颜色、配景
  

（2）特点

• 回流必将引起重绘，重绘不一定引起回流
  

（3）优化

• 多属性使用简写
  

   如：boder可以代替boder-width、boder-color、boder-style
  

• 创建多个dom节点时，使用documentfragment创建
  
• 克制使用table布局
  
• 克制设置多层内联样式，克制节点层级过多
  
• 克制使用css表达式
  
• 将频繁重绘或回流的节点设置为图层，图层可以或许阻止该节点的渲染举动影响到别的节点（例：will-change\video\iframe等标签），浏览器会自动将该节点变为图层
  

6、https 与 http 区别

区别HTTPHTTPS端口80443证书无需证书需要证书（用于验证服务器身份）连接TCP 三次握手创建连接之后传输数据TCP 连接之后客户端与服务器进行 SSL 加密，确定对话密钥完成加密后传输数据协议超文本传输协议，信息明文传输ssl加密传输协议，为浏览器和服务器之间的通讯加密，确保数据传输的安全安全性较低较高 7、跨域

（1）配景

• 缘故原由：协议、域名、端标语只要有一个不一致就会引起跨域，跨域是浏览器的安全机制导致的，仅存在浏览器中
  
• 界说：跨域就是通过某些手段来绕过同源策略限定，实现差别服务器之间通讯的效果
  

（2）方法

• 后端
  

   开辟时可以通过配置代理服务器或者浏览器安装插件的方式暂时解决，但上线后还是需要服务器做配置
  

• JSONP
  

   使用script标签的src属性实现跨域，通过将前端方法作为参数传递到服务器端，然后由服务器端注入参数后再返回，实现服务器端向客户端通讯。JSONP 使用简单且兼容性不错，但仅限于 get 请求
  

• CORS
  

   当请求违反了同源策略，就在请求头添加 Access-Control-Allow-Origin 属性，浏览器会判定相应中 Access-Control-Allow-Origin 值是否和当前的地点相同，匹配成功后才会做相应处理，否则继续报错。缺点是会忽略cookie，而且对浏览器版本有一定的要求
  

• nginx 代理跨域
  

   可以将前端项目部署到和接口同源的当前本地的服务器上。在vue.config.js 中进行代理配置，假设访问 http://localhost:9528/api/login 时会转换为间接访问 http://localhost:3000/api/login
  

• WebSocket 协议跨域
  

   一种浏览器的API，它的目的是在一个单独的长期连接上提供全双工、双向通讯(同源策略对web sockets不适用)。web sockets原理：在JS创建了web socket之后，会有一个HTTP请求发送到浏览器以发起连接。取得服务器相应后，创建的连接会使用HTTP升级从HTTP协议交换为web sockt协议。 只有在支持web socket协议的服务器上才能正常工作
  

• nodejs 中间件代理跨域
  
• postMessage 跨域
  

8、五层协议的体系布局

• 应用层：通过应用进程间的交互来完成特定网络应用
  
• 运输层：负责向两台主机中进程之间的通讯提供通用的数据传输服务TCP提供面向连接的、可靠的数据传输服务，传输单位为报文段UDP提供无连接的尽最大努力的数据传输服务，传输单位为用户数据报
  
• 网络层：提供主机间的通讯服务。路由器天生转发表，依据转发表转发分组至下一个路由器
  
• 数据链路层：直连网络中相邻节点的链路上传输帧
  
• 物理层：实现比特传输
  
  
  
  

9、meta 标签

• 为浏览器提供 html 的元信息（信息的信息）
  

1. <!-- 规定 html 字符编码 -->
2. <meta charset="UTF-8">
4. <!-- 设置移动端的视区窗口 -->
5. <meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">
7. <!-- 移动端点击300ms 延时，可以对放大禁用 -->
8. <meta name="viewport" content="user-scalable=no">
9. <meta name="viewport" content="initial-scale=1,maximum-scale=1">
11. <!-- 设置http头 -->
12. <meta http-equiv="content-Type" content="text/html; charset=gb2312">
14. <!-- 图片403 -->
15. <meta name="referrer" content="no-referrer" />
17. <!-- DNS 预解析 -->
18. <meta  http-equiv="x-dns-prefetch-control" content="on">
19. <link  rel="dns-prefetch" href="//www.zhix.net">

复制代码

10、登录实现

• 用户第一次登录时，后端天生该用户对应token（唯一且有时效性）存入数据库并返回前端
  
• 前端收到token后存储在localStorage，纪任命户登录状态，下次发送用户相干请求时需携带token并放在header中
  
• 后端需要设置Access-control-allow-headers : token克制跨域问题，后端给每个用户相干的接口都加上token校验
  
• 每次用户切换界面时都进行路由守卫的拦截验证，登录状态为true，可以访问；false，不答应访问
  
• 用户退出登录时删掉对应token
  

11、浏览器的多进程

（1）缘故原由

• 克制一个 tab页出错而导致整个浏览器崩溃
  
• chrome 差别标签之间是进程，其他浏览器是线程
  

（2）构成

• Browser 主进程（仅一个）
  
  
  
  • 负责页面交互、进程之间协调
    
  
  
• GPU 加速进程
  
• 渲染进程
  
  
  
  • 内部多线程
    
    
    
    • GUI 渲染线程
      
      
      
      • 用来渲染的，构建 DOM 树、render 树，回流重绘等
        
      • 与 JS 引擎线程互斥
        
      
      
    • JS 引擎线程
      
    • 变乱触发线程
      
    • 定时触发器线程
      
    • 异步 http 请求线程
      
    
    
  • 每个页面的渲染进程互不影响
    
  
  
• 第三方插件进程
  

（3）进程和线程

区别线程进程规模小大关系构成进程包罗线程资源调度和分配资源的基本单位拥有资源的基本单位并发执行同一进程差别线程差别进程间 12、进程间的通讯方式

• 无名管道通讯：半双工通讯，只能单向传输，一样平常用于父子通讯和兄弟通讯
  
• 有名管道通讯：半双工通讯，只能单向传输，可以是无关进程之间通讯
  
• 消息队列
  
• 信号量
  
• 共享内存
  

四、Vue

1、MVVM 相应式

• vue 采取数据劫持共同发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的getter和setter，在数据变动时，发布消息给依赖网络器（dep中的subs），去通知（notify）观察者，做出对应的回调函数，更新视图
  
• MVVM 作为绑定的入口，整合Observer,Compile和Watcher三者，通过Observer来监听model数据变化，通过Compile来剖析编译模板指令，最终使用Watcher搭起Observer，Compile之间的通讯桥路，达到数据变化引起视图更新；视图交互变化引起数据变动的双向绑定效果
  

   

• M：Model，数据模型（保存数据，处理数据业务逻辑）
  
• V：View，视图（展示数据，与用户交互）
  
• VM：View Model，数据模型和视图的桥梁
  
• MVVM设计模式最大的特点是支持数据的双向传递
  

  2、nextTick

• 界说：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立纵然用这个方法，获取更新后的 DOM
  
• 应用
  
  
  
  • 在Vue生命周期函数created()中操作DOM，可以使用Vue.nextTick()回调函数
    
  • 在数据改变后要执行的操作，而这个操作需要等数据改变后而改变DOM布局的时候才进行操作，可以使用nextTick
    
  
  

3、生命周期函数

生命周期含义beforeCreate创建之前，此时还没有data和MethodCreated创建完成，此时data和Method可以使用了；
在Created之后beforeMount之前如果没有el选项的话那么此时生命周期结束，停止编译，如果有则继续beforeMount渲染之前mounted渲染完成，且vm实例中已添加$el；
已替换DOM元素（双括号中的变量），此时可以操作DOM（但无法获取元素高度等属性，可借助nextTick()）beforeUpdatedata改变后，对应的组件重新渲染之前updateddata改变后，对应的组件重新渲染完成beforeDestory实例销毁之前，此时实例仍可使用destoryed实例销毁后 4、computed 、watch、method的区别

• computed：计算属性，其效果会被缓存，依赖的相应式属性变化才会重新计算
  
• watch：一个对象，键是需要观察的表达式，值是对应回调函数，观察的数据改变后进行对应回调
  
  
  
  • 深度监听，后面加一个deep:true
    
  • 监听完立马运行，后面加一个immediate:true
    
  
  
• methods：一个详细操作方法，主要书写业务逻辑
  

5、Vue-router 模式

• hash：监听hashchange变乱实现前端路由，使用url中的hash模拟hash，保证url改变时，页面不会重新加载。
  
• history：使用pushstate和replacestate将url替换但不刷新，一旦刷新就可能404，由于没有当前真正路径；解决这一问题需要后端共同，将不存在的路径重定向到入口文件
  

6、传值

五、Git

1、常用命令

2、rebase 和 merge

• 相同：都是合并分支
  
• 差别：
  
  
  
  • rebase 不会产生额外的 commit
    
  • merge 会把这两个分支的遗漏 commit 纪录重新创建一个commit保存起来
    
  
  

• 选择：Merge具有更高的可追溯性，而Rebase则更整齐且易于审核，参考团队要求使用
  

六、微信小步伐和uniapp

1、页面标签

• 页面标签基本相同，如 view，text、scroll-view，input、picker、swiper 等
  

2、生命周期

• 生命周期相同：onLoad，onShow，onPullDownRefresh、onReachBotton、onShareAppMessage 等
  

3、api

• api 基本相同，wx 换成 uni
  

类型apiwxwx.request、wx.showModal、wx.showToast、wx.showLoading、
wx.chooseImage、wx.switchTab、wx.navigateo、wx.setStorageSync 等uniuni.request，uni.showModal、uni.showToast、uni.showLoading、
uni.chooseImage、uni.switchTab、uni…navigateo、uni.setStorageSync 等 4、变乱

类型触摸变乱名称函数传参函数接收参数wxbindtap<view bindtap="click" data-id="id"></view>fn(e){ this.setData({ currentId:e.currentTarget.dataset.id }) }uni@click<view @click="click(id)"></view>fn(id){ this.currentId = id } 5、for/if/src

类型for循环if判定src动态接收图片wx<view wx:for="{{currentList}}" wx:for-index="s_index" wx:for-item="s_item"></view><view wx:if="{{isShow}}"></view><image src="{{item.img}}"></image>uni<view v-for="(s_item,s_index) in currentList"></view><view v-if="isShow"></view><image :src="item.img"></image> 6、页面传参

类型代码接收参数wx<navigator url="/pages/live?id={{item.room_id}}"></navigator>onLoad(options){}uni<navigator :url="'/pages/live?id=' + item.room_id"></navigator>onLoad(options){} 7、全局数据

类型界说调用wxglobalData:{baseUrl:“www.com”}getApp().globalData.baseUrlunithis.prototype.baseUrl = “https://www.ccc”this.baseUrl 8、数组拼接

类型代码wxthis.setData({ list:this.data.list.concat(res.list) })unithis.list = […this.list,…res.list] 9、阻止冒泡

类型代码wx<view catchtap="clickTab">我是按钮</view>uni<view @click.stop="clickTab">我是按钮</view>   参考：
《想进互联网大公司？那这些题你总得会吧？前端面试题2022及答案前端面试题2022及答案》
《前端面试八股文（详细版）—上》
《微信小步伐与uni-app的区别》

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4