本文内容很简单,只是对面试中遇到的一个记不清楚的问题的复习,鉴于是俺第一次在cnblog上发文,所以装了防护盾,请勿以任何方式扔板砖、菜刀之类物品….
今天去国内某知名公司面试了一把,投的职位是 前端开发,第一次去大公司面试,受到的感触当然是十分多多,感触稍后补齐,整个过程没啥有难度的技术问题,可能和该公司的产品方向有关吧(补充下,该公司主打不是做web的)。
二轮面试的时候,产品经理和我提到了他们产品中遇到的一个问题,大概意思是:他们某个功能,在页面做无限循环显示数据的时候,会造成CPU,100%。 当时产品经理也只是稍微给我演示了下,因为当时我脑子一直在想,这个问题为啥在自己以前用JS模拟多线程的时候没有出现,所以对他说的相关的信息也没注意听,界面也只是看了个大概,当时我也只提出使用 setTimeout 或 setInterval 来做的话,会避免这个问题,不过距我上次做多线程Demo的日子过的太长,有点模糊了,我也没有百分百把握,所以回家后赶紧翻出以前的代码出来整理出答案,如下:
代码简单,我也就懒得写注释了,以下是循环次数 和 设置DIV innerHTML的2个函数。
以下为引用的内容: function $(id) { return document.getElementById(id); } var setter = function() { var ele = $("containder"); return function(count) { ele.innerHTML = count; } }(); var counter = function() { var count = 0; return function() { count++; setter(count); }; } (); |
估计没人会像 测试1 这样用,浏览器直接卡死。
Test1:
以下为引用的内容: <script type="text/javascript"> (function() { while (1) { counter(); } }) (); </script> |
测试二使用 setInterval 方法,CPU使用量 和 IE所占内存都很少,一般CPU就是在0-2%之间,和while 的循环基本能达到同样的效果。至于为啥出现这样的原因,小弟不敢妄自猜测,避免误导新人。希望有了解JS引擎的出来讲解讲解…
Test2:
以下为引用的内容: <script type="text/javascript"> (function() { window.setInterval("counter();", 1); })(); </script> |
按照产品经理那样的界面去大概显示数据,大概是有接口会自动提供数据,前端调用处理字符串就好了…
Test3完整代码:
<div id="containder" style="overflow:scroll;"></div>
以下为引用的内容: <script type="text/javascript"> function $(id) { return document.getElementById(id); } var data = []; var createdata = function() { data.push(+new Date() + "|" + (+new Date())); }; var setter = function() { var ele = $("containder"); var list = []; return function(text) { if (!text) return; list.push(text); if (list.length > 10) list.shift(); ele.innerHTML = list.join("<br/>"); } } (); var counter = function() { var count = 0; return function() { count++; setter(data.shift()); }; } (); (function() { window.setInterval("createdata();", 1); window.setInterval("counter();", 1); }) (); </script> |
本文的第二个目的也是给大家提个醒,其实面试很多时候都是问些基础的操作.
第一次使这东西,感觉挺麻烦.先测试下都...
作者:低调的