[JavaScript知识库]前端重要知识点总结（更新中）

前端重要知识点总结

因为本人目前也还在学习阶段，如果有哪里总结的有问题，欢迎指出

HTML

1.行内元素有哪些？块级元素有哪些？空元素有哪些？

• 行内元素：

  <a></a> <span></span> <img src="" alt=""> <input type="text"> <label for=""></label>
  

• 块级元素：

  <div></div>
  <p></p> 
  <ul>
      <li></li>
  </ul>
  <ol>
      <li></li>
  </ol>
  <pre></pre>
  <form action=""></form>
  <h1></h1>
  ~
  <h6></h6>
  

• 空元素（自闭合标签）：

  <img src="" alt="">
  <input type="text">
  <link rel="stylesheet" href="">
  <br>
  <hr>
  <meta>
  

2. 页面导入样式时，link和@import有什么区别？

• 页面被加载时，link标签引入的样式表会同步加载；而@import引入的样式表会等到页面加载完毕再加载。

3. title与h1的区别、b与strong的区别、i与em的区别？

• 首先我们要了解物理元素和逻辑元素，上述问题中h1、b、i属于物理元素，而title、strong、em则属于逻辑元素。
• 物理元素仅是为了告诉渲染引擎如何渲染该元素中的内容的样式，而逻辑元素则同时告诉搜索引擎一些重要的信息，如标题、需要强调的内容，顺便告诉渲染引擎应当以什么样的样式来渲染元素中的内容。使用逻辑元素更有利于seo优化。

4. img标签的title和alt有什么区别？

• alt是img元素的特有属性，用于对图片内容的等价描述，当图片无法正常加载时展示alt中的内容，方便用户了解图片想要表达的具体内容。
• title是当用户鼠标划过是所展示的文字内容，能提高用户的体验。另一方面也提高图片的高可访问性，除了纯装饰图片（如网站logo）都应当设置有意义的值。搜索引擎会重点分析。

5. png、jpeg、gif这些图片格式解释一下，分别什么时候用？

• jpg是有损压缩且不支持透明度，但图片质量高
• png、gif是无损压缩，支持透明度，其中gif还支持动画，但图片质量一般。

CSS

1.介绍一下CSS盒模型

• 盒模型分为四个区域：content-box、padding-box、border-box、margin
• 盒模型的分类：标准盒模型、怪异盒模型、弹性盒模型（flex）、多列布局盒模型（grid）
  • 标准盒模型的宽高是内容的宽高，而盒子的大小是内容盒加上padding、border和margin；
  • 怪异盒模型又叫IE盒模型，盒子的大小等于宽高，设置方式box-sizing：border-box；
  • 弹性盒模型和多列布局盒模型需要分别开启display flex和grid

2. line-height和height区别

• line-height是行高，是决定元素中每行文本所占的高度，height是元素本身的高度。
• 当我们想让文字垂直居中时，可以利用line-height和height相等来实现。

3. CSS选择符有哪些？哪些属性可以继承？

• id选择器、类选择器、标签选择器、相邻选择器、子选择器、后代选择器、通配符选择器、伪类选择器、伪元素选择器。
  • 伪类选择器：a:hover a:last-of-type a:first-of-type button:enabled button:disabled input:checked
• 可继承的属性：font-size、color、font-family、text-indent 基本上和文本样式相关的属性都可以继承。

4. CSS优先级算法

• !important > 内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符 > 继承样式
• （0，0，0，0）优先级要按位比较
• 第一位是!important、第二位是id选择器、第三位是类选择器、第四位是标签选择器
• 先比较第一位，第一位相同则向后比较，当权重一样时、写在后面的样式会覆盖前面的样式

5. 一个盒子不给宽度和高度如何设置水平垂直居中？

• 父元素设置display：flex justify-content：center align-items：center
• 父元素设置position：relative，子元素设置 position：absolute left：50% top：50% transition：translate（-50%，-50%）

6. 对BFC规范的理解

• bfc是block formatting context 字面意思位块级格式化上下文，即形成一块独立渲染的区域，区域内元素渲染不会被边界外的元素所影响。
• 形成bfc的条件：
  • float不为none
  • position位absolute或fixed
  • display为 inline-block、flex
  • overflow不为visible
