每天进步一点点

weixin_43858617

已于 2022-09-16 13:53:24 修改

阅读量231

点赞数

文章标签： html 前端

于 2022-09-13 16:26:53 首次发布

本文链接：https://blog.csdn.net/weixin_43858617/article/details/126806366

版权

一、CSS

1、讲一下盒模型，普通盒模型和怪异盒模型有什么区别？

CSS盒子模型由四个部分组成，包括：外边距(margin)、内边距(padding)、边框(border)、内容区(width和height);
标准的CSS盒子模型和低端IE CSS盒子模型（也叫怪异盒模型）不同，区别在于：
标准的css盒子模型宽高=内容区宽高
低端IE css盒子模型宽高=内容区宽高+内边距﹢边框
即：width/height = content + padding + border

所以标准盒模型下，盒子的总宽高计算公式是：content宽或高 + border + padding + margin
怪异盒模型下盒子的总大小=width（content + border + padding） + margin

W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。而IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
解决IE8及更早版本不兼容问题，可以在HTML页面声明 <!DOCTYPE html>。
如果是定义了完整的doctype的标准文档类型，无论是哪种模型情况，最终都会触发标准模式，
如果doctype协议缺失，会由浏览器自己界定，在IE浏览器中IE9以下（IE6.IE7.IE8）的版本触发怪异模式，其他浏览器中会默认为W3c标准模式。

2、块元素和行内元素区别是什么？常见块元素和行内元素有哪些？

1.块级元素占据一整行，内联元素的宽度是其元素内容的宽度，多个内联元素排列会放在同一行里除非放不下，才会挤到新的一行
2.块级元素可以设置宽度width和高度height，而内联元素设置widht和height是无效的
3.块级元素可以包含块级元素和内联元素，而内联元素只能包含文本
4.块级元素可以设置margin和padding属性，行内元素只有margin-left、margin-right、padding-left、padding-right起作用

3、HTML语义化标签有哪些？

<title>：页面主体内容。
<hn>：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。
<ul>：无序列表。
<li>：有序列表。
<header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。
<nav>：标记导航，仅对文档中重要的链接群使用。
<main>：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。
<article>：定义外部的内容，其中的内容独立于文档的其余部分。
<section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<aside>：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
<footer>：页脚，只有当父级是body时，才是整个页面的页脚。
<small>：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。
<strong>：和 em 标签一样，用于强调文本，但它强调的程度更强一些。
<em>：将其中的文本表示为强调的内容，表现为斜体。
<mark>：使用黄色突出显示部分文本。
<figuigcaption>：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。
<re>：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。
<fcite>：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
<blockquoto>：定义块引用，块引用拥有它们自己的空间。
<q>：短的引述（跨浏览器问题，尽量避免使用）。
<time>：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。
<abbr>：简称或缩写。
<dfn>：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。
<address>：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。
<del>：移除的内容。
<ins>：添加的内容。
<code>：标记代码。
<meter>：定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）
<progress>：定义运行中的进度（进程）。

4、伪类和伪元素的区别是什么？

㈠定义

⑴伪元素：伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

⑵伪类：伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。

㈡特点

⑴伪元素和伪类都不会出现在源文档或者文档树中

⑵伪类允许出现在选择器的任何位置，而一个伪元素只能跟在选择器的最后一个简单选择器后面

⑶伪元素名和伪类名都是大小写不敏感的

⑷有些伪类是互斥的，而其它的可以同时用在一个元素上。（在规则冲突的情况下，常规层叠顺序决定结果）。

㈢区别

⑴伪类的操作对象是文档树中已有的元素。

⑵伪元素则创建了一个文档数外的元素。

⑶伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。

5、CSS如何实现垂直居中？

/* 无需知道被居中元素的宽高 */

.parent{
position: relative;
}
.children{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}

