我的前端基础知识总结（持续更新...）

一个不正经的小程序员
313 阅读26分钟

HTML、CSS相关:

1.HTML5 新增的内容有哪些

新增语义化标签

新增表单类型

表单元素

表单属性

表单事件

多媒体标签

2.HTML5 新增的语义化标签有哪些

语义化标签优点：1.提升可访问性 2.seo 3.结构清晰，利于维护

Header 页面头部、 main 页面主要内容、 footer 页面底部
Nav 导航栏、 aside 侧边栏 、article 加载页面一块独立内容
Section 相 当 于 div
figure 加 载 独 立 内 容 （ 上 图 下 字 ）
figcaption figure 的标题
Hgroup 标题组合标签 mark 高亮显示 dialog 加载对话框标签（必须配合 open 属性）
Embed 加载插件的标签 video 加载视频 audio 加载音频（支持格式 ogg，mp3，wav）

3.CSS3 新增的特性

边框：

border-radios 添加圆角边框
border-shadow：给框添加阴影 （水平位移，垂直位移，模糊半径，阴影尺寸，阴影颜色，insetr（内/外部阴影））
border-image：设置边框图像
border-image-source 边框图片的路径
border-image-slice 图片边框向内偏移
border-image-width 图片边框的宽度
border-image-outset 边框图像区域超出边框的量
border-image-repeat 图像边框是否平铺（repeat 平铺 round 铺满 stretch 拉伸）

背景：

Background-size 背景图片尺寸
Background-origin规定background-position属性相对于什么位置定位
Background-clip 规定背景的绘制区域（padding-box，border-box，content-box）

渐变：

Linear-gradient（）线性渐变
Radial-gradient（）径向渐变

文本效果：

Word-break：定义如何换行
Word-wrap：允许长的内容可以自动换行
Text-overflow：指定当文本溢出包含它的元素，应该干啥
Text-shadow：文字阴影（水平位移，垂直位移，模糊半径，阴影颜色）

转换：

Transform 应用于 2D3D 转换，可以将元素旋转，缩放，移动，倾斜
Transform-origin 可以更改元素转换的位置，（改变 xyz 轴）
Transform-style 指定嵌套元素怎么样在三位空间中呈现

2D 转换方法：

rotate 旋转 translate（x，y）指定元素在二维空间的位移 scale（n）定义缩放转换

3D 转换方法：

Perspective（n）为 3D 转换 translate rotate scale

过渡：

Transition-proprety 过渡属性名
Transition-duration 完成过渡效果需要花费的时间
Transition-timing-function 指定切换效果的速度
Transition-delay 指定什么时候开始切换效果

动画：animation

Animation-name 为@keyframes 动画名称
animation-duration 动画需要花费的时间
animation-timing-function 动画如何完成一个周期
animation-delay 动画启动前的延迟间隔
animation-iteration-count 动画播放次数
animation-direction 是否轮流反向播放动画

4.清除浮动的方式有哪些

高度塌陷：当所有子元素浮动的时候，且父元素没有设置高度，这时父元素就会产生高度塌陷。

清除浮动的方式

  1. 给父元素单独定义高度。（缺点：无法进行响应式布局）
  2. 父级定义overflow：hiden;(缺点：超出部分会隐藏，布局时要注意)
  3. 父级定义overflow：auto;(缺点：超出部分会出现滚动条)
  4. 在浮动元素后面添加一个空标签
clear:both;
overflow:hidden;
height:0;
  1. 给塌陷的元素添加伪对象
.father: after{
  content:"随便写";
  clear:both;
  overflow:hiden;
  visibility:hiden;
  display:block;
  height:0;
}

5.position定位的属性及区别

relative:相对定位，相对于自身定位，不脱离文档流。
absolute:绝对定位，相对于父级定位，脱离文档流。
fixed:固定定位，相对于浏览器窗口定位，脱离文档流。
sticky:粘性定位，基于用户的滚动位置定位，在 relative 与 fixed 定位之间切换。
static:默认定位，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。

6.子元素如何在父元素中居中