• 开启bfc的特点：
  • 开启bfc的元素不会被浮动元素覆盖
  • 开启bfc时，父子元素不会产生外边距合并问题
  • 开启bfc时，父元素可以包含浮动子元素，解决高度坍塌
• 利用bfc+浮动可以实现多栏布局

7. 清除浮动有哪些方式

• 为什么要清除浮动
  • 标准流的情况下，父元素高度为0时，会被子元素的高度撑开
  • 当子元素开启浮动的情况下，父元素捕捉不到子元素的内容，则高度还是0，这就是我们常说的高度坍塌
• 清除浮动的方法
  • 父级元素定义伪类元素 content：’’； height：0； visibility：hidden； clear：both；
  • 父元素结尾处添加空div 被对其设置clear：both
  • 父元素设置 overflow:hidden或auto
  • 父元素定义高度 即设置height

8. position都有哪些值，分别是根据什么定位的

• static（默认值）：元素正常渲染在标准流中
• relative：相对定位，即相对于元素原本在标准流中的位置进行定位
• fixed：固定定位，相对于浏览器视口或者iframe进行定位
• absolute：绝对定位，相对于最近一级不是static的元素进行定位，如果没有找到，则相对于body进行定位
• sticky：粘性定位，可以理解为relative和fixed的结合，默认情况下是relative，当元素距离浏览器窗口的到达设置的范围就会变成fixed，固定在当前位置，常应用于网站的工具栏、搜索栏

9. CSS sprite 有什么优缺点

• 雪碧图又叫精灵图，是将多个图片集合到一整张图片上，通过调整background-position和元素大小来展示需要的背景图片
• 优点
  • 减少网络请求次数，提升页面性能
  • 解决大量的图片命名问题
  • 更换图片的整体风格比较方便
• 缺点
  • 图片合并麻烦i
  • 修改一个图片可能需要重新布局整个图片、样式

10. display：none和visibility-hidden的区别

• 两者都是在页面上隐藏元素的常见方法
• display：none
  • 元素在页面彻底消失，不占据空间、性能上会引起页面的重绘与重排，开销较大
  • 子元素无法展示在页面上
• visibility：hidden
  • 元素在页面消失，但是依旧占据空间，不能点击，性能上只会引起重绘，开销较小
  • 子元素visibility不设置hidden时可以展示
• 其他隐藏页面元素的方法
  • opacity：0
    • 透明度为0 占据空间 可以点击 性能方面重建图层，开销较小
  • z-index设置为负，被其他元素遮挡

JavaScript

1. 延迟加载JS的方式有哪些

• 正常情况：js文件的加载和执行会阻塞dom解析
  

• defer（延迟）：异步加载js文件，当dom解析后再执行

  <script src="demo.js" defer="defer"></script>
  

• async（异步）：异步加载js文件，js文件加载完成后立即执行

  <script src="demo.js" async></script>
  

2. 数据类型

• 基本数据类型 -> 存放在栈（stack）中
  • Number 范围：-(2^53 - 1) ~ (2^53 - 1)
  • String
  • Boolean
  • Undefined
  • Null
  • Symbol 唯一值
  • BigInt 超出Number精度的值都能表示
• 引用数据类型 -> 存放在堆（heap）中
  • Object
  • Array
  • Function
  • Date 日期对象
  • RegExp 正则对象
• 为什么null在类型检测时是object
  • 因为js中为了提高性能采用32位来存储数据，当前三位为000时会判断为object，而null 32位全是0，所以被误判为object
• 类型检测 typeof、Object.prototype.toString.call()

3. null 和 undefined 的区别

• undefined表示未定义，例如一个变量从未被赋值
• null表示空，常用于释放一个对象（泛指对象、数组、函数）的引用

4. == 和 === 有什么不同

• == 表示相对的相等 会将不同数据类型的值转换为相同的数据类型之后再比较值是否相当
  • NaN永远不等于NaN
  • 0 == false
  • 0 == []
  • 0 == ‘0’
  • 0 == ‘’
  • undefined == null
  • 0 != null
• === 表示绝对相等 当数据类型不同时，直接返回false；数据类型相同时才比较值

