JS面试知识点总结(十八)
|字数总计:1.1k|阅读时长:3分钟|阅读量:|
一个列表,假设有 100000 个数据,这个该怎么办?
我们需要思考的问题:该处理是否必须同步完成?数据是否必须按顺序完成?
解决办法:
(1)将数据分页,利用分页的原理,每次服务器端只返回一定数目的数据,浏览器每次只对一部分进行加载。
(2)使用懒加载的方法,每次加载一部分数据,其余数据当需要使用时再去加载。
(3)使用数组分块技术,基本思路是为要处理的项目创建一个队列,然后设置定时器每过一段时间取出一部分数据,然后再使用定时器取出下一个要处理的项目进行处理,接着再设置另一个定时器。
|
js 中倒计时的纠偏实现?
在前端实现中我们一般通过 setTimeout 和 setInterval 方法来实现一个倒计时效果。但是使用这些方法会存在时间偏差的问题,这是由于 js 的程序执行机制造成的,setTimeout 和 setInterval 的作用是隔一段时间将回调事件加入到事件队列中,因此事件并不是立即执行的,它会等到当前执行栈为空的时候再取出事件执行,因此事件等待执行的时间就是造成误差的原因。
一般解决倒计时中的误差的有这样两种办法:
(1)第一种是通过前端定时向服务器发送请求获取最新的时间差,以此来校准倒计时时间。
(2)第二种方法是前端根据偏差时间来自动调整间隔时间的方式来实现的。这一种方式首先是以 setTimeout 递归的方式来实现倒计时,然后通过一个变量来记录已经倒计时的秒数。每一次函数调用的时候,首先将变量加一,然后根据这个变量和每次的间隔时间,我们就可以计算出此时无偏差时应该显示的时间。然后将当前的真实时间与这个时间相减,这样我们就可以得到时间的偏差大小,因此我们在设置下一个定时器的间隔大小的时候,我们就从间隔时间中减去这个偏差大小,以此来实现由于程序执行所造成的时间误差的纠正。
|
详细资料可以参考:
《JavaScript 前端倒计时纠偏实现》
- 进程间通信的方式?
- 1.管道通信
- 2.消息队列通信
- 3.信号量通信
- 4.信号通信
- 5.共享内存通信
- 6.套接字通信
详细资料可以参考:
《进程间 8 种通信方式详解》
《进程与线程的一个简单解释》
如何查找一篇英文文章中出现频率最高的单词?
function findMostWord(article) { if (!article) return;
article = article.trim().toLowerCase();
let wordList = article.match(/[a-z]+/g), visited = [], maxNum = 0, maxWord = "";
article = " " + wordList.join(" ") + " ";
wordList.forEach(function(item) { if (visited.indexOf(item) < 0) {
visited.push(item);
let word = new RegExp(" " + item + " ", "g"), num = article.match(word).length;
if (num > maxNum) { maxNum = num; maxWord = item; } } });
return maxWord + " " + maxNum; }
|
ele.getElementsByClassName和ele.querySelectorAll的区别?
element.getElementsByClassName 返回一个即时更新(动态的)HTMLCollection element.querySelectorAll 返回一个非即时更新(静态的) NodeList // 先说什么叫即时更新,(前者是动态的,改变 DOM 结构会同步,后者只会记录调用 api 时的结果,不懂可以看下面的例子) <div id="parent"> <p class="p">1</p> <p class="p">2</p> <p class="p">3</p> </div> <script> let list1 = parent.getElementsByClassName('p'); let list2 = parent.querySelectorAll('.p'); console.log(list1.length1); // 3 console.log(list2.length1); // 3 let newP = docuemnt.createElement("p") newP.classList.add('p'); parent.appendChild(newP); console.log(list1.length1); // 4 (即时更新) console.log(list2.length1); // 3(非即时更新) </script> // 在说下返回值 // HTMLCollection 和 NodeList 都是类数组形式 如下一个 div 可以看成是 HTMLDivElement 的实例,其中 Node 的集合为 NodeList;Element 的集合为 HTMLCollection EventTarget - Node - Element - HTMLElement - HTMLDivElement<br> EventTarget - Node - Element - SVGElement - SVGPathElement<br>
|
MDN 上元素 div 继承关系