2018前端必考面试题总结5

2018前端必考面试题总结5

• 写出几种IE6 BUG的解决方法

  (1)IE6双倍边距bug
  当页面上的元素使用float浮动时，不管是向左还是向右浮动，只要该元素有margin像素都会使该值乘以2，例如“margin：10px；”在IE6中，该值就会被解析为20px。想要解决这个BUG就需要在该元素中加入display：inline或display：block明确其元素类型即可解决双倍边距的BUG。
  （2）IE6中3像素问题及解决办法
  当使用float浮动容器后，在IE6下会产生3px的空隙，使用dislpay:inline -3px来解决该BUG。
  （3）IE6中图片链接的下方有间隙
  IE6中图片的下方会存在一定的间隙，尤其在图片垂直挨着图片的时候，即可看到这样的间隙。要解决此类问题，需要将img标签定义为display：block。
  （4）IE6中z-index失效
  元素的父级元素设置的z-index为1，那么其子级元素在设置z-index时会失效。其层级会继承父级元素的设置，造成某些层级调整上的BUG。可以通过给父级添加position：relative解决该BUG。

• 解释精灵图，以及如何使用？

  精灵图是放入一张单独的图片中的一系列图像，包含大量图像的网页需要长时间来下载，同时会生成多个服务器请求。使用精灵图将减少服务器请求数量并节约带宽。

div{
background:url('img_sprites.gif') no-repeat -91px 0;
}

• 如何对网站的文件和资源进行优化？期待的解决方案包括：

  (1)文件合并（目的是减少http请求）：
  web性能优化最佳实践中最重要的一条是减少HTTP请求。减少HTTP请求的方案主要有合并JavaScript和css文件、CSS sprites、图像映射（Image Map）和使用Data URI来编码图片。
  （2）文件压缩：目的是直接减少文件下载的体积。
  （3）使用CDN（内容分发网络）来托管资源：其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节。CDN系统能够实时的根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。
  （4）缓存的使用（并且多个域名来提供缓存），可使用ajax缓存，让网站内容分批加载，局部更新。
  （5）GZIP压缩JS和CSS文件。
  （6）将CSS放在页面最上面。
  （7）将JavaScript放在页面最下面。
  （8）避免在CSS中使用表达式。
  （9）将css，js都放在外部文件中。
  （10）避免重定向。
  （11）移除重复脚本。

• 如何理解HTML 语义化？

  语义化的HTML就是写出来的HTML代码，符合内容的结构化，选择合适的标签（代码语义化），能够便于开发者阅读和写出更优雅的代码的同时让浏览器更好的解析。

• 清除浮动的几种方式，各自的优缺点是？

  浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签及width，height属性。而且同样的代码，在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了。解决浮动引起的问题有多种方法，但有些方法在浏览器兼容方面还有问题。
  （1）父级div定义height
  （2）结尾处加空div标签clear：both
  （3）父级div定义伪类：after和zoom
  （4）父类div定义overflow：hidden
  （5）父级div定义overflow：auto
  （6）父级div也一起浮动
  （7）父级div定义display：table
  （8）结尾处加br标签clear：both