/* 无需知道被居中元素的宽高 */
/* 设置父元素非 `static` 定位 */
.parent {
position: relative;
}
/* 子元素绝对定位，使用 translate的好处是无需知道子元素的宽高 */
/* 如果知道宽高，也可以使用 margin 设置 */
.children{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

/* 无需知道被居中元素的宽高 */
.parent{
display: flex;
align-items: center;
justify-content: center;
}

6、CSS常见的选择器有哪些？

id选择器 #myId {}
类选择器 .myClass {}
标签选择器 p,h1 {}

后代选择器 div h1 {}

子选择器 div>h1 {}
兄弟选择器(所有的兄弟) ul~h1 {}
相邻兄弟选择器 ul+h1 {}
属性选择器 li[name='sss'] {}
伪类选择器 h1:hover {}
通配符选择器* * {}

7、CSS的优先级如何计算？

ID选择器的特殊性值，加0,1,0,0。
类选择器、属性选择器或伪类，加0,0,1,0。
元素和伪元素，加0,0,0,1。
通配选择器*对特殊性没有贡献，即0,0,0,0。
最后比较特殊的一个标志!important（权重），它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为1,0,0,0,0。

8、长度单位px、em和rem的区别是什么？

px是像素单位，可以用来设置屏幕宽高。

em 和 rem都是相对长度单位，不同的是em是相对于当前元素设置的字体大小而言的，rem是相对于根标签而言的，也就是相对于html标签。

9、讲一下flex弹性盒布局？

容器的属性

3.1、display 属性

.box {
display: flex | inline-flex;
}

flex-direction 属性

.box {
flex-direction: row | row-reverse | column | column-reverse;
}

flex-wrap 属性

.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}

flex-flow 属性默认值为 row nowrap

.box {
flex-flow: <flex-direction> || <flex-wrap>;
}

justify-content 属性

.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}

align-items 属性

.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}

align-content 属性

align-content 属性定义了多根轴线（多行）在交叉轴上的对齐方式，如果项目只有一根轴线（一行），该属性不起作用：

.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

项目的属性

order 属性

.item {
order: <integer>;
}

flex-grow 属性属性定义项目的放大比例，默认为0

.item {
flex-grow: <number>; /* default 0 */
}

flex-shrink 属性 k 属性定义了项目的缩小比例，默认为1

.item {
flex-shrink: <number>; /* default 1 */
}

flex-basis 属性属性定义了在分配多余空间之前，项目占据的主轴空间（main size）它的默认值为auto，即项目的本来大小

.item {
flex-basis: <length>; | auto; /* default auto */
}

flex 属性 flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为0 1 auto

.item {
flex: none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]
}

align-self 属性 align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

10、浮动塌陷问题解决方法是什么？

①最简单，直接，粗暴的方法就是盒子大小写死，给每个盒子设定固定的width和height，直到合适为止，这样的好处是简单方便，兼容性好，适合只改动少量内容不涉及盒子排布的版面，缺点是非自适应，浏览器的窗口大小直接影响用户体验。

②给外部的父盒子也添加浮动，让其也脱离标准文档流，这种方法方便，但是对页面的布局不是很友好，不易维护。

③给父盒子添加overflow属性。

#parent{
    overflow:auto; 
}
#parent{
    overflow:hidden; 
}
④父盒子里最下方引入清除浮动块。最简单的有：

<br style="clear:both;"/>
⑤after伪类清除浮动。

#parent:after{
clear: both;
content: "";
width: 0;
height: 0;
display: block;
visibility: hidden;
}

11、position属性的值有哪些？各个值是什么含义？

static：默认值，元素是静止的没有开启定位

relative:元素的相对定位,以自身为参照物

absolute:元素的绝对定位，以最近的开启了定位的祖先元素为参照物

fixed:元素的固定定位

sticky:元素的粘滞定位

12、BFC、IFC是什么？

13、magin和padding 不同

作用对象不同。margin作用于外部，作用于内部

14、百分比和vw区别

%有继承关系 vw只和设备分辨率有关系

15、行内和块级元素

行内元素宽度由内容决定

块元素宽度继承关系，可以设置宽度

16、如何让谷歌小字体

通过tansform ：scale（0.5）

二、js

JavaScript

1、谈谈对原型链的理解。

2、js如何实现继承？

3、js有哪些数据类型？

es5 Number、String、Boolean、undefined、object、Null

ES6 中新增了一种 Symbol 。这种类型的对象永不相等，即始创建的时候传入相同的值，可以解决属性名冲突的问题，做为标记。
谷歌67版本中还出现了一种 bigInt。是指安全存储、操作大整数。

基本数据类型：String、Number、Boolean、Null、Undefined、Symbol、BigInt

引用数据类型：Object【Object是个大类，function函数、array数组、date日期...等都归属于Object】

4、js有哪些判断类型的方法？