水平居中

  1. 子元素设置margin: auto;
  2. 子父元素宽度固定，父元素设置text-align:center, 子元素设置display: inline-block;

垂直居中

  1. 给父元素设置 display:table，子元素设置 display:table-cell, vertical-align:middle
  2. 设置子父元素行高一样

水平垂直居中

  1. 子相父绝，子元素分别top、left设置50%，margin-top和margin-left各减去自身宽高的一半。
  2. 子相父绝，子元素分别top、left设置50%，transform: translate(-50%, -50%)。
  3. 父元素设置为弹性盒子
display:flex;
justify-content:center;
align-item:center

7.标准盒子与怪异盒子

image.png
标准盒模型：width 不包括 padding 和 border
怪异盒模型：width 包括 padding 和 border

8.行内元素/块级元素有哪些

行内元素：相邻的行内元素会排列在同一行，不会独占一行，设置宽高无效，例如span
块级元素：会独占一行，可以设置宽高等属性，例如div
可变元素：根据上下文预警决定该元素为块元素还是内联元素

块级元素：div h1-h6 hr p ul ol table address blockquote dir from menu
行内元素：a br I em img input select span sub sup u textarea
可变元素：button del iframe ins

9.px、em、rem区别

px：绝对长度单位，像素px相对于显示器屏幕分辨率来说的。
em：相对长度单位，相对于当前对象内文本的字体尺寸。
rem：相对于html根元素的font-size来计算的，1em=1rem=16px

10.双边距重叠问题（外边距折叠）

多个相邻（兄弟或者父子关系）普通流的块元素垂直方向 margin 会重叠。
原因：根据规范，一个盒子如果没有添加 BFC，那么它的上边距应该和其文档流中的第一个子元素的上边距重叠。
折叠的结果为：两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。两个外边距一正一负时，折叠结果是两者的相加的和。

11.BFC

BFC 是 Block Formatting Context （块级格式化上下文）的缩写。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。

触发条件：

  • float的值为left、right
  • overflow的值不为 visible，为 auto、scroll、hidden
  • display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
  • position的值为absolute或fixed

使用场景：

  1. 防止margin重叠（塌陷）
  2. 清除内部浮动
  3. 自适应多栏布局

12.CSS 选择器以及优先级

关于css属性选择器常用的有：

  • id选择器（#box），选择id为box的元素
  • 类选择器（.one），选择类名为one的所有元素
  • 标签选择器（div），选择标签为div的所有元素
  • 后代选择器（#box div），选择id为box元素内部所有的div元素
  • 子选择器（.one>one_1），选择父元素为.one的所有.one_1的元素
  • 相邻同胞选择器（.one+.two），选择紧接在.one之后的所有.two元素
  • 群组选择器（div,p），选择div、p的所有元素

还有一些使用频率相对没那么多的选择器：

  • 伪类选择器
:link ：选择未被访问的链接
:visited：选取已被访问的链接
:active：选择活动链接
:hover ：鼠标指针浮动在上面的元素
:focus ：选择具有焦点的
:first-child：父元素的首个子元素
  • 伪元素选择器
:first-letter ：用于选取指定选择器的首字母
:first-line ：选取指定选择器的首行
:before : 选择器在被选元素的内容前面插入内容
:after : 选择器在被选元素的内容后面插入内容
  • 属性选择器
[attribute] 选择带有attribute属性的元素
[attribute=value] 选择所有使用attribute=value的元素
[attribute~=value] 选择attribute属性包含value的元素
[attribute|=value]：选择attribute属性以value开头的元素

在CSS3中新增的选择器有如下：

  • 层次选择器（p~ul），选择前面有p元素的每个ul元素
  • 伪类选择器
:first-of-type 表示一组同级元素中其类型的第一个元素
:last-of-type 表示一组同级元素中其类型的最后一个元素
:only-of-type 表示没有同类型兄弟元素的元素
:only-child 表示没有任何兄弟的元素
:nth-child(n) 根据元素在一组同级中的位置匹配元素
:nth-last-of-type(n) 匹配给定类型的元素，基于它们在一组兄弟元素中的位置，从末尾开始计数
:last-child 表示一组兄弟元素中的最后一个元素
:root 设置HTML文档
:empty 指定空的元素
:enabled 选择可用元素
:disabled 选择被禁用元素
:checked 选择选中的元素
:not(selector) 选择与 <selector> 不匹配的所有元素
  • 属性选择器
