撩课大前端-面试宝典-第十四篇-优快云博客

本文详细解析了HTML5新增的section、nav、header、footer、aside等标签的语义及应用场景，探讨了GET与POST请求的缓存区别，介绍了解决异步回调地狱的方法，对比了图片的懒加载与预加载技术，阐述了bind、apply、call的差异，最后提供了控制图片按序加载的两种JavaScript实现。

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>
复制代码