5. 快速寻找多维数组中的最小值、最大值

• 利用arr.flat() ->arr.flat(Infinity) Infinity表示无限深度

const arr = [1,[2,3],[4,[5,6,[7,8,[9],10],11,12],13],14]
const arr2 = arr.flat(Infinity)
const min = Math.min(...arr2)
const max = Math.max(...arr2)

6. JS中的作用域、作用域链

• 作用域是函数一个隐藏属性[[scope]]

• 作用域链是函数的执行器上下文的集合

• 函数在定义时 其作用域链（scope chain）第0位为外层函数的AO，最后一位为GO（global object）

• 函数在执行时 会生成一个AO（activity object）对象，放在其作用域链的第0位，第1位外层的AO，最后一位为GO

7. 原型、原型链

• 构造函数（constructor）：function Person () {}
• 实例对象：const person = new Person()
• 原型对象：Person.prototype === person.__proto__
• 实例可以继承原型对象的属性和方法，当访问实例对象一个属性时，如果自身没有，会顺着实例对象的原型链一层一层向上查找，如果整个原型链上没有，则返回undefined
• Person.prototype.__proto__即Person构造函数的原型的原型，即Object构造函数的原型对象，则有Person.prototype.__proto__ === Object.prototype === person.__proto__.__proto__
• instanceof
  • obj instanceof constructor 返回值为Boolean类型，即判断obj的原型链上是否存在constructor的原型对象（constructor.prototype）

8. 闭包

• 因为定义在A函数内部的B函数可以访问A函数中的变量，所以当函数A的返回值是B函数时就会形成闭包，闭包可以理解为函数A内部和外部的桥梁。
• 函数在执行过后会自动清除内部的变量，释放内存，当闭包中如果有对当前变量的引用则不会被回收，可以让变量长久保存，又不会污染全局变量
• 根据闭包的特点，可以封装私有变量，但是无意义的闭包，只会徒增内存消耗。

9. 预编译

• 暗示全局变量（imply global）

  • 如果变量未经声明就赋值，则视为全局变量，即为window对象的属性，即使该赋值发生在函数体内

• 变量声明提升发生在预编译期间

  1. 创建AO/GO对象
  2. 找到形参、变量声明作为AO/GO对象的key，其value为undefined
  3. 形参与实参的值相统一，即AO/GO对象的key为形参，value为实参
  4. 找到函数声明，函数名作为AO/GO对象的key，value为函数体

10. new操作符都做了哪些事情

• 创建一个空对象objconst obj = Object.create(null)

• 让空对象的obj.__proto__为constructor.prototype

• constructor.apply(obj)将构造函数的this指向为空对象

• 返回构造函数的值或this

  function myNew (fn, ...args) {
      const obj = Object.create(null)
      obj.__proto__ = fn.prototype
      let res = fn.apply(obj, args)
      if (typeof (res) === 'object') {
          return res
      } else {
          return obj
      }
  }
  

11. this的指向问题

• 如果有new操作符，则this为新创建的对象，优先级4
• 显式硬绑定 => call、apply、bind ，优先级3
  1. call 接收参数为（this, …arguments）
  2. apply 接收参数为 （this, arguments） => 第二个参数为函数调用的参数组成的数组
  3. bind 接收一个参数 为this 并返回一个新的函数，函数执行中this指向为bind所绑定的对象
• 隐式绑定 => 函数执行时，上下文对函数的调用所绑定的this ，优先级2
• 默认绑定 => 正常情况下是全局window对象，严格模式下为undefined ，优先级0
• 特殊情况 => 如果显式绑定所传入的this指向为undefined、null这类无效且无意义的值则会被忽略，这时候按默认绑定规则

12. JS判断变量是不是数组

• Array.isArray(arr)
• Object.prototype.toString.call(arr)
• arr instanceof Array

13. slice是干嘛的，splice是否会改变原数组

• slice
  • slice是字符串和数组的方法，slice单词译为切片，不改变原字符串或数组
  • str.slice(start, [end])或arr.slice(start, [end])，其中end为可选参数，如果不传end则从start开始切片到末尾