[attribute*=value]：选择attribute属性值包含value的所有元素
[attribute^=value]：选择attribute属性开头为value的所有元素
[attribute$=value]：选择attribute属性结尾为value的所有元素

优先级
内联 > ID选择器 > 类选择器 > 标签选择器

JS相关：

1. js 中的8种数据类型

基本类型(值类型)： Number、String、Boolean、null、undefined、Symbol、BigInt。在内存中占据固定大小，保存在栈内存中。

引用类型(复杂数据类型)： Object。其他还有Array(数组)、Date(日期)、RegExp(正则表达式)、特殊的基本包装类型(String、Number、Boolean) 以及单体内置对象(Global、Math)等，引用类型的值是对象，保存在堆内存中，栈内存存储的是对象的变量标识符以及对象在堆内存中的存储地址。

2. 闭包是什么

闭包：有权访问另外一个函数作用域中的变量的函数 (是指一个函数可以记住其外部变量并可以访问这些变量)。

使用场景

  1. 匿名自执行函数
  2. 结果缓存
  3. 创建私有变量
  4. 延长变量的生命周期

缺点
会造成内存泄漏

3. js中常见的内存泄露

  1. 意外的全局变量
  2. 被遗忘的计时器或回调函数
  3. 脱离Dom的引用
  4. 闭包

4. 事件委托是什么

事件委托，也称事件代理，是js中常见的一种事件绑定技巧，事件委托就是将原本需要绑定在子元素的响应事件委托给父元素，让父元素担当事件监听的职务。

不在事件的发生地（直接 dom）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判断事件发生元素 DOM 的类型，来做出不同的响应。

事件委托的原理就是DOM元素的事件冒泡。

5. 什么是事件冒泡

事件冒泡就是一个事件触发后，会在子元素和父元素之间传播。

事件传播分为三个阶段：

  1. 捕获阶段（Capturing phase）—— 事件（从 Window）向下走近元素。
  2. 目标阶段（Target phase）—— 事件到达目标元素。
  3. 冒泡阶段（Bubbling phase）—— 事件从元素上开始冒泡。

事件冒泡.svg 也就是说：点击 <td>，事件首先通过祖先链向下到达元素（捕获阶段），然后到达目标（目标阶段），最后上升（冒泡阶段），在途中调用处理程序。

6. ES6新特性

const、let、模板字符串、数组解构、函数参数默认值、箭头函数、for...of、for...in

var、let、const之间的区别

  1. var 存在变量提升，let、const 不存在变量提升。
  2. var 不存在暂时性死区, let 和 const 存在暂时性死区，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。
  3. var 不存在块级作用域，let 和 const 存在块级作用域。
  4. var 允许重复声明变量，let 和 const 在同一作用域不允许重复声明变量。
  5. const 一旦声明必须赋值，不能用 null 占位，声明后不能再修改，如果声明的是复合类型数据，可以修改属性。

for...of、for...in区别
for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值
for in总是得到对象的key或数组、字符串的下标
for of总是得到对象的value或数组、字符串的值

7. 数组有哪些方法

push() 从后面添加元素，返回值为添加完后的数组的长度
arr.pop() 从后面删除元素，只能是一个，返回值是删除的元素
arr.shift() 从前面删除元素，只能删除一个 返回值是删除的元素
arr.unshift() 从前面添加元素, 返回值是添加完后的数组的长度
arr.splice(i,n) 删除从 i(索引值)开始之后的那个元素。返回值是删除的元素
arr.concat() 连接两个数组 返回值为连接后的新数组
str.split() 将字符串转化为数组
arr.sort() 将数组进行排序,返回值是排好的数组，默认是按照最左边的数字进行排序，不是按照数字大小排序的
arr.reverse() 将数组反转,返回值是反转后的数组
arr.slice(start,end) 切去索引值 start 到索引值 end 的数组，不包含 end 索引的值，返回值是切出来的数组
arr.forEach(callback) 遍历数组,无 return 即使有 return，也不会返回任何值，并且会影响原来的数组
arr.map(callback) 映射数组(遍历数组),有 return 返回一个新数组。
arr.filter(callback) 过滤数组，返回一个满足要求的数组

