async是异步的意思,await则可以理解为async wait ,所以可以立即async就是用来声明一个异步方法,而await是用来等待异步方法执行的。
扩展: JSONPlaceholder 是一个免费的在线 REST API,用于开发和测试前端应用程序。它提供了一组模拟的 HTTP 接口,可以进行常见的 CRUD(创建、读取、更新、删除)操作,如获取用户信息、文章、评论等。这样,开发人员可以在不使用真实后端服务的情况下,通过 JSONPlaceholder 来模拟和测试前端应用程序的数据交互。
function f() { return Promise.resolve('TEST'); }
async function asyncF() { return 'TEST'; }
这两种写法都是等效的,第一种使用传统的Promise去创建,第二种使用了语法糖。
Promise.resolve() 可以创建一个返回给定值的 Promise 对象,这里返回的是字符串 'TEST'
用async声明的函数会被自动封装为一个 resolved 状态的 Promise 对象。
async function fn1() {
console.log(1)
await fn2()
console.log(2) // 阻塞
}
async function fn2() {
console.log('fn2')
}
fn1()
console.log(3);
await 会阻塞下面的代码(即加入微任务队列),先执行 async外面的同步代码,同步代码执行完,再回到 async 函数中,再执行之前阻塞的代码
所以上述输出结果为:1,fn2,3,2
在css3中,为了添加某种效果可以从一种样式转变到另一个的时候,无需使用Flash动画或者javascript. 直接使用transition
transition控制的是属性值的过渡效果,而不是特定的属性
cursor: pointer; 鼠标放上去会变成手性指示
加密方式:对称加密,非堆成加密,哈希算法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Symmetric Encryption Example</title>
</head>
<body>
<h1>Symmetric Encryption Example</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
<script>
// 定义一个密钥(需要确保密钥的安全性)
const key = "mySecretKey123";
// 待加密的数据
const data = "Hello, this is a secret message.";
// 加密函数
function encryptData(data, key) {
const encryptedData = CryptoJS.AES.encrypt(data, key).toString();
return encryptedData;
}
// 解密函数
function decryptData(encryptedData, key) {
const decryptedData = CryptoJS.AES.decrypt(encryptedData, key).toString(CryptoJS.enc.Utf8);
return decryptedData;
}
// 加密数据
const encryptedData = encryptData(data, key);
console.log("Encrypted Data:", encryptedData);
// 解密数据
const decryptedData = decryptData(encryptedData, key);
console.log("Decrypted Data:", decryptedData);
</script>
</body>
</html>
中数据类型
Symbol、BigInt
es6的时候新增Symbol数据类型,每个通过Symbol()创建的对象属性值都是独一无二的,避免了重复。
// 创建一个 Symbol 值
const mySymbol = Symbol('description');
// 使用 Symbol 作为对象的属性名
const obj = {
[mySymbol]: 'Hello, Symbol!'
};
console.log(obj[mySymbol]); // 输出: Hello, Symbol!
在 JavaScript 中,普通的 Number 类型使用双精度浮点数表示,其最大安全整数是 2^53 - 1,es10中新增BigInt,它可以表示任意精度的整数,取决于计算机内存的大小
BigInt 类型的字面量以 "n" 结尾,用来区分普通的 Number 类型
position属性取值:static(默认)、relative、absolute、fixed、inherit、sticky。
float属性取值:none(默认)、left、right、inherit。
display属性取值:none、inline、inline-block、block、table相关属性值、inherit。
1.针对数据操作的类型不同.GET对数据进行查询,POST主要对数据进行增删改!简单说,GET是只读,POST是写。
2.参数大小不同. GET请求在URL中传送的参数是有长度的限制,而POST没有限制
3.安全性不同. GET参数通过URL传递,会暴露,不安全;POST放在Request Body中,相对更安全
4.浏览器回退表现不同 GET在浏览器回退时是无害的,GET 请求可能会比较宽松地进行重试,而 POST 请求则会更加谨慎,避免自动重复发起请求,以确保数据提交的准确性和安全性。
6.浏览器对响应的处理不同GET请求参数会被完整的保留在浏览器历史记录里,而POST中的参数不会被保留
图片懒加载也叫延迟加载,只加载当前屏幕的图片,可视区域外的图片不会进行加载,只有当屏幕滚动的时候才加载。
特点:
节流是一种常用的性能优化技术,它可以限制函数的执行频率,避免过多的重复操作,提升页面的响应速度。
函数在 n 秒内只执行一次,如果多次触发,则忽略执行。
应用场景:
「手写代码-节流」
防抖函数可以将多次高频率触发的函数执行合并成一次,并在指定的时间间隔后执行一次。通常在处理输入框、滚动等事件时使用,避免频繁触发事件导致页面卡顿等问题。
函数在 n 秒后再执行,如果 n 秒内被触发,重新计时,保证最后一次触发事件 n 秒后才执行。
应用场景:
「手写代码-防抖」
SPA首屏加载慢可能有以下原因:
性能优化是为了提高网页的加载速度和相应速度,给用户带来更好的体验和用户满意度,同时还能减少服务器的负载压力,以此来提升程序的稳定性,具体有以下几个因素:
除此之外还有常见的258原则、GOOGLE团队建议
258原则
作者:https://juejin.cn/post/7273119689185673253
因篇幅问题不能全部显示,请点此查看更多更全内容
怀疑对方AI换脸可以让对方摁鼻子 真人摁下去鼻子会变形
女子野生动物园下车狼悄悄靠近 后车司机按喇叭提醒
睡前玩8分钟手机身体兴奋1小时 还可能让你“变丑”
惊蛰为啥吃梨?倒春寒来不来就看惊蛰
男子高速犯困开智能驾驶出事故 60万刚买的奔驰严重损毁