typeof
instanceof instanceof 只能用于判断对象，基本数据类型值不能判断，所以也不能准确的判断出所有的类型！
constructor

constructor能判断基本数据类型string、number、boolean和对象类型（array、function等等），但是它不能判断undefined和null。所以它判断类型值也不十分准确！

4.Object.prototype.toString.call()

5、如何判断一个变量是否数组？

6、Null 和 undefined 的区别？

Null 一般最好使用null作为初始的空值

undefined/创建了一个变量没有赋值，默认值是undefined

7、call bind apply的区别？

call、apply 直接调用函数

bind返回一个函数

手写call

       Function.prototype.myCall = function (ctx) {
            ctx = ctx || window
            ctx.fn = this;
            const arg = [...arguments].slice(1)
            return ctx.fn(...arg);
        }

手写bind

          Function.prototype.myBind = function (ctx) {
            ctx = ctx || window;
            ctx.fn = this;
            const arg = [...arguments].slice(1);
            let result = ctx.fn(...arg);
            delete ctx.fn;
            return result;
         }

8、防抖节流的概念？实现防抖和节流。

防抖(debounce):

防抖触发高频率事件时n秒后只会执行一次,如果n秒内再次触发,则会重新计算。

概述:每次触发时都会取消之前的延时调用。

      function debounce1(func, wait) {
            let timer;
            return function () {
                if (timer) clearTimeout(timer)
                timer = setTimeout(() => {
                    func.apply(this, ...arguments)
                }, wait)
            }
        }

输入后先调用一次


        function debounce2(func, wait) {
            let timer;
            return function () {
                if (timer) {
                    clearTimeout(timer)
                } else {
                    func.apply(this, ...arguments)
                }

                timer = setTimeout(() => {
                    func.apply(this, ...arguments)
                }, wait)
            }
        }

节流(thorttle):

一段时间内只执行一次。

       function throttle(func, wait) {
            let timer;
            return function () {
                if (!timer) {
                    timer = setTimeout(() => {
                        timer = null;
                        func.apply(this)
                    }, wait);
                }
            }
        }

       function throttle(func, wait) {
            let prve = 0;
            return function () {
                let now = new Date();
                if (now - prve > wait) {
                    timer = setTimeout(() => {
                        prve = now;
                        func.apply(this)
                    }, wait);
                }
            }
        }

9、深拷贝、浅拷贝的区别？如何实现深拷贝和浅拷贝？

浅拷贝

如果属性是基本类型，拷贝的就是基本类型的值。如果属性是引用类型，拷贝的就是内存地址

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

深拷贝

开辟一个新的栈，两个对象属完成相同，但是对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性

（1）、JSON.stringify

const obj2=JSON.parse(JSON.stringify(obj1));

但是这种方式存在弊端，会忽略undefined、symbol和函数

（2）、循环递归

       function deepClone(val) {
            const obj = val.constructor == Object ? {} : [];
            for (var key in val) {
                if (val.hasOwnProperty(key)) {
                    if (typeof (val[key]) == 'object') {
                        obj[key] = deepClone(val[key])
                    } else {
                        obj[key] = val[key]
                    }
                }
            }
            return obj;
        }

10、对比一下var、const、let。

11、ES next新特性有哪些？

12、箭头函数和普通函数区别是什么？

13、使用new创建对象的过程是什么样的？

//普通函数是undefined 返回新创造的对象

function Person{

}

1、创建空对象 const obj = new Object()

2、设置原型链将obj.__proto__ = Person.prototype

3、改变this指向 let result = Person.call(obj)

4、判断返回值类型

if（typeof （result） ==“object”）{

Person = result
}else{

Person= obj
}

let obj = Object.creat(null) 没有原型链

let obj = {}

应用场景不同只存值用obj

for循环会循环原型链上的所有方法

14、this指向系列问题。

15、手写bind方法。

16、谈谈对闭包的理解？什么是闭包？闭包有哪些应用场景？闭包有什么缺点？如何避免闭包？

17、谈谈对js事件循环的理解？

18、谈谈对promise理解？

19、手写 Promise。

20、实现 Promise.all方法。

21、Typescript中type和interface的区别是什么？

22、讲讲Typescript中的泛型？

23、Typescript如何实现一个函数的重载？

24、CmmonJS和ESM区别？