8. 原型、原型链

原型：当我们通过构造函数创建对象的时候，在这个对象中有一个指针，这个指针指向构造函数的prototype的值，我们将这个指向prototype的指针称为原型。或者用另一种说法：js中的对象都有一个特殊的[[Prototype]]内置属性，其实这就是原型。
在 JavaScript 中，对象有一个特殊的隐藏属性 [[Prototype]]，它要么为 null，要么就是对另一个对象的引用。该对象被称为"原型"。

原型链：原型链就是通过原型组成的一条查找链。当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的__proto__隐式原型上查找，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的__proto__中查找，这样一层一层向上查找就会形成一个链式结构。

8. 对Promise的理解

什么是Promise？
Promise 是一种解决异步编程的方案，相比回调函数和事件更合理和更强大。

9. JS 的 new 操作符做了哪些事情

1、创建了一个空的js对象（即{}）
2、将空对象的原型prototype指向构造函数的原型
3、将空对象作为构造函数的上下文（改变this指向）
4、对构造函数有返回值的判断

function mynew(Func, ...args) {
    // 1.创建一个新对象
    const obj = {}
    // 2.新对象原型指向构造函数原型对象
    obj.__proto__ = Func.prototype
    // 3.将构建函数的this指向新对象
    let result = Func.apply(obj, args)
    // 4.根据返回值判断
    return result instanceof Object ? result : obj
}

10. apply、call、bind 的区别

apply、call、bind三者的区别在于：

  • 三者都可以改变函数的this对象指向。
  • 三者第一个参数都是this要指向的对象，如果如果没有这个参数或参数为undefined或null，则默认指向全局window。
  • 三者都可以传参，但是apply第二个参数是数组，而call第二个参数是参数列表，且apply和call是一次性传入参数，而bind可以分为多次传入。
  • bind是返回绑定this之后的函数，apply、call 则是立即执行。

11. JS 中的垃圾回收机制

浏览器垃圾回收机制/内存回收机制:

浏览器的JavaScript具有自动垃圾回收机制(GC:Garbage Collecation)，垃圾收集器会定期（周期性）找出那些不再继续使用的变量，然后释放其内存。

标记清除: 在js中，最常用的垃圾回收机制是标记清除：当变量进入执行环境时，被标记为“进入环境”，当变量离开执行环境时，会被标记为“离开环境”。垃圾回收器会销毁那些带标记的值并回收它们所占用的内存空间。
引用计数: 当前内存被占用一次，计数累加1次，移除占用就减1，减到0时，浏览器就回收它。

12. 防抖、节流的区别，以及各自的应用场景

  • 节流: n 秒内只执行一次，若在 n 秒内重复触发，只有一次生效
  • 防抖: n 秒后再执行该事件，若在 n 秒内被重复触发，则重新计时

使用场景：
节流：滚动加载更多、搜索框搜的索联想功能、高频点击、表单重复提交……
防抖：搜索框搜索输入，并在输入完以后自动搜索、手机号，邮箱验证输入检测、窗口大小 resize 变化后，再重新渲染。

13. JS 中检测数据类型的方案

  1. typeof
console.log(typeof 1);               // number
console.log(typeof true);            // boolean
console.log(typeof 'mc');            // string
console.log(typeof Symbol)           // function
console.log(typeof function(){});    // function
console.log(typeof console.log());   // undefined
console.log(typeof []);              // object 
console.log(typeof {});              // object
console.log(typeof null);            // object
console.log(typeof undefined);       // undefined

优点：能够快速区分基本数据类型
缺点：不能将Object、Array和Null区分，都返回object

  1. instanceof