• splice
  • splice是数组身上的方法，译为拼接，不改变原数组
  • arr.splice(index, [howmany], [item1...itemN])
    • index为从那里开始删除/添加项目，使用负值为从结尾开始
    • howmany为删除/替换项目的个数
    • item1~itemN为添加的项目
  • 返回值为新数组，是删除项目的集合

14. JS数组去重

• 利用ES6 Set

  function formatArray (arr) {
      return Array.from(new Set(arr))
  }
  

• 利用indexOf

  function formatArray (arr) {
      const result = []
      for(let i = 0; i < arr.length; i++) {
          if (result.indexOf(arr[i]) === -1) {
  			 result.push(arr[i])
          }
      }
      return result
  }
  

15. 说一下call、apply、bind的区别

• call、apply、bind都是为了改变this的指向
• call
  • .call(obj, arg1,arg2...argN)
• apply
  • .apply(obj, [args])
• bind
  • bind会返回一个新函数函数调用时，this指向为obj
  • const changeThis = function.bind(obj)

16. sort背后的原理是什么

• sort会改变原数组

• 当sort中没有回调函数作为参数时，会将数组中的每一项转换为unicode编码进行排序

• 当传入回调作为参数时

  • 回调函数返回值小于0 a排在b前
  • 回调函数返回值等于0 a，b位置不互换
  • 回调函数返回值大于0 b排在a前

• sort可以用来打乱数组

  function messArray (arr) {
      arr.sort((a, b) => Math.random() - 0.5)
  }
  

17. 节流和防抖

18. localStorage、sessionStorage、cookie、session的区别

• localStorage sessionStorage 统称 web Storage
  • 其中loaclStorage是永久本地化存储，除非手动删除，5MB
  • sessionStorage是仅在会话期间有效，当关闭当前窗口则生命周期结束，5MB
• cookie和session
  • cookie仅有4kb，会在每次网络请求放在header中，占用带宽，http协议下是明文传输，有安全问题
  • session存储在服务端，占用服务器资源

19. 事件循环

• 常见的微任务与宏任务

  • 微任务：Promise.then process.nextTick()
  • 宏任务：anonymous（主进程） setTimeout setInterval DOM事件

• 简述Event Loop

  • script标签内代码执行，同步代码则放到call stack（调用栈）中立即执行，call stack是栈结构，符合Last In First Out（LIFO）原则，当有多个函数互相调用时先入栈的最后出栈。当遇到异步代码：
    • 如果是宏任务，则会放到WebAPIs中等到相应的时机再执行，所谓的相应的时机，就是计时器到达时间、网络请求收到结果（不一定是请求成功的结果）、DOM事件触发。
    • 如果是微任务，则会放到Micro Task Queue中等待执行。至于为什么微任务不放入WebAPIs，因为微任务是ES6定义的标准，而不是W3C制定的浏览器规则。
  • 第一轮执行结束，也是anonymous中的同步代码执行完毕，call stack清空，浏览器开始处理异步任务，会按顺序把Micro Task Queue中的微任务放入call stack执行，直到所有微任务执行完毕。
  • 微任务执行结束浏览器开始进行DOM渲染。
  • DOM渲染之后浏览器开始处理宏任务，当WebAPIs中的宏任务等待到相应的执行时机，会把该任务的回调放入到Callback Queue中，由Event Loop 放到call stack中执行。
  • 每当产生新的微任务，都会在所有的微任务执行结束之后才会执行下一个宏任务。

• 事件模型大致如下图

• 一道比较复杂的事件循环题

  console.log('1');
  
  setTimeout(function() {
      console.log('2');
      process.nextTick(function() {
          console.log('3');
      })
      new Promise(function(resolve) {
          console.log('4');
          resolve();
      }).then(function() {
          console.log('5')
      })
  })
  process.nextTick(function() {
      console.log('6');
  })
  new Promise(function(resolve) {
      console.log('7');
      resolve();
  }).then(function() {
      console.log('8')
  })
  
  setTimeout(function() {
      console.log('9');
      process.nextTick(function() {
          console.log('10');
      })
      new Promise(function(resolve) {
          console.log('11');
          resolve();
      }).then(function() {
          console.log('12')
      })
  })
  
  // 1 7 6 8 2 4 3 5 9 11 10 12
  