25、柯里化是什么？有什么用？怎么实现？

26、讲讲js垃圾回收机制。

27、实现一个发布订阅。

首先学习Reflect

Reflect

Reflect 是一个内置的对象，它提供拦截 JavaScript 操作的方法，是 ES6 为了操作对象而提供的新 API。
Reflect不是一个函数对象，因此它是不可构造的。
Reflect的所有属性和方法都是静态的。

// 对一个函数进行调用操作，同时可以传入一个数组作为调用参数。
Reflect.apply(target, thisArg, args)	
// 对构造函数进行 new 操作，相当于执行 new target(...args)。
Reflect.construct(target, args)
// 获取对象身上某个属性的值，类似于 target[name]。如果没有该属性，则返回undefined。
Reflect.get(target, name, receiver)
// 将值分配给属性的函数。返回一个Boolean，如果更新成功，则返回true。
Reflect.set(target, name, value, receiver)
// Reflect.defineProperty方法基本等同于Object.defineProperty，直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，不同的是，Object.defineProperty返回此对象。而Reflect.defineProperty会返回布尔值.
Reflect.defineProperty(target, name, desc)
// 作为函数的delete操作符，相当于执行 delete target[name]。
Reflect.deleteProperty(target, name)
// 判断一个对象是否存在某个属性，和 in 运算符 的功能完全相同。
Reflect.has(target, name)
// 返回一个包含所有自身属性（不包含继承属性）的数组。(类似于 Object.keys(), 但不会受enumerable影响, Object.keys返回所有可枚举属性的字符串数组).
Reflect.ownKeys(target)
// 判断一个对象是否是可扩展的（是否可以在它上面添加新的属性）,类似于 Object.isExtensible()。返回表示给定对象是否可扩展的一个Boolean 。（Object.seal 或 Object.freeze 方法都可以标记一个对象为不可扩展。）
Reflect.isExtensible(target)
// 让一个对象变的不可扩展，也就是永远不能再添加新的属性。
Reflect.preventExtensions(target)
// 如果对象中存在该属性，如果指定的属性存在于对象上，则返回其属性描述符对象（property descriptor），否则返回 undefined。类似于 Object.getOwnPropertyDescriptor()。
Reflect.getOwnPropertyDescriptor(target, name)
// 返回指定对象的原型.类似于 Object.getOwnPropertyDescriptor()。
Reflect.getPrototypeOf(target)
// 设置对象原型的函数. 返回一个 Boolean， 如果更新成功，则返回true。如果 target 不是 Object ，或 prototype 既不是对象也不是 null，抛出一个 TypeError 异常。
Reflect.setPrototypeOf(target, prototype)

          class MyEvent {
                handler = {} //存放事件 map，发布者，存放订阅者
                $on(type, fn) {
                    if (!Reflect.has(this.handler, type)) {
                        this.handler[type] = []
                    }
                    this.handler[type].push(fn)
                }
                $emit(type, ...param) {
                    if (!Reflect.has(this.handler, type)) {
                        throw new Error(`未注册事件¥${type}`)
                    }
                    this.handler[type].forEach(fn => {
                        fn(...param)
                    })
                }
                $remove(type, fn) {
                    if (!Reflect.has(this.handler, type)) {
                        throw new Error(`未注册事件¥${type}`)
                    }
                    if (!fn) {
                        return Reflect.deleteProperty(this.handler, type)
                    }
                    const ind = this.handler[type].findIndex(item => {
                        console.log(item, fn)
                    })
                    if (ind == -1) {
                        throw new Error(`无效事件`)
                    }
                    this.handler[type].splice(ind, 1)
                    if (this.handler[type].length == 0) {
                        return Reflect.deleteProperty(this.handler, type)
                    }
                }

            }
            const eventBus = new MyEvent();

28、如何实现数组怕平？

普通递归

        var arr = [1, [2, [4, [5, [6]]]]]
        function flatten(arr) {
            if (!Array.isArray(arr)) return;
            let result = [];
            arr.forEach(item => {
                if (Array.isArray(item)) {
                    result = result.concat(flatten(item))
                } else {
                    result.push(item)
                }
            })
            return result;
        }
        console.log(flatten(arr))

利用reduce函数迭代