console.log(1 instanceof Number);                    // false
console.log(true instanceof Boolean);                // false 
console.log('str' instanceof String);                // false  
console.log([] instanceof Array);                    // true
console.log(function(){} instanceof Function);       // true
console.log({} instanceof Object);                   // true

优点：能够区分Array、Object和Function，适合用于判断自定义的类实例对象
缺点：Number，Boolean，String基本数据类型不能判断

  1. Object.prototype.toString.call()
var toString = Object.prototype.toString;
console.log(toString.call(1));                      //[object Number]
console.log(toString.call(true));                   //[object Boolean]
console.log(toString.call('mc'));                   //[object String]
console.log(toString.call([]));                     //[object Array]
console.log(toString.call({}));                     //[object Object]
console.log(toString.call(function(){}));           //[object Function]
console.log(toString.call(undefined));              //[object Undefined]
console.log(toString.call(null));                   //[object Null]

优点：精准判断数据类型

14. 作用域和作用域链

作用域：即变量（变量作用域又称上下文）和函数生效（能被访问）的区域或集合。
作用域链：当在JavaScript中使用一个变量的时候，首先JavaScript引擎会尝试在当前作用域下去寻找该变量，如果没找到，再到它的上层作用域寻找，以此类推直到找到该变量或是已经到了全局作用域。

15. JavaScript中执行上下文和执行栈是什么？

执行上下文：执行上下文是一种对Javascript代码执行环境的抽象概念，也就是说只要有Javascript代码运行，那么它就一定是运行在执行上下文中。

执行上下文的类型分为三种：

  • 全局执行上下文：只有一个，浏览器中的全局对象就是 window对象，this 指向这个全局对象
  • 函数执行上下文：存在无数个，只有在函数被调用的时候才会被创建，每次调用函数都会创建一个新的执行上下文
  • Eval 函数执行上下文： 指的是运行在 eval 函数中的代码，很少用而且不建议使用

执行栈：也叫调用栈，具有 LIFO（后进先出）结构，用于存储在代码执行期间创建的所有执行上下文。

16. == 和 ===区别

==（相等操作符）会做类型转换，再进行值的比较。
===（全等运算符）不会做类型转换，即类型需要相同，值也需相同。

17. 浅拷贝和深拷贝

浅拷贝：指的是创建新的数据，这个数据有着原始数据属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值。如果属性是引用类型，拷贝的就是内存地址。
深拷贝：开辟一个新的栈，两个对象属完成相同，但是对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性。

浅拷贝的方法：

  • Object.assign
  • Array.prototype.slice(), Array.prototype.concat()
  • 使用拓展运算符实现的复制

深拷贝的方法：

  • _.cloneDeep()
  • jQuery.extend()
  • JSON.parse(JSON.stringify(obj))
  • 手写循环递归

浏览器：

1. 浏览器的缓存机制

缓存分为两种：协商缓存和强缓存。
强缓存： 不会向服务器发送请求，直接从缓存中读取资源，强缓存可以通过设置两种 HTTP Header 实现：Expires 和 Cache-Control。
协商缓存： 协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程。可以通过设置两种 HTTP Header，Last-Modified或者ETag实现。

2.浏览器输入网址到渲染全过程

  1. 首先在浏览器中输入URL

  2. 查找缓存：浏览器先查看浏览器缓存-系统缓存-路由缓存中是否有该地址页面，如果有则显示页面内容。如果没有则进行下一步。

    • 浏览器缓存：浏览器会记录DNS一段时间，因此，只是第一个地方解析DNS请求；
    • 操作系统缓存:如果在浏览器缓存中不包含这个记录，则会使系统调用操作系统， 获取操作系统的记录(保存最近的DNS查询缓存)；
    • 路由器缓存：如果上述两个步骤均不能成功获取DNS记录，继续搜索路由器缓存；
    • ISP缓存：若上述均失败，继续向ISP搜索。

  3. DNS域名解析：浏览器向DNS服务器发起请求，解析该URL中的域名对应的IP地址。DNS服务器是基于UDP的，因此会用到UDP协议。

  4. 建立TCP连接：解析出IP地址后，根据IP地址和默认80端口，和服务器建立TCP连接

  5. 发起HTTP请求：浏览器发起读取文件的HTTP请求，该请求报文作为TCP三次握手的第三次数据发送给服务器

  6. 服务器响应请求并返回结果：服务器对浏览器请求做出响应，并把对应的html文件发送给浏览器

  7. 关闭TCP连接：通过四次挥手释放TCP连接

  8. 浏览器渲染：客户端（浏览器）解析HTML内容并渲染出来，浏览器接收到数据包后的解析流程为：

    • 构建DOM树：词法分析然后解析成DOM树（dom tree），是由dom元素及属性节点组成，树的根是document对象
    • 构建CSS规则树：生成CSS规则树（CSS Rule Tree）
    • 构建render树：Web浏览器将DOM和CSSOM结合，并构建出渲染树（render tree）
    • 布局（Layout）：计算出每个节点在屏幕中的位置
    • 绘制（Painting）：即遍历render树，并使用UI后端层绘制每个节点。

