日记8.26

2024.8.26

Ajax是什么？怎么实现？

1
2
ajax是创建交互式网页的开发技术
    在不重新加载整个页面的前提下，与服务器交换数据并更新部分内容，通过XmlHttpRequest对象向服务器发送异步请求，然后从服务器拿到数据，最后通过JS操作DOM更新页面

get和post的区别

1
2
3
4
5
6
1.get一般用来获取数据，post用来提交数据
2.get参数会放在url上，安全性较差，post是放在body中
3.get请求时退回或者刷新服务器是没有影响的，post请求退回时会重新提交数据
4.get请求时会被缓存，post请求不会被缓存
5.get请求会被保存在浏览器记录中，post不会
6.get请求只能进行url编码，post支持很多种

Promise是什么？内部原理是什么？它的优缺点？

1
2
Promise是一种在JS中处理异步操作的机制。它代表了一个可能还未完成的操作，并允许你在操作完成时处理结果或错误
Promise用来解决回调地狱问题，以前异步任务多的时候需要不断用到回调函数处理，这样代码可读性差，可维护性弱
1
2
3
Promise的原理：
    构造了一个Promise实例，实例需要传递函数的参数，这个函数有两个形参，分别都是函数类型，一个是resolve，一个是reject
    Promise上还有then方法，这个方法就是用来指定状态改变时的操作，resolve执行第一个函数，reject执行第二个函数
1
2
3
4
5
6
Promise优点:
    1.一个清晰的异步代码，通过.then和.catch方法以链式书写代码
    2.兼容性好，且与async、await兼容

Promise缺点：
    1.当创建大量Promise实例时，增加了性能开销

promise和async/await的区别

1
2
3
4
5
6
7
1.都是处理异步请求的方式
2.promise是es6语法，async/await是es7语法
3.async/await是基于promise实现的，和promise都是非阻塞性的

优缺点：
1.promise是返回对象需要我们用then，catch方法去处理和捕获异常，并且书写方式是链式，容易造成代码堆叠，不好维护，async/await是通过try/catch进行捕获异常的
2.async/await最大优点是使代码看起来像同步一样，只要遇到await就立刻返回结果，然后再执行后面的操作。

页面渲染的过程

1
2
3
4
5
6
1.加载和解析：加载 HTML、CSS 和 JavaScript 文件，并解析它们。
2.构建 DOM 和 CSSOM：创建 DOM 树和 CSSOM 树。
3.构建渲染树：结合 DOM 和 CSSOM 构建渲染树。
4.布局和绘制：计算元素的布局，绘制页面内容到屏幕。
5.执行 JavaScript：执行 JavaScript 代码，处理用户交互，可能会影响渲染过程。
6.优化：对应的浏览器通过各种技术优化渲染性能(GPU加速)

精灵图和base64的区别是什么？

1
2
3
4
精灵图：把多张小图整合到一张大图上，利用定位的一些属性把小图显示在页面上，当访问页面可以减少请求，提高加载速度

base64:传输8Bit字节代码的编码方式，把原本二进制形式转为64个字符的单位，最后组成字符串。
base64会和html css一起下载到浏览器中，减少请求，减少跨域问题，但一些低版本不支持，若base64体积比原图大，不利于css加载

svg格式了解多少？

1
2
3
4
5
6
7
svg是基于XML语法格式的图像格式，可缩放矢量图，其他图像是基于像素的，svg是属于对图像的描述，本质上是文本文件，体积小，并且不管放大多少倍都不会失真

1.svg可直接插入页面中，成为DOM的一部分，然后用JS和CSS进行操作 
    <svg></svg>
2.svg可作为文件被引入
    <img src= "pic.svg">
3.SVG可以转为base64引入页面

JWT了解吗

1
2
3
4
5
6
7
8
JSON Web Token(简称JWT)是通过JSON形式作为在web应用中的令牌，可以在各方之间安全的把信息作为JSON对象传输

一个基本的JWT认证流程：
1.前端把账号密码发给后端接口
2.后端核对账号密码成功后，把用户的id等其他信息作为JWT负载,把它和头部分别进行base64编码拼接后签名，形成一个JWT
3.前端每请求时都会把JWT放于HTTP请求头的Authorization字段内
4.后端检查是否存在，如果存在就验证JWT有效性（签名是否正确，token是否过期）
5.验证通过后后端用JWT中包含的用户信息进行其他操作，并返回对应结果