腾讯前端面试题

回答具体细节，有逻辑，深入点，说出背后原理，不要表面化。

1.瀑布流实现过程(必须设置position:absolute，left,top值如何设置)

必须说以下几点：1.图片预加载过程；（图片必须加载完，才能获取高度）

var imgArr=["1.jpg","2.jpg"];loadImage(imgArr,callback);function loadImage(imgArr, callback) {    var imgNum=imgArr.length,count=0;    for(var i=0;i<imgNum;i++){      var img = new Image(); //创建一个Image对象，实现图片的预下载      img.src = imgArr[i];      if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数          if(count==imgNum){          callback();// 直接返回，不用再处理onload事件         }        } count++; img.onload=function () { if(count==imgNum){ callback(); } } }//for循环结束}

注意：1.不要忘记给图像赋src属性；2.判断图片是否在缓存中。

2.什么时候触发滚动事件；添加节流函数，防止频繁触发。

//创建【触发添加块框函数waterfall()】的高度：最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)    var lastPinH=aPin[aPin.length-1].offsetTop+Math.floor(aPin[aPin.length-1].offsetHeight/2);    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//滚动条滚动距离，注意解决兼容性    var documentH=document.documentElement.clientHeight;//页面高度    return (lastPinH<scrollTop+documentH)?true:false;//到达指定高度后 返回true，触发waterfall()函数

注意：1.scrolltop仅仅是滚动条滚动距离，必须加上页面高度

3.窗口自适应；添加节流函数，防止频繁触发。

 var re; window.onresize = function() {      clearTimeout(re);      re = setTimeout(waterfall('main','pin'), 200); }

4.图片加载速度必须快，所以初始设所有图片为float，然后设置position属性（关键设置top和left值），注意更新数组。

aPin[i].style.top=minH+'px';//图片数组中最小值aPin[i].style.left=aPin[minHIndex].offsetLeft+'px';//巧妙：最小高度的那张图片的offsetleft

     瀑布流是一种参差不齐的多栏页面布局，用户一眼扫过可以在短时间内获得更多的信息量,而瀑布流里懒加载模式又避免了用户鼠标点击的翻页操作，瀑布流的主要特性便是错落有致，定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式。常见网站：蘑菇街，美丽说。

     所有图片为左浮动；根据设备屏幕的宽度和加载图片的宽度来计算列数，之后又获取每一列图片的高度，保存在大小为列数的一个数组中；通过绝对定位，设置图片元素的top值和left值，将要加载的图片放在高度最小的那一列图片下面，循环更新数组不断的寻找高度最小的那一列图片，将图片放在下面，实现基本的布局效果。然后再创建一个window.onscroll即滚动条监听事件
（当最后一张图片距顶的高度<offsetTop>+它自身高度的一半<offsetHeight/2>
<屏幕的高度<document.documentElement.clientHeight>+滚动条滚动的距离<document.documentElement.scrollTop>）时，就触发我们在页面动态的添加图片的事件（用JavasSript在Html DOM创建节点，并将其添加根元素）。

下面是实现思路：

1、计算页面的宽度，计算出页面可放数据块的列数（如上图所示就有6列）。

2、将各个数据块的高度尺寸记入数组中（需要等所有图片加载完成，否则无法知道图片的高度）。

3、用绝对定位先将页面第一行填满，因为第一行的top位置都是一样的，然后用数组记录每一列的总高度。

4、继续用绝对定位将其他数据块定位在最短的一列的位置之后然后更新该列的高度。

5、当浏览器窗口大小改变时，重新执行一次上面1-4步以重新排放（列数随页面宽度而改变，因而需要重新排放）。

6、滚动条滚动到底部时加载新的数据进来后也是定位在最短的一列的位置之后然后更新该列的高度。

总结以上的整个思路，有4个地方值得一说：

1、缩放浏览器窗口时，onresize的触发很频繁，为降低性能损耗，需要待缩放结束后再执行重排，以上思路是使用setTimeout来处理。

2、页面滚动到最下面加载新数据的时候，只需对新数据排列。

3、以上思路中加载新数据要等图片都加载完成后才知道其高度，但实际项目中最好是服务器能给定高度值。

4、滚动触发加载新数据时，要避免事件多次触发，以上思路是将onscroll事件置为空，加载完成后再将事件恢复。

如果窗口变小，图片数如何调整，自适应(阿里问题)

图片是动态加载，还是提前加载好，给定一个图片数组，图片预加载过程(腾讯问题1)？必须提前加载提高性能。

什么条件下触发向下滚动事件？(腾讯问题2)

2.轮播图实现过程（当图片全部播放完，如何切换第一张）

css和js实现

只用for能实现吗，不用计时器（连计时器都忘说了）

settimeout(fun,0)能立马运行吗?原理

3.ajax怎么实现？ajax底层原理？

4.图片编码格式？（哈夫曼编码，DCT编码）

base64编码原理

base64编码格式

5.图片预加载方式

6.倒计时实现过程

能精确实现一秒计时吗？

7.js怎么实现继承？

8.深度优先和广度优先遍历DOM树代码

9.实现两个盒子宽度自适应？（说出很多种方法）

10.position有哪些属性？

11.后台的框架，加密？

线性同余，约瑟夫遍历映射，logistic映射，是对称加密吗？

12.React框架？

13.对node.js的了解

14.哪种排序算法最快？