image.png

  1. JS引擎解析过程：调用JS引擎执行JS代码（JS的解释阶段，预处理阶段，执行阶段生成执行上下文，VO，作用域链、回收机制等等）

    • 创建window对象：window对象也叫全局执行环境，当页面产生时就被创建，所有的全局变量和函数都属于window的属性和方法，而DOM Tree也会映射在window的doucment对象上。当关闭网页或者关闭浏览器时，全局执行环境会被销毁。
    • 加载文件：完成js引擎分析它的语法与词法是否合法，如果合法进入预编译
    • 预编译：在预编译的过程中，浏览器会寻找全局变量声明，把它作为window的属性加入到window对象中，并给变量赋值为'undefined'；寻找全局函数声明，把它作为window的方法加入到window对象中，并将函数体赋值给他（匿名函数是不参与预编译的，因为它是变量）。而变量提升作为不合理的地方在ES6中已经解决了，函数提升还存在。
    • 解释执行：执行到变量就赋值，如果变量没有被定义，也就没有被预编译直接赋值，在ES5非严格模式下这个变量会成为window的一个属性，也就是成为全局变量。string、int这样的值就是直接把值放在变量的存储空间里，object对象就是把指针指向变量的存储空间。函数执行，就将函数的环境推入一个环境的栈中，执行完成后再弹出，控制权交还给之前的环境。JS作用域其实就是这样的执行流机制实现的。

3. cookie和localStorage以及sessionStorage的区别

  1. 存储大小
    cookie：一般不超过4k
    sessionStorage：5M甚至更多
    localStorage：5M甚至更多

  2. 数据有效期
    cookie:一般由服务器生成，可以设置失效时间；若没有设置时间，关闭浏览器cookie失效，如果设置了时间，cookie就会存储在硬盘中，过期失效。
    sessionStorage：仅在当前浏览器窗口关闭之前有效，关闭页面或者浏览器会被清除。
    localStorage：永久有效，窗口或者浏览器关闭也会一直保存，除非手动永久删除。

  3. 作用域
    cookie：在所有同源窗口中都是共享的
    sessionStorage：在同一个浏览器窗口是共享的（不同浏览器，即使是同一页面也不共享）
    localStorage：在所有同源窗口中共享

  4. 通信
    cookie：cookie在浏览器和服务器之间来回传递，如果使用cookie保存过多数据会造成性能问题
    sessionStorage、localStorage：仅在客户端（浏览器）中保存，不参与服务器的通信

  5. 应用场景
    cookie：判断用户是否登录过网站，以便实现下次自动登录或记住密码；保存事件信息
    sessionStorage：敏感账号一次性登录，单页面用的较多
    localStorage：用于长期登录，适于长期保存在本地的数据

4. 跨域问题

跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的。
同源策略,是浏览器对 JavaScript 实施的安全限制，只要协议、域名、端口有任何一个不同，都被当作是不同的域。

5. 重绘与重排的区别

重绘：当 render tree 中的一些元素需要更新属性，而这些属性只是影响元素的外观，不会影响布局。
重排：当 render tree 中的一部分或者全部因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，这就叫重排（回流）。

React:

Webpack:

计算机网络、计算机组成：

