企业官网建设流程全解析

网站页面高度,面向搜索引擎网站建设,重庆网站seo公司,安徽省建设厅网站官网基础问答问题#xff1a;你在写代码的过程中#xff0c;在什么时候才会设置 setTimeout 的延时为 0#xff1f;回答#xff1a;有如下几种情况避免同步任务阻塞 UI#xff0c;即在渲染较多数据的时候#xff0c;可以通过 setTimeout 分批渲染。const data new Array(100…基础问答问题你在写代码的过程中在什么时候才会设置 setTimeout 的延时为 0回答有如下几种情况避免同步任务阻塞 UI即在渲染较多数据的时候可以通过 setTimeout 分批渲染。const data new Array(1000).fill(1).map((x, idx) idx 1);function render(list) {let index 0;for (; index list.length; index 100) {console.log(current, index);const current index;setTimeout(() {console.log(list.slice(current, current 100).join(,))}, 0);}}render(data);获取 DOM 元素的宽高本质是根据事件循环机制调整了代码的执行顺序。function App() {const dom document.querySelector(#app);console.log(dom.height);setTimeout(() dom.height, 0);}代码分片古早技术将同步代码分片执行避免阻塞渲染。扩展延伸JavaScript 单线程JavaScript 是单线程语言这个是编程语言的设计在同一时间只能执行一段代码所有的任务都需要排队而身为单线程但是好像我们访问网页的时候还是那么快这语言优势这么强这是另一个问题语言设计上是单线程只能同步的执行代码但是浏览器不是他是多线程的分出来一个 JS 主线程用于执行 JavaScript 代码还有如 UI 线程用于执行渲染等。在 JavaScript 中通过事件循环来协调任务执行实现异步编程。事件循环这个机制是 JavaScript 的一个核心机制可以利用这个机制实现高并发异步编程操作。核心是 - 调用栈、任务队列、宏任务、微任务。整个流程为 - JavaScript 代码按照代码依次执行时检测到同步任务就进入调用栈执行检测到宏任务先压入宏任务队列检测到微任务则压入微任务队列当本轮同步任务宏任务结束时检测微任务队列清空即执行所有的微任务这个检测的时机称为“微任务检查点”。yuque_diagram (1)如图伴随着每个宏任务执行都有自己对应的微任务队列直到微任务队列全部执行完成才会开启下一个宏任务。setTimeout(callback, delayTime) API在执行这个 API 时JS 引擎会将 callback 函数封装成宏任务挂载到延迟队列中等待执行。这里再次引入了一个新的概念延迟队列这个是浏览器或者引擎实现的当 JavaScript 创建定时器的时候渲染进程就会将这个定时器的任务添加到延迟队列中。执行完一个任务计算延迟队列中是否有到期的任务有就执行没有继续循环。面试追问延迟时间为 0会立即执行吗不会虽然我们设置为了 0但是 setTimeout 的回调函数会被封装成一个宏任务所以他需要等待同步任务执行结束后从宏任务队列中取出来执行。此外这个延迟时间虽然可以设置为 0但是浏览器的最小执行时间实际是不一定的Chrome 浏览器是 4ms。那延迟时间设置为 400ms会在 400ms 时执行吗不会原因同上。setTimeout 只能做到“尽快执行”而不是“立即执行”。你在使用 setTimeout 的时候有遇到过什么问题吗历史代码问题存在比较多的 setTimeout 导致代码执行的结果不好理解。this 指针问题setTimeout 回调函数中的 this 和直觉不符如果执行的回调函数是一个对象的方法那么这个对象的方法中 this 并不是指向这个对象而是全局。长任务阻塞延迟的回调函数调用如果当前任务执行的时间比较长可能会导致回调函数等待。浏览器优化问题现在浏览器为了降低对电量的消耗延长续航时间会对后台界面的 setTimeout 执行时间间隔延长一般会大于 1s但是遇到过更久的有一个多小时。那有没有可以替代的 API有和动画相关的可以使用 requestAnimationFrame API 来替代可以保持和浏览器渲染频率一致而不需要计算每帧的间隔时间来延迟执行。微任务可以使用 Promise 来创建。实现一个简单的 setTimeout。/*** 用 requestAnimationFrame 实现简易 setTimeout* param {number} delay - 延迟时间毫秒* returns {number} - RAF的ID用于取消对应clearTimeout*/​function rafSetTimeout(callback, delay) {// 1. 记录延迟结束的目标时间当前时间 延迟时间const startTime Date.now();const targetTime startTime delay;// 2. 定义递归执行的RAF回调函数function rafCallback() {// 3. 检查当前时间是否达到目标时间if (Date.now() targetTime) {// 达到目标时间执行用户回调callback();} else {// 未达到继续递归调用RAF等待下一次重绘requestAnimationFrame(rafCallback);}}// 4. 启动第一次RAF开始等待return requestAnimationFrame(rafCallback);}/*** 对应 clearTimeout取消 rafSetTimeout* param {number} rafId - rafSetTimeout 返回的RAF ID*/function rafClearTimeout(rafId) {cancelAnimationFrame(rafId);}经典题目判断运行结果这里给个简单的例子。setTimeout(() {console.log(回调1);}, 0);// 插入同步任务console.log(同步任务);setTimeout(() {console.log(回调2);}, 0);