4月1web前端面试题

4.1面试题

①
如果需要一次性渲染1000条数据，导致页面变得很卡怎么办？
答：
如果我们一次性渲染刷新几万条数据，页面会卡顿，因此只能分批渲染，既然知道原理我们就可以使用setInterval和setTimeout、requestAnimationFrame来实现定时分批渲染，实现每16 ms 刷新一次，
requestAnimationFrame跟setTimeout/setInterval差不多，通过递归调用同一方法来不断更新画面以达到动起来的效果，但它优于setTimeout/setInterval的地方在于它是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销。

function refresh(total, onceCount) {
  //total -> 渲染数据总数 onceCount -> 一次渲染条数
  let count = 0, //初始渲染次数值
    loopCount = total / onceCount //渲染次数
  function refreshAnimation() {
    /*
    * 在此处渲染数据
    */
    if (count < loopCount) {
      count++
      requestAnimationFrame(refreshAnimation)
    }
  }
  requestAnimationFrame(refreshAnimation)
}

原文链接：https://blog.csdn.net/LL18781132750/article/details/81156606

②
懒加载是什么？
懒加载也就是延迟加载。 当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片真正的路径，让图片显示出来。这就是图片懒加载。
使用懒加载原因：很多页面，内容很丰富，页面很长，图片较多。比如说各种商城页面。这些页面图片数量多，而且比较大，少说百来K，多则上兆。要是页面载入就一次性加载完毕。 影响页面打开速度，用户体验也不好。
懒加载原理：
页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。 懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位，把正真的路径存在元素的“data-url”（这个名字起个自己认识好记的就行）属性里，要用的时候就取出来，再设置为图片的真实src.
懒加载实现步骤：
首先，不要将图片地址放到src属性中，而是放到其它属性(data-original)中。
页面加载完成后，根据scrollTop判断图片是否在用户的视野内，如果在，则将data-original属性中的值取出存放到src属性中。
在滚动事件中重复判断图片是否进入视野，如果进入，则将data-original属性中的值取出存放到src属性中。
三种实现方式：
第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟.
第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载。
第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片。
可视区加载实现代码（js）：

var imgs = document.getElementsByTagName('img');
// 获取视口高度与滚动条的偏移量
function lazyload(){
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    var viewportSize = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    for(var i=0; i<imgs.length; i++) {
	var x =scrollTop+viewportSize-imgs[i].offsetTop;
	if(x>0){
	    imgs[i].src = imgs[i].getAttribute('loadpic');   
	}
    }
}
setInterval(lazyload,1000);

（jq）

/**
* 图片的src实现原理
*/
$(document).ready(function(){
    // 获取页面视口高度
    var viewportHeight = $(window).height();
    var lazyload = function() {
       // 获取窗口滚动条距离
       var scrollTop = $(window).scrollTop();
       $('img').each(function(){
           // 判断 视口高度+滚动条距离 与 图片元素距离文档原点的高度		 
           var x = scrollTop + viewportHeight - $(this).position().top;
           // 如果大于0 即该元素能被浏览者看到，则将暂存于自定义属性loadpic的值赋值给真正的src			
           if (x > 0) {
               $(this).attr('src',$(this).attr('loadpic')); 
           }
       })
    }
    // 创建定时器 “实时”计算每个元素的src是否应该被赋值
    setInterval(lazyload,100);
});

转载于:https://juejin.im/post/5b0e10896fb9a009d429baef

③
判断一段数据是不是回文：
使用split方法分割字符串成为字符数组，再用reverse方法颠倒数组顺序，再用join方法将数组元素链接为字符串，此时就可以知道数据是不是回文了。

function judge (x){
            return(x.split("").reverse().join('')===x)
		}
      console.log(judge("abcba"));
		</script>

④：http响应码以及含义

⑤
哈希表为什么叫哈希表：
hash就是散列的意思，哈希表是键值对一一对应散落在表中，所以叫哈希表。
⑥
get和post的区别：

⑦
登陆时怎么判断是否为管理员：
设置一个identity属性来标识管理员身份，管理员为1，普通用户为0。

⑧
vue双向数据绑定以及背后的原理:
vue的双向数据绑定是通过数据劫持结合发布者订阅者模式来实现的 要实现这种双向数据绑定，必要的条件有：
实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
MVVM入口函数，整合以上三者。
原文链接：https://blog.csdn.net/qq_45149256/article/details/112129230

⑨跨域问题：
一什么是跨域？
由浏览器同源策略限制的一类请求场景，当不同地址，不同端口，不同级别，不同协议就会构成跨域。
二什么是同源策略？
所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。
三如何解决跨域？ 能说1，2，7，8就行。
1、 通过jsonp跨域
2、CORS
3、 document.domain + iframe跨域
4、 location.hash + iframe
5、 window.name + iframe跨域
6、 postMessage跨域
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域
原文链接：https://blog.csdn.net/Raleway/article/details/104268283

10.Vue对浏览器兼容性问题：