撩课-Web大前端每天5道面试题-Day14

2018-12-24 09:09:40来源：博客园阅读 ()

1. 请写出至少5个html5新增的标签，并说明其语义和应用场景？

section：定义文档中的一个章节;

nav：定义只包含导航链接的章节;
header：定义页面或章节的头部;
它经常包含 logo、页面标题和导航性的目录。

footer：定义页面或章节的尾部;
它经常包含版权信息、法律信息链接和反馈建议用的地址。

aside：定义和页面内容关联度较低的内容，
如果被删除，剩下的内容仍然很合理。

2. get和post请求在缓存方面的区别？

get请求类似于查找的过程，用户获取数据，
可以不用每次都与数据库连接，所以可以使用缓存。

post不同，post做的一般是修改和删除的工作，
所以必须与数据库交互，所以不能使用缓存。

因此get请求适合于请求缓存。

3. 如何解决异步回调地狱?

promise、generator、async/await

4. 图片的懒加载和预加载?

预加载：提前加载图片，
当用户需要查看时可直接
从本地缓存中渲染。

懒加载：懒加载的主要目的
是作为服务器前端的优化，
减少请求数或延迟请求数。

两种技术的本质：
两者的行为是相反的，
一个是提前加载，
一个是迟缓甚至不加载。

懒加载对服务器前端有一定
的缓解压力作用，
预加载则会增加服务器前端压力。

5. bind，apply，call的区别?

通过apply和call改变函数的this指向，
这两个函数的第一个参数都是一样的，
表示要改变指向的那个对象，
第二个参数，apply是数组，
而call则是arg1,arg2...这种形式。

通过bind改变this作用域
会返回一个新的函数，
这个函数不会马上执行。

6. js怎么控制一次加载一张图片，加载完后再加载下一张？

方法一:
<script type="text/javascript">
var obj=new Image();
obj.src="http://www.itlike.com/21.jpg";
obj.onload=function(){
    document.getElementById("pic")
    .innnerHTML="<img src='"+this.src+"' />";
}
</script>
<div id="pic">加载中……</div>


方法二:
<script type="text/javascript">
var obj=new Image();
obj.src="http://www.itlike.com/21.jpg";
obj.onreadystatechange=function(){
   if(this.readyState=="complete"){
       document.getElementById("pic")
       .innnerHTML="<img src='"+this.src+"' />";
  }
} 
</script>
<div id="pic">加载中……</div>