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

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

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

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

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

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

以下图所示:

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. 标签标明高度和宽度
（若是浏览器没有找到这两个参数，
它须要一边下载图片一边计算大小，
若是图片不少，
浏览器须要不断地调整页面。
这不但影响速度，也影响浏览体验。
当浏览器知道了高度和宽度参数后，
即便图片暂时没法显示，
页面上也会腾出图片的空位，
而后继续加载后面的内容。
从而加载时间快了，
浏览体验也更好了。）

5.减小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;
}

复制代码