var arr = [1, [2, [4, [5, [6]]]]]
function flatten1(arr) {
  // reduce 初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。
  return arr.reduce((prev, cur, index) => {
     return prev.concat(Array.isArray(cur) ? flatten1(cur) : cur)
  }, [])
 }
  console.log(flatten1(arr))

扩展运算符实现

       var arr = [1, [2, [4, [5, [6]]]]]
        function flatten2(arr) {
            while (arr.some(item => Array.isArray(item))) {
                arr = [].concat(...arr)
            }
            return arr;
        }
        console.log(flatten2(arr))

split和toString共同处理

        var arr = [1, [2, [4, [5, [6]]]]]
        function flatten2(arr) {
            return arr.toString().split(",")
        }
        console.log(flatten2(arr))

ES6的flat函数实现

       var arr = [1, [2, [4, [5, [6]]]]]
        function flatten2(arr) {
            return arr.flat(Infinity)
        }
        console.log(flatten2(arr))

29、如何实现数组去重？

set与解构赋值去重

console.log([...new Set(arr)])

Array.from与set去重

console.log(Array.from(new Set(arr)))

利用数组遍历去重

       function fn(arr) {
            let newArr = []
            arr.forEach(item => {
                if (newArr.indexOf(item) == -1) {
                    newArr.push(item)
                }
            })
            return newArr;
        }
        console.log(fn(arr))

includes

      function fn2(arr) {
            const newArr = arr.reduce((prev, next) => {
                if (prev.includes(next)) {
                    return prev
                } else {
                    return prev.concat(next)
                }
            }, [])
            return newArr;
        }
        console.log(fn2(arr))

利用数据结构存值的特点

        function fn1(arr) {
            let map = new Map()
            let newArr = []
            arr.forEach(item => {
                if (!map.has(item)) {
                    map.set(item, true);
                    newArr.push(item)
                }
            })
            return newArr;
        }
        console.log(fn1(arr))

三、浏览器输入URL回车

https：//www.baidu.com

url 统称资源定位符，俗称网址

https 协议（http和tcp之间加了一层TSL或者SSL的安全层）

www 服务器万维网

baidu.com 域名

第一次访问：解析url =>去dns服务器 =>拿到真实ip=>建立连接（tcp三次握手）=>拿数据渲染数据

=>四次挥手

第二次访问：将域名解析的ip存在本地=>读取浏览器缓存

TCP的三次握手

一、客户端向服务端发送请求

二、服务端确认，回复指令

三、收到指令，返回确认

html=>dom =>render tree =>计算布局信息=>ui引擎渲染=>用户所见页面

css=>css结构体

从哪些做性能优化

a、加载

1、减少http请求（雪碧图，文件的合并）

2、减少文件大小（代码压缩、图片压缩、资源压缩）

3、引用cdn（第三方库）

4、SSR服务端渲染、预渲染

5、懒加载

6、分包

b、性能

1、减少dom操作，避免回流、文档碎片

真正性能优化：1 页面加载性能 2、动画与操作性能（transform：translate脱离正常文档流，省去重新渲染dom ）3、内存占用 4、电量消耗

如何实现响应式发布订阅以及双向数据绑定

Vue

1、讲讲Vuex的使用方法。

2、讲讲Vue双向绑定原理。

3、mvvm和mvc区别是什么？

4、Vue组件间通信方式有哪些？

5、computed和watch区别是什么？

6、v-for和v-if同时使用有问题吗？

7、讲讲前端路由原理。比较一下history和hash这两种路由。

8、讲讲Vue的虚拟DOM，原理，好处是什么？相对于手动操作DOM，性能更好吗？

9、说说Vue的keep-alive使用及原理。

10、Vue父子组件生命周期触发顺序是怎样的？

11、Vue.nextTick的实现？

12、讲讲Vue diff算法。

React

1、讲讲React diff算法。

2、React组件复用方式有哪几种？

3、React fiber是什么？有什么用？

4、React生命周期有哪些？React16废弃了哪些？为什么要废弃？新增的生命周期钩子有哪些？有什么作用？

5、如何对React性能优化？

6、React的setState是同步的还是异步的？

7、讲讲React事件绑定原理。

8、讲讲React的hooks，有什么好处？有哪些常用的hook？

9、讲讲Reactkey的作用。

10、谈谈React的类组件和函数式组件的区别。

工程化

1、webpack性能优化有哪些方法？

