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

1. 请描述下JS中事件冒泡机制?

冒泡型事件：事件按照从最特定的
事件目标到最不特定的事件目标
(document对象)的顺序触发。

捕获型事件：事件从最不精确的对
象(document 对象)开始触发，然后
到最精确。(也可以在窗口级别捕获
事件，不过必须由开发人员特别指定)。

支持W3C标准的浏览器在添加事件时
用addEventListener(event,fn,useCapture)方法，
基中第3个参数useCapture是一个Boolean值，
用来设置事件是在事件捕获时执行，
还是事件冒泡时执行。

而不兼容W3C的浏览器(IE)用attachEvent()方法，
此方法没有相关设置，
不过IE的事件模型默认是在事件冒泡时执行的，
也就是在useCapture等于false的时候执行，
所以把在处理事件时把useCapture
设置为false是比较安全，
也实现兼容浏览器的效果。

如下图所示:

image

2. 为什么利用多个域名来提供网站资源会更有效？

1.CDN缓存更方便

2.突破浏览器并发限制
（一般每个域名建立的链接不超过6个）

3.Cookieless，节省带宽，
尤其是上行带宽一般比下行要慢;

4.对于UGC的内容和主站隔离，
防止不必要的安全问题
(上传js窃取主站cookie之类的)。
正是这个原因要求用户内容的域名
必须不是自己主站的子域名，
而是一个完全独立的第三方域名。

5.数据做了划分，
甚至切到了不同的物理集群，
通过子域名来分流比较省事。

补充: 关于Cookie的问题，
带宽是次要的，安全隔离才是主要的。
关于多域名，也不是越多越好，
虽然服务器端可以做泛解释，
浏览器做dns解释也是耗时间的，
而且太多域名，如果要走https的话，
还有要多买证书和部署的问题。

3. 请说出三种减少页面加载时间的方法？

1.优化图片;
精灵图片, 字体图标
SVG, GIF, WEBP
(可用在一些对颜色要求不高的地方)

2. 优化CSS
（压缩合并css，
如margin-top,margin-left...)

3. 网址后加斜杠
（如www.itlike.com/目录，
会判断这个“目录是什么文件类型，
或者是目录。）

4. 标签标明高度和宽度
（如果浏览器没有找到这两个参数，
它需要一边下载图片一边计算大小，
如果图片很多，
浏览器需要不断地调整页面。
这不但影响速度，也影响浏览体验。
当浏览器知道了高度和宽度参数后，
即使图片暂时无法显示，
页面上也会腾出图片的空位，
然后继续加载后面的内容。
从而加载时间快了，
浏览体验也更好了。）

6.减少http请求
（合并文件，合并图片）。

4. cookie 和session 的区别?

1. cookie数据存放在客户的浏览器上，
session数据放在服务器上。

2. cookie不是很安全，
别人可以分析存放在本地的COOKIE,
并进行COOKIE欺骗,
考虑到安全应当使用session。

3. session会在一定时间内保存在服务器上。
当访问增多，会比较占用你服务器的性能
考虑到减轻服务器性能方面，
应当使用COOKIE。

4. 单个cookie保存的数据不能超过4K，
很多浏览器都限制一个站点最多保存20个cookie。

5. 开发建议：将登录,用户等重要信息存放为session,
其他信息如果需要保留，可以放在cookie中。

PS: 额外阅读

应用场景

经常登录一个网站，
今天输入用户名密码登录了，
第二天再打开很多情况下就直接打开了
。这个时候用到的一个机制就是cookie。

session的一个场景是购物车，
添加了商品之后客户端处
可以知道添加了哪些商品，
而服务器端如何判别呢，
所以也需要存储一些信息，
这里就用到了session。

Cookie
Cookie是访问某些网站以后
在本地存储的一些网站相关的信息，
下次再访问的时候减少一些步骤。

另外一个更准确的说法是：
Cookies是服务器在本地机器上
存储的小段文本并随每一个请求
发送至同一个服务器，
是一种在客户端保持状态的方案。

Cookie的主要内容包括：
名字，值，过期时间，路径和域。

Session

Session是存在服务器的
一种用来存放用户数据的类
HashTable结构。

当浏览器 第一次发送请求时，
服务器自动生成了一个HashTable
和一个Session ID用来唯一标识这个HashTable，
并将其通过响应发送到浏览器。

当浏览器第二次发送请求，
会将前一次服务器响应中的Session ID
放在请求中一并发送到服务器上，
服务器从请求中提取出Session ID，
并和保存的所有Session ID进行对比，
找到这个用户对应的HashTable。

一般这个值会有一个时间限制，
超时后毁掉这个值，默认是20分钟。

Session的实现方式和Cookie有一定关系。
试想一下，建立一个连接就生成一个session id，
那么打开几个页面就好几个了，
这显然不是我们想要的，

那么该怎么区分呢？

这里就用到了Cookie，
我们可以把session id存在Cookie中，
然后每次访问的时候将
Session id带过去就可以识别了

5. 为什么要清除浮动？举个实际场景?

父元素的高度是由子元素撑开的，
且子元素设置了浮动，
父元素没有设置浮动，
子元素脱离了标准的文档流，
那么父元素的高度会将其忽略，
如果不清除浮动，
父元素会出现高度不够，
那样如果设置border
或者background都得不到正确的解析。

方式:

.clearfix:after,.clearfix:before{
   content:"";
   display:table;
   clear:both;
}