HTML5 & CSS3

1. 什么是语义化标签

• 语义化标签，就是让标签有自己的含义
• 语义化标签的优势
  • 代码结构清晰，方便阅读，有利于团队合作可发
  • 方便其他设备接卸，以语义化的方式来渲染网页
  • 有利于SEO优化
• 常见的语义化标签
  • title 页面主题内容标题
  • ul > li 无序列表
  • ol > li 有序列表
  • header 页头
  • nav 导航
  • main 页面主要内容
  • section 章节
  • aside 侧边栏
  • footer 页脚
  • address 地址

2. before和after中的双冒号和单冒号有什么区别

• 单冒号指的是伪类
• 双冒号指的是伪元素

3. 怎么让chrome支持小于12px 的文字

• 利用transform: scale()css属性来进行缩放

4. rem和em的区别

• em和rem都是相对单位

• em是相对于父元素的大小的单位

• rem是相对于根元素大小的单位即html元素 r - root

5. 自适应

• flex布局
• 使用vh vw rem相对单位
• 使用calc()函数来设置样式

6. 响应式

• @media媒体查询

  @media mediatype and|not|only (media feature) {
      CSS-Code;
  }
  @media only screen and (max-width: 300px) {
      color: #333
  }
  

ES6

1. var、let、const

• ES6之前：

  • 定义变量的方式：var
  • 定义函数的方式：function

• ES6之后：

  • 定义变量的方式：var let
  • 定义常量的方式：const
  • 定义函数的方式：function
  • 定义类的方式：class

• 区别：

  • var

    • var在函数内定义变量，该变量属于当前函数作用域，在全局定义则属于全局作用域。
    • 如果一个变量未经声明就赋值，则默认为全局变量（imply global 暗示全局变量）
    • var声明的变量会有变量提升

  • let

    • let定义的变量属于块级作用域
    • 不存在变量提升

  • const

    • const定义的变量是常量，一经赋值不能更改，基本数据类型不能修改，引用数据类型可以修改内部的变量，但不能对常量重新赋值

    • const 不存在变量提升

2. Map和WeakMap

• Map和Object

  • map可以使用任意对象作为键值，而object只能使用string或者symbol类型
  • map可以很轻松的知道键值对的数量 => map.size()