2、webpack的loader和plugin区别是什么？常用的plugin和loader有哪些？

3、webpack构建流程是什么？

4、讲讲tree-shaking原理。

性能优化

1、前端页面性能如何优化？

2、讲讲回流和重绘的区别，如何避免回流和重绘？

安全

1、网络攻击有哪些？如何防御？

计算机基础

1、进程与线程区别是什么？

进程是正在运行的程序实例

线程是进程中执行执行任务的基本单位

也就是说一个运行的程序至少包含一个进程，一个进程至少包含一个线程，线程不能独立于进. 程存在

2、讲讲TCP三次握手、四次挥手，为什么要三次握手、四次挥手？

3、TCP和UDP区别是什么？

网络通信

1、说说从输入url到页面展示出来的整个过程。

https：//www.baidu.com

url 统称资源定位符，俗称网址

https 协议（http和tcp之间加了一层TSL或者SSL的安全层）

www 服务器万维网

baidu.com 域名

第一次访问：解析url =>去dns服务器 =>拿到真实ip=>建立连接（tcp三次握手）=>拿数据渲染数据=>四次挥手

第二次访问：将域名解析的ip存在本地=>读取浏览器缓存

TCP的三次握手

一、客户端向服务端发送请求

二、服务端确认，回复指令

三、收到指令，返回确认

html=>dom =>render tree =>计算布局信息=>ui引擎渲染=>用户所见页面

css=>css结构体

2、什么是跨域？为什么会出现跨域？如何解决跨域问题？jsonp原理是什么？

10种跨域解决方案（附终极大招） - 掘金

1.什么是跨域

当一个资源去访问另一个不同协议或者不同域名或者同域名不同端口的资源时，就会发出跨域请求，跨域指的是浏览器不能执行其它网站的脚本。是由浏览器的同源策略造成的，是浏览器对JavaScript 施加的安全限制。所以要注意是浏览器在发送请求时存在协议、域名、端口有不一样的情况

2.为什么会出现跨域问题？

因为同源策略。所谓的同源策略就是一种安全策略，一种安全功能。它要求浏览器发送的请求中协议、域名、端口号必须与ajax请求路径的协议、域名、端口号一致才可以请求成功，也就是访问到服务器。
协议、域名、端口号都相同才会满足同源策略，三者中只要有一个不一样就是存在跨域问题

所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

同源策略限制以下几种行为：

a、Cookie、LocalStorage 和 IndexDB 无法读取

b、DOM 和 Js对象无法获得

c、AJAX 请求不能发送

3.如何解决跨域问题？

<script>、<img>、<iframe>、<link>这些包含 src 属性的标签可以加载跨域资源。但浏览器限制了JavaScript的权限使其不能读、写加载的内容
JSONP
Nginx代理
后台设置
vue前端代理

JSONP（JSON with Padding）是JSON的一种补充使用方式，不是官方协议，而是利用 Script 标签请求资源可以跨域的特点，来解决跨域问题的，是一种变通的解决方案。
使用 JSONP，需要服务器后台改动

JSONP 实现原理
JSONP请求的类型是JavaScript脚本（callback 作为前后端的约定，callback的值做为方法名，json内容作为方法的参数），而XHR请求的类型是jsonp类型。

3、http各版本的改进都是什么？

HTTP/1.1的改进

HTTP/1.0的缺点

1、HTTP/1.0每一次请求都要建立一次连接，然后断开连接，系统开销大。
2、发送方每次都要等上次发出的请求得到响应了才能发送下一个请求，效率太低。

HTTP/1.1的改进

1、TCP连接使用长连接，减少频繁建立连接释放连接的系统开销。
2、支持管道进行网络传输，不用等上一个请求被响应就能发送下一个请求，提升效率。

HTTP/2的改进

HTTP/1.1的性能缺陷

1、请求/响应的头部过大，会增大延迟，要减小延迟只能压缩请求/响应体。
2、发送过多相同的头部，浪费资源。
3、虽然HTTP/1.1支持管道进行传输，提升请求发送的效率，但是服务端对请求的响应是按顺序响应的，如果前面的请求没有处理，那么后面的也得不到处理，称为队头阻塞。
4、请求没有优先级的区分。对于客户端来说，有的请求可能急需处理，而有些请求即使慢一些响应也能接受，而HTTP/1.1没有考虑到这方面。
5、请求只能由客户端发出，服务端只能被动响应。

HTTP/2的优化

1、头部压缩：如果发送方同时发出多个请求，且头部相同，则会消除重复的部分。实现原理是在客户端和服务端维护一个索引表，如果有相同的字段就发送索引号即可。
2、二进制格式：HTTP/2采用二进制格式，计算机无需将文本转化成二进制，提升了效率。
3、数据流：一次请求或响应作为一个数据流，数据流可以并发发送数据帧给对方。在不用建立多条连接的情况下也能解决队首阻塞的问题。
4、多路复用：一个连接中并发多个请求或响应，接收方不用按照顺序进行响应。
5、服务器推送：服务器不再是被动的，也可以主动给客户端发送消息。例子：服务器可以提前把可能用到的CSS、JS等静态资源县发给客户端，这样不用等到请求的时候再发送。

HTTP/3的改进

HTTP/2的缺陷

多个HTTP请求复用一个TCP连接，一旦发生了丢包，触发重传机制，一个连接中的所有HTTP请求都要等这个重传的包。也就是说一旦发生丢包，所有的HTTP请求都会阻塞。

HTTP/3的改进

HTTP/3把TCP改成了UDP，基于UDP的QUIC协议能实现类似TCP的可靠传输。

4、 https原理是什么？为什么可以保证安全性？

一、名词解释

对称加密：客户端和服务端公用一个秘钥，既可以进行加密操作也可以进行解密操作，常见的对称加密算法如：AES等

优点：算法公开、加解密速度相对较快等
缺点：秘钥对外公开，安全性得不到保障
非对称加密：包含一对秘钥，其中对外暴露公钥，客户端数据公钥加密；服务端保留私钥，解密公钥加密的数据

优点：公钥私钥成对出现并且只对外暴露公钥，除了私钥拥有者，其它无法解密公钥加密的数据，安全性相对较高
缺点：对比对称加密，算法复杂，解密效率低，对于数据量大，访问频率高的接口很明显不适合
总结：可以看出当我们想对外暴露接口的时候单纯的使用对称加密、非对称加密都不合适

接下来我们看https是怎么做到安全的
二、https实现原理

一句话总结http:客户端和服务端数据不加密，请求可以被拦截，然后篡改数据模拟访问服务端，具体我们不深入

我们先了解一下三个角色

CA机构：证书授权中心，是电子商务交易中受信任的第三方，承担公钥体系中公钥的合法性检验的责任。
服务端：我们在暴露接口之前首先要先注册证书，然后将证书配置到我们的服务，让我们的服务支持https
客户端：CA用客户端的私钥加密服务端的公钥（包含：公钥，有效期、域名、签名算法等）生成证书然后内置到客户端（浏览器）
我们来看一下客户端和服务端的交互

解释：

整个流程分为证书验证和数据传输两步

浏览器发送https请求到服务端，服务端返回对应证书（公钥、签名算法、有效期等）
浏览器通过内置证书校验服务器返回证书的有效性，如果校验不通过：提示用户
如果校验通过，解析得到服务端公钥，生成随机数，然后用服务端公钥加密随机数发送到服务端
服务端私钥解密得到浏览器生成的随机数，然后以该随机数当做对称加密的秘钥进行对称加密进而数据传输
总结：证书验证有效避免了第三发恶意伪造公钥，第三步确保了对称加密秘钥的安全性，第四步使用对称加密，效率更高

总体下来，即保证了安全性，又提高了传输效率，那是不是有了https就万事大吉了呢、、、
三、抓包篡改数据

用户在正常访问的情况下https数据传输是安全的

但如果用户安装抓包软件并在客户端和抓包软件分别安装证书（用户授权访问）那么就可以将请求中间拦截，然后修改访问数据或者返回数据，这样以来我们就可以通过修改访问参数来进行我们想要的操作

四、实际中我们应该怎么设计对外暴露接口

必须使用https
给客户端分片AppId，服务端过滤有效防止恶意访问
和客户端约定验签（将请求参数通过约定排列然后通过摘要算法如MD5生成签名），然后服务端用相同方式生成签名对比
还可以设置请求的有效时间（请求参数带上当前时间），后台验证本次请求超过一定时间视为过期
设置白名单，可对ip等进行限制
为保护后台服务，应设置限流、容错措施，防止服务整体不可用