搜的面试题零散记录

一、语义化标签

1. b和strong的区别：b只是为了文本加粗显示的视觉效果，除了样式加粗没有其他意义；strong是表示文本重要而进行标记，在语义上是加重的意思，只是其展现方式也是加粗来表明。推荐使用strong。盲人在阅读时，strong是要重读的。

2.title和h1的区别：title在head中，是网页的标题，权重高于h1；h1在body中，是内容中代表标题的标签，类似文章主题。每个页面应该只有一个title和一个h1，多个h1会造成混淆，无法起到突出主题的效果。

3.i 和em的区别：i只是为了视觉效果是倾斜展示；em是为了加强语气表示突出。（strong比em语气更强烈）

 

二、事件绑定

1.addEventListener，一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡，会执行几次事件，然后会先执行冒泡还是捕获？

事件冒泡：从里向外找；事件捕获：从外向里找。

测试：一个元素绑定两个事件，点击时先冒泡，后捕获。（addEventListener，IE9以上支持。）

两个嵌套的元素，分别都绑定两个事件，点击里面的元素时，顺序是：外层的捕获——内层冒泡——内层捕获——外层冒泡。阻止冒泡：stopPropagation()

var obj = document.getElementById('aa');
obj.addEventListener('click', function () {
alert('a bubble');
}, false);
obj.addEventListener('click', function () {
alert('a catch');
}, true);
obj = document.getElementById('dd');
obj.addEventListener('click', function () {
alert('div bubble');
}, false);
obj.addEventListener('click', function () {
alert('div catch');
}, true);

 

三、web前端优化

1.减少http请求次数（浏览器对同一个host有并行下载的限制,http请求越多,总体下载速度越慢）（如：把多个css文件合并为一个）

2.css放在页头（加快页面内容显示,并且能避免页面产生白屏），JavaScript放在页尾（防止阻塞后面内容的呈现和下载），避免css表达式

3.减少重定向

4.减少页面需加载的图片数量，可以使用图片合并css sprites（几个图片合成一个，然后使用css进行截取片断显示）

5.减少iframe的使用（嵌入其他页面可能无法及时获取，影响展示）

6.不需直接展示的可进行延迟加载

7.减少DOM节点（可加快页面渲染）

8.语义化HTML（没有css时也能很好的呈现，方便其他设备解析，便于团队开发和维护）(div、span就是无意义的标签，应该少用)（header、article、footer、address、section、nav、section、）