• Map和WeakMap

  • Map的键可以是任意数值类型，WeakMap只能使用对象作为键值
  • weakmap中键的引用被释放时，该键值对会被删除（垃圾回收机制）

  let map = new Map()
  let a = {o: 'b'}
  map.set(a, 'B')
  let a = null
  console.log(map） // Uncaught SyntaxError: Identifier 'a' has already been declared
  

  • WeakMap对象不可枚举，所以无法获取大小

3. Set和WeakSet

• Set和Array

  • Set是无序的、不可重复的集合；Array是有序的、可重复的集合。

• Set和WeakSet

  • WeakSet 的成员只能是对象，而不能是其他类型的值

  • WeakSet 是对象的弱引用，垃圾回收机制不考虑，所以不会造成内存的泄露，同时是无法遍历的，因为你不知道什么时候对象的引用消失了，而且没有size属性，不知道长度

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

• 箭头函数没有this，箭头函数的this是当前执行期上下文的this
• 箭头函数不能作为构造函数
• 箭头函数没有arguments对象
• 箭头函数没有原型对象 即没有prototype

5. Promise有几种状态

• pedding
• fulfilled
• rejected

6. Promise.all() 、 Promise.any()、 Promise.race()

• 三者都是接收一个数组作为参数，返回值都是一个Promise对象

• 区别

  • Promise.all()
    • 只有数组中全部为fulfilled状态才会为fulfilled，PromiseResult为执行成功结果组成的数组
    • 当数组中其中一个结果为rejected时，状态就会变成rejected，PromiseResult为第一被rejected的PromiseResult
  • Promise.any()
    • 只有数组中全部为rejected状态才会为rejected，PromiseResult为执行成功结果组成的数组
    • 当数组中其中一个结果为fulfilled时，状态就会变成fulfilled，PromiseResult为第一fulfilled的PromiseResult
  • Promise.race()
    • race是赛跑机制，看最先的promise子实例是成功还是失败
  • Promise.allSettled()
    • 返回一个在所有给定的promise都已经fulfilled或rejected后的promise，并带有一个对象数组，每个对象表示对应的promise结果。

7. 手写Promise

8. async、await

9. find和filter的区别

• find和filter都不会改变原数组
• find的返回值是数组中第一个符合查找规则的item（找到第一个符合规则的就停止遍历并返回）
• filter的返回值是所有符合查找规则的item组成的数组

10. some和every的区别

• some是遍历数组，找到第一个符合查找规则的就返回true，如果都不符合则返回false
• every是遍历数组，判断是否所有item都符合查找规则，都符合则返回true，有一个不符合则停止遍历，返回false

11. reduce的使用方法

• Array.reduce((total, curValue, curIndex, Array) => {}, [initValue])
  • reduce接收两个参数，第一个参数是回调函数；第二个参数是非必要参数，是第一次计算时传给total的值
  • reduce回调函数中参数的含义分别是：
    • 如果有initValue，第一次执行时为initValue，之后为上一次回调执行的返回值；如果没有initValue，第一次则传入数组的第一个值。
    • 当前执行的item
    • 当前执行的item在数组中的索引值
    • 当前数组

网络

1. get请求和post请求有什么区别

• 简单来讲get请求和post请求有以下区别：
  • get请求url中的参数长度有限制，而post请求则没有限制
  • get请求参数要放在url中，所以只支持urlencoded格式，而post请求对于参数没有限制
  • get请求相比较post请求而言更不安全
    • get请求会将参数直接暴露在url中，post请求会将参数放在request body中
    • get请求会将参数完整的保留在浏览器历史记录中，而post请求则不会
  • get请求回退时对于浏览器是无害的，而post请求在回退时会再次提交网络请求，比如我们在浏览网页回退时，会经常遇到提示是否再次提交表单
• 但从本质上来讲，get请求和post请求并没有区别，先说结论，他们都是tcp连接
  • http协议的根本是tcp连接，所以get请求和post请求都是tcp连接，只是由于http协议的规定，以及浏览器、服务端的限制，get请求和post请求才会在应用的过程中表现出不同
  • 比如我们在get请求的body中放一些参数，在post请求的url中放一些参数，这些都是可以实现的，get请求和post请求本身并不会有任何限制，只是浏览器在发送get请求时可能会忽略get请求body中的信息，导致网络请求错误（缺少必要参数）
  • 另外对于get请求的url长度限制，也不是来于get请求本身，而是大部分浏览器限制get请求url不大于2kb，服务限制get请求url不大于64kb，超过部分不予处理。
  • 过于get请求和post请求的安全性，其实get请求和post请求都是明文传输，如果在网络节点上对数据进行抓包，都能获取到请求信息，所以要想安全传输，就只有加密，也就是https
  • 如果硬要说有什么不同，应该是get请求和post请求发送的tcp数据包有所不同
    • get请求发送一个数据包，header和data都通过一个数据包来传输
    • post会发送两个数据包，先传输header，浏览器响应100（continue）时，再发送data，然后浏览器响应200（success）
    • 理论上来讲，get请求会节省更多数据传输的时间，但实际上，时间上的差别几乎可以忽略不计

2. 跨域问题

• 说起跨域，首先我们要知道同源这个概念，同源是指域名、协议、端口都相同，如果有一个不同，就会产生跨域问题
• 跨域问题的解决方案
  • jsonp
    • 前端解决，不过目前用的比较少，因为jsonp只能处理get请求，使用起来较为麻烦且限制太多
  • CORS（cross origin resource sharing）翻译为跨域资源共享
    • 服务端解决，服务端设置 Access-Control-Allow-Origin：${url} 表示允许放行的url，一般会用*号，表示都可以放行
  • proxy代理 /api
  • Nginx反向代理
  • html5中的websocket

3. 简述从输入URL到展现页面的全过程

• 输入url并确认 正式发起网络请求
• DNS解析
  • 首先查看浏览器缓存 - 系统缓存 - 路由器映射表 - 本地DNS服务器，如果本地DNS服务器中也没有，就将域名发送至其他服务器，由根域名服务器返回顶级域名，再由顶级域名服务器返回二级域名，层层递归，直到解析出正确的ip地址
• （应用层）Http协议构建请求报文
  • 请求报文一般包括请求头部信息和请求体
  • 请求头中包含一系列重要信息
    • 目标url
    • 请求方法method：get post header options delete put trace connect
    • 请求遵循的协议：http、ftp
    • 是否需要缓存
    • 是否需要携带cookie
  • 请求体中一般包含请求参数
• （传输层）TCP协议将Http请求报文分割成TCP数据包
  • http请求报文构建好之后，tcp协议会建立一条直达服务器的连接，提供安全可靠的字节流服务。
  • 为了方便传输，会将请求报文分割成以报文段为单位的数据包，并为这些数据包按顺序编号，保证目标服务器的tcp协议能够完整还原请求报文
  • tcp协议以三次握手的形式建立连接，保证传输的安全可靠。
• （网络层）IP协议查询MAC地址
  • IP协议将TCP数据包封装到IP内进行传输
  • 通过ARP协议将IP地址解析为MAC地址
• （数据链路层）
  • IP包被打包到数据链路的帧结构当中，在物理层中以比特流的形式发送出去。这时客户端的发起请求阶段标志结束
• 服务端接收到网络请求，并层层向上，直到传输层，由TCP协议将分割的TCP数据包还原成请求报文，在根据请求报文，返回相应的数据包或静态资源。
• 如果响应报文中的状态码为200，则表示网络请求成功。
• 网络请求成功之后，客户端浏览器进行编码解析，构建dom树，根据dom树、css样式构建render Tree。如果遇到js文件，或其他静态资源，则再次发起相应的网络请求来获取资源。
• 最后就是页面渲染完成，等待响应用户操作。

4. 简述对三次握手四次挥手的理解

• 名词解释

  • SYN：synchronize（同步）
  • FIN：finish（结束）
  • seq：sequence number（序号）
  • ack：acknowledgement number（确认号）
  • 2msl：max segment lifetime 是一个数据包传输的最大生命周期，2msl是指从发送再到返回的一个完整过程。

• 三次握手

• 四次挥手

VUE

1. VUE的生命周期

2. 谈谈你对keep-alive的理解

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

4. v-if和v-for的优先级

5. ref是什么

6. nextTick是什么

7. scoped原理

8. VUE中如何做样式穿透

9. 组件间如何通信

10. computed、watch、methods的区别

11. props和data的优先级

12. VUE设置代理

13. 环境变量

14. 什么是MVVM

15. v-model双向绑定原理

16. VUE源码-data劫持

REACT

1. react的生命周期

小程序

1. 小程序的生命周期

• app生命周期
  • onLaunch：用户首次打开小程序
  • onShow：小程序从后台被打开
  • onHide：小程序隐藏到后台
• page生命周期
  • onLoad：页面加载
  • onShow：页面显示
  • onReady：页面初次渲染完成，并且只会执行一次
  • onHide：页面隐藏 navigateTo
  • onUpload：页面卸载 -> redirect 或 navigateBack

2. 如何自定义头部

• 在component文件夹下创建navbar组件

• 单页面配置

  • 在需要引入的page.json下配置

    {
        "useingComponents": {
            "navbar": "{{navbar组件路径}}"
        }
    }
    

  • 在需要引入的page.wxml中写入navbar组件

• 全局配置

  • 在app.json中配置（custom译为量身定制、自定义）

    {
        "window": {
            "navigationStyle": "custom"
        }
    }
    

性能优化

1. 加载优化

2. 图片优化

3. 渲染优化

4. 首屏优化

安全问题

1. xss攻击和Sql注入

• xss攻击
  • 跨站脚本攻击（Cross Site Script为了区别于CSS简称为XSS）指的是恶意攻击者往Web页面里插入恶意html代码，当用户浏览该页之时，嵌入其中Web里面的html代码会被执行，从而达到恶意用户的特殊目的
  • 利用字符串转义来解决
• Sql注入
  • sql注入是一种将sql代码添加到输入参数中，传递到sql服务器解析并执行的一种攻击手法

2. 接口安全