1. TCP三次握手

  1. 第一次握手：建立连接时，客户端发送syn包（syn=j）到服务器，并进入SYN_SENT状态，等待服务器确认；SYN：同步序列编号（Synchronize Sequence Numbers）。
  2. 第二次握手：服务器收到syn包并确认客户的SYN（ack=j+1），同时也发送一个自己的SYN包（syn=k），即SYN+ACK包，此时服务器进入SYN_RECV状态。
  3. 第三次握手：客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK(ack=k+1），此包发送完毕，客户端和服务器进入ESTABLISHED（TCP连接成功）状态，完成三次握手。

2. web 常见的攻击方式有哪些？如何防御？

我们常见的Web攻击方式有

  • XSS (Cross Site Scripting) 跨站脚本攻击
  • CSRF（Cross-site request forgery）跨站请求伪造
  • SQL注入攻击

XSS: 跨站脚本攻击，允许攻击者将恶意代码植入到提供给其它用户使用的页面中。XSS的攻击目标是为了盗取存储在客户端的cookie或者其他网站用于识别客户端身份的敏感信息。一旦获取到合法用户的信息后，攻击者甚至可以假冒合法用户与网站进行交互。
CSRF（Cross-site request forgery）跨站请求伪造：攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目。
Sql 注入攻击：是通过将恶意的 Sql查询或添加语句插入到应用的输入参数中，再在后台 Sql服务器上解析执行进行的攻击。

预防措施
XSS:

  • 避免内联事件
  • 避免拼接 HTML

CSRF:

  • 阻止不明外域的访问
    • 同源检测
    • Samesite Cookie
  • 提交时要求附加本域才能获取的信息
    • CSRF Token
    • 双重Cookie验证

SQL注入:

  • 严格检查输入变量的类型和格式
  • 过滤和转义特殊字符
  • 对访问数据库的Web应用程序采用Web应用防火墙

3. TCP和UDP的区别

  1. TCP是面向连接的，而UDP是面向无连接的。
  2. TCP仅支持单播传输，UDP 提供了单播，多播，广播的功能。
  3. TCP的三次握手保证了连接的可靠性; UDP是无连接的、不可靠的一种数据传输协议，首先不可靠性体现在无连接上，通信都不需要建立连接，对接收到的数据也不发送确认信号，发送端不知道数据是否会正确接收。
  4. UDP的头部开销比TCP的更小，数据传输速率更高，实时性更好。

4. http状态码

  1. 状态码分类
  • 1xx - 服务器收到请求。
  • 2xx - 请求成功，如 200。
  • 3xx - 重定向，如 302。
  • 4xx - 客户端错误，如 404。
  • 5xx - 服务端错误，如 500
  1. 常见状态码
  • 200 - 成功。
  • 301 - 永久重定向（配合 location，浏览器自动处理）。
  • 302 - 临时重定向（配合 location，浏览器自动处理）。
  • 304 - 资源未被修改。
  • 403 - 没权限。
  • 404 - 资源未找到。
  • 500 - 服务器错误。
  • 504 - 网关超时。

性能优化：

  1. 降低请求量：合并资源，减少 HTTP 请求数，minify / gzip 压缩，webP，lazyLoad。
  2. 加快请求速度：预解析 DNS，减少域名数，并行加载，CDN 分发。
  3. 缓存：HTTP 协议缓存请求，离线缓存 manifest，离线数据缓存localStorage。
  4. 渲染：JS/CSS 优化，加载顺序，服务端渲染，pipeline。

其它：

1.什么是面向对象请简述

面向对象是一种思想，是基于面向过程而言的，就是说面向对象是将功能等通过对象来实现，将功能封装进对象之中，让对象去实现具体的细节；这种思想是将数据作为第一位，这是对数据一种优化，操作起来更加的方便，简化了过程。

面向对象有三个特点：封装（隐藏对象的属性和实现细节，对外提供公 共访问方式），继承（提高代码复用性，继承是多态的前提），多态（是父类或接口定义的引用变量可以指向子类或具体实现类的实例对象）

avatar
文章
阅读
粉丝