首页wordpress主题网站百度关键词seo排名优化
事件循环
单线程的js在处理异步事件时进行的一种循环过程。
在 JS中任务分为同步与异步任务，其中异步任务又分为两种：宏任务和 微任务。宏任务和微任务的执行顺序：总方针是先同步再异步，异步中先微任务，在宏任务。一次事件循环只执行一个宏任务，所以先清理完微任务，在清理一个宏任务结束后，开启下一次事件循环，即检查有无新增微任务，直到所有的异步任务执行完
await
await用于等待一个异步操作的完成，并获取其最终结果。在使用"await"时，函数会被暂停，直到异步操作完成才会继续执行
伪类、伪元素
伪类：
为处于某个状态的已有元素添加对应的样式，这个状态是根据用户行为而动态改变的
状态伪类:基于元素当前状态进行选择的,元素的样式会根据其状态呈现不同的样式，当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。
常见的状态伪类
:link 应用于未被访问过的链接； :hover 应用于鼠标悬停到的元素；:active 应用于被激活的元素；:visited 应用于被访问过的链接，与:link互斥。:focus 应用于拥有键盘输入焦点的元素。结构性伪类 :css3新增选择器,利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁
:first-child 选择某个元素的第一个子元素； :last-child 选择某个元素的最后一个子元素；:nth-child(n) 匹配属于其父元素的第 n个子元素，不论元素的类型；伪元素：
创建一些不在文档树中的元素，并为其添加样式
选择器 例子 例子描述
::after p::after 在每个 <p> 元素之后插入内容。
::before p::before 在每个 <p> 元素之前插入内容。
::first-letter p::first-letter 选择每个 <p> 元素的首字母。
::first-line p::first-line 选择每个 <p> 元素的首行。
::selection p::selection 选择用户选择的元素部分。选择器权重
选择器 权重 权重的等级
！important 无穷大 0
style 属性 1,0,0,0 1
id 选择器 0,1,0,0 2
类、伪类、结构伪类、属性选择器 0,0,1,0 3
标签、伪元素选择器 0,0,0,1 4
通配符选择器 0,0,0,0 5
继承的样式 没有权重 6for in与for of 区别
1. for...in :用于遍历对象的可枚举属性(包括原型链上的属性)。
适合遍历对象的属性。
返回的是属性名(字符串)。
2. for...of:用于遍历可迭代对象(如数组、字符串、Map、Set).
适合遍历数组元素或其他可迭代对象的值。
返回的是值，而不是索引或属性名。
防抖、节流
1.防抖： 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时
function debounce(fn, wait){let timer = null;return function(...args){ let context = this,// 如果此时存在定时器的话，则取消之前的定时器重新记时 if (timer) { clearTimeout(timer); timer = null; } // 设置定时器，使事件间隔指定事件后执行 timer = setTimeout(() =>{ fn.apply(context,args); }, wait); };
}2.节流 ：节流就是指连续触发事件但是在 n 秒中只执行一次函数
function throttle(fn, delay) {let lastcalltime = 0; // 使用更具描述性的变量名 return function(...args){ //使用剩余参数语法 const context = this; // 显式捕获this上下文 const now = Date.now(); //使用更具描述性的变量名 // 如果两次调用之间的时间间隔大于或等于指定的延迟 if (now - lastcallTime >= delay) { // 更新最后调用时间 lastCallTime = now; // 调用原始函数，并传入正确的上下文和参数 return fn.apply(context, args); //如果不满足条件，则不执行任何操作(即“节流”) };
}