# day08_admin_background **Repository Path**: wei-yanzhen/day08_admin_background ## Basic Information - **Project Name**: day08_admin_background - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-12-07 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 1.说一下从输入 URL 到页面加载完中间发生了什么? ~~~~ 1. DNS**解析（解析URL对应的IP） 2. TCP 连接（三次握手） 3. 发送 HTTP 请求 4. 服务器处理请求并返回需要的数据 5. 浏览器解析渲染页面 6. 连接结束（四次挥手） 三，四次挥手 三次握手是连接协议，关闭连接是四次协议 握手 1.建立连接时，客户端发送请求到服务器端，服务器端接受成功 2.服务端发给客户端，客户端知道自己接受成功 3.客户端发给服务器端，服务器知道客户端发送成功 挥手解析 1.客户端请求断开fin 2.服务器确认客户端的断开请求 3.服务器请求断开fin 4.客户端确认服务器的断开ack ~~~~ ## 2、跨域的解决方式有哪些？ 答：产生跨域的情况有：不同协议，不同域名，不同端口以及域名和 ip 地址的访问都会产生跨域。 jsonp的原理 协议，域名，端口号，任意一个与当前页面url不符就是跨域 jsonp的原理 动态创建script标签 传递callback然后后端处理返回 callback，callback函数调用的形式参数是json 是一个非官方的协议，通过jscallback·实现跨域访问 ~~~ 跨域的解决方案目前有三种主流解决方案： 是 jsonp jsonp 实现原理：主要是利用动态创建 script 标签请求后端接口地址，然后传递 callback 参数，后端接收 callback，后端经过数据处理，返回 callback 函数调用的形式，callback 中的参数就是 json 优点：浏览器兼容性好， 缺点：只支持 get 请求方式 是代理（前端代理和后端通常通过 nginx 实现反向代理） 前端代理我在vue 中主要是通过vue 脚手架中的config 中的index 文件来配置的，其中有个 proxyTable 来配置跨域的 前端代理核心实现通过 http-proxy-middleware 插件来实现的，vue2.x 和 vue3.x 脚手架代理跨域实现原理是一样的是 CORS CORS 全称叫跨域资源共享，主要是后台工程师设置后端代码来达到前端跨域请求的 CORS 的原理：CORS 定义一种跨域访问的机制，可以让 AJAX 实现跨域访问。 CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单，只需由服务器发送一个响应标头即可。 优点：无需前端工程师设置，只需后端工程师在请求的页面中配置好，并且支持所有请求方式（例如：get,post,put,delete 等） 缺点：浏览器支持有版本要求，如下： chrome:13+,firefox:3.5+,IE 11+,edge:12+ 注：现在主流框架都是用代理和 CORS 跨域实现的 ~~~ ## generator(异步编程，yield，next，await，async) ~~~ generator是一个迭代器生成函数他会返回一个 generator对象 基本用法： 1.function后面有个星号， 2.函数内部使用yield表达式 3.通过yield一步一步执行 要执行yield 需要和next配合使用 next的参数传递 我们可以在调用next()的时候传递一个参数，和yield配合使用 async await 使用场景：通过yield标识位和next（）方法调用实现函数的分段执行 ~~~ ## async/await ~~~~ 是一套关于异步解决的方案 两个作用1.求值关键字2.异步操作变为同步操作 1.async会返回一个promise对象，执行时遇到await就会先返回，触发异步操作完成后，再接着执行函数后面的语句 2.优势就在于改善pramise的.then链 3.await必须在async的函数内部使用 4.awati后面必须要跟一个promise（不是的话用reslove转换他） 5.await的返回结果就是后面promise执行的结果 ~~~~ ## 瀑布流原理 ~~~ 1.等宽不等高 2.为了让最后一行差距最小，需要将图片放在上一行最矮的图片下面 3.通过父相子绝 设置子元素top和left每个元素 ~~~ ## 继承 ~~~ 有些对象会有方法，而这些方法都是函数，会浪费内存 继承：通过某种方式让一个对象可以访问到另一个对象的属性和方法 继承是为了扩展，有六种扩展 1.原型链继承 利用原型让一个引用类型继承另一个引用类型属性和方法 缺点: 原型会变成另一个类型的实例，会被实例共享 给父类传递参数会影响实例 2.借用构造函数 子类向调用父类的构造函数 优点： 可以向父类传参 解决原型的实例共享问题 缺点： 没办法函数复用，父类的方法子类都不可见 3.组合继承（原型链+借用构造函数） 原型链实现对原型和方法的继承，构造函数实现实例属性的继承，可以函数复用，可以保证每个函数都有实例 多继承 优点： 可以向父类传递参数 都有自己的属性 函数复用 缺点： 都会调用超过两次的父函数一次是子类型原型，一次是构造函数 4.原型式继承 可以基于已有对象创建对象，还不必因此创建自定义类型 缺点：都会被实例共享 5.寄生式继承 创建一个仅用于封装继承的函数，在内部已某种方式来增强对象，最后再像真的是它做了所有工作一样返回对象 缺点 不能函数复用 会被实例共享 6.寄生组合式继承 不必为了指定子类型的原型而调用父类的构造的函数，只要一个副本，使用寄生式集成集成父类在给子类 优点：只调用一次父类构造函数，效率更高 ~~~ ## rem 布局原理 ~~~ rem布局的本质是等比缩放，一般是基于宽度 rem：相对于根元素(即 html 元素)font-size 计算值的倍数。通俗的说，1rem = html 的 font-size 值 通过使用 rem + js 改变 html 标签的 font-size（整体缩放） 自适应的原理：可以通过监测屏幕大小改变html字体的大小，从而实现自适应大小的效果 ~~~ ## 响应式布局如何实现 ~~~ 响应式布局可以让网站同时适配不同分辨率和不同的手机端，让客户有更好的体验。 方案一：百分比布局 图片和盒子尽量使用百分比布局，适配手机端效果不好 方案二：使用媒体查询 (CSS3 @media 查询) 使用 @media 查询，你可以设置不同的分辨率来设置不同的样式 方案三.rem 响应式布局 响应式网页不仅仅是响应不同类型的设备，还要响应不同的用户需求。 方案四.vw 响应式布局 vw:相对于视口的宽度。视口被均分为100单位的vw; ---它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。 ~~~