其他（网络协议等）

script_____
102 阅读6分钟

其他

解决跨域的方式都有哪些？他们的特点是什么

  • 什么是跨域：协议，域名，端口号不同的请求，称之为跨域 解决跨域的方案：
  • JSONP利用<script>标签没有跨域限制的“漏洞”、来达到与第三方通讯的目的。现在基本上都不用了，因为它有两个常见的缺点：只支持GET请求+可能导致XSS攻击。
  • CORS是跨域资源分享（Cross-Origin Resource Sharing）的缩写。它是 W3C 标准，属于跨源 AJAX 请求的根本解决方法。
  • 代理
  • webpack本地代理：在webpack.config.js中利用WebpackDevServer proxy配置本地代理

HTTP的结构

HTTP报文由起始行（start line）、头部（header）和主体（body）三部分组成，起始行是对报文进行的描述，头部包含报文的一些属性，主体包含报文的数据（可选，非必选）

常见的http状态码有哪些？分别代表什么意思？

  • 200：请求被正常处理
  • 204：请求被受理但没有资源可以返回
  • 206：客户端只是请求资源的一部分，服务器只对请求的部分资源执行GET方法，相应报文中通过Content-Range指定范围的资源。
  • 301：永久性重定向
  • 302：临时重定向
  • 303：与302状态码有相似功能，只是它希望客户端在请求一个URI的时候，能通过GET方法重定向到另一个URI上
  • 304：发送附带条件的请求时，条件不满足时返回，与重定向无关
  • 307：临时重定向，与302类似，只是强制要求使用POST方法
  • 400：请求报文语法有误，服务器无法识别
  • 401：请求需要认证
  • 403：请求的对应资源禁止被访问
  • 404：服务器无法找到对应资源
  • 500：服务器内部错误
  • 503：服务器正忙

https和http有什么区别，https的实现原理？

  1. HTTP 的URL 以http:// 开头，而HTTPS 的URL 以https:// 开头
  2. HTTP 是不安全的，而 HTTPS 是安全的
  3. HTTP 标准端口是80 ，而 HTTPS 的标准端口是443
  4. 在OSI 网络模型中，HTTP工作于应用层，而HTTPS 的安全传输机制工作在传输层
  5. HTTP 无法加密，而HTTPS 对传输的数据进行加密
  6. HTTP无需证书，而HTTPS 需要CA机构颁发的SSL证书

localStorage、SessionStorage、cookie、session 之间有什么区别

image.png

Get和Post的区别

两种都是HTTP请求的基本方法，两者之间的区别主要体现在请求参数发送过程的不相同。最直观的区别就是get把参数包含在url中，而post通过request body传递参数。

  • GET提交:通过请求行拼接参数将数据发送给服务器,地址栏携带参数相对不安全,且数据量不能太大。
  • POST提交:通过请求实体内容携带参数,数据不会显示在地址栏,相对安全,数据量理论无限制。 只有当使用表单(form),并且明确method属性指定方式为POST时,才是POST提交,其他请求都是GET提交

从浏览器输入url后都经历了什么

  1. 浏览器的地址栏输入URL并按下回车。
  2. 浏览器查找当前URL是否存在缓存，并比较缓存是否过期。
  3. DNS解析URL对应的IP。
  4. 根据IP建立TCP连接（三次握手）。
  5. HTTP发起请求。
  6. 服务器处理请求，浏览器接收HTTP响应。
  7. 渲染页面，构建DOM树。
  8. 关闭TCP连接（四次挥手）。

浏览器重绘与回流的区别？如何触发的？如何避免重绘或者回流

  • 重排/回流（Reflow）：当DOM的变化影响了元素的几何信息，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。表现为重新生成布局，重新排列元素。
  • 重绘(Repaint): 当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。表现为某些元素的外观被改变
  • 单单改变元素的外观，肯定不会引起网页重新生成布局，但当浏览器完成重排之后，将会重新绘制受到此次重排影响的部分
  • 重排和重绘代价是高昂的，它们会破坏用户体验，并且让UI展示非常迟缓，而相比之下重排的性能影响更大，在两者无法避免的情况下，一般我们宁可选择代价更小的重绘。
  • 『重绘』不一定会出现『重排』，『重排』必然会出现『重绘』。

浏览器重绘与回流如何触发的？

任何改变用来构建渲染树的信息都会导致一次重排或重绘：

  • 添加、删除、更新DOM节点
  • 通过display: none隐藏一个DOM节点-触发重排和重绘
  • 通过visibility: hidden隐藏一个DOM节点-只触发重绘，因为没有几何变化
  • 移动或者给页面中的DOM节点添加动画
  • 添加一个样式表，调整样式属性
  • 用户行为，例如调整窗口大小，改变字号，或者滚动。

如何避免重绘或者回流？

  1. 集中改变样式，不要一条一条地修改 DOM 的样式。
  2. 不要把 DOM 结点的属性值放在循环里当成循环里的变量。
  3. 为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是不会 reflow 的。
  4. 不使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。
  5. 尽量只修改position：absolute或fixed元素，对其他元素影响不大
  6. 动画开始GPU加速，translate使用3D变化
  7. 提升为合成层

防抖和节流相关原理，区别及应用

  • 节流：在规定的间隔时间范围内不会重复的触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发 （闭包+延时器）
  • 防抖：前面的所有出发点都被取消，最后一次执行在规定的时间之后才会触发，也就是多次触发事件，只执行一次。也就是说，当一个事件被触发准备执行事件函数前，会等待一定的时间（这时间是码农自己去定义的，比如 1 秒），如果没有再次被触发，那么就执行，如果被触发了，那就本次作废，重新从新触发的时间开始计算，并再次等待 1 秒，直到能最终执行！ 使用场景：
  • 节流：滚动加载更多、搜索框搜的索联想功能、高频点击、表单重复提交……
  • 防抖：搜索框搜索输入，并在输入完以后自动搜索、手机号，邮箱验证输入检测、窗口大小 resize 变化后，再重新渲染。
avatar
文章
阅读
粉丝