1、http请求方面，减少请求数量，请求体积，对应的做法是，对项目资源进行压缩，控制项目资源的dns解析在2到4个域名，提取公告的样式，公共的组件，雪碧图，缓存资源，

2、压缩资源，提取公共资源压缩，提取css ,js公共方法

3、不要缩放图片，使用雪碧图，使用字体图表(阿里矢量图库)

5、减少重绘重排，CSS属性读写分离，最好不要用js修改样式，dom 离线更新，渲染前指定,图片的大小

6、js代码层面的优化，减少对字符串的计算,合理使用闭包，首屏的js资源加载放在最底部

v-if是 真正 的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

v-show就简单得多， 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 display 属性进行切换。

所以，v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景；v-show则适用于需要非常频繁切换条件的场景。

computed： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；

watch： 更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作

一、什么是HTTP缓存 ？

http缓存指的是: 当客户端向服务器请求资源时，会先抵达浏览器缓存，如果浏览器有“要请求资源”的副本，就可以直接从浏览器缓存中提取而不是从原始服务器中提取这个资源。

Network面板记录了网络请求的详细信息，包括请求头，响应头，表单数据，参数信息等等，只要是做爬虫的这个面板必须要了解。

红色圆圈内代表的是请求的不同类型的数据，其中XHR表示ajax请求，即异步请求，在爬虫中最重要的是分析该项。Doc表示的是html文档类型。其他几个不是很重要不详细讲解。
若要保留请求记录，勾选上preserve log选项。

1.XSS攻击：指的是跨脚本攻击，指的是攻击者在网页中嵌套，恶意脚本程序，当用户打开网页时，程序开始在浏览器上启动，盗取用户的cooks，从而盗取密码等信息，下载执行木马程序。

解决方法：XSS之所以会发生,是因为用户输入的数据变成了代码。因此,我们需要对用户输入的数据进行HTML转义处理,将其中的“尖括号”、“单引号”、“引号” 之类的特殊字符进行转义编码。

前端面试：区分XSS和CSRF

xss：跨站点攻击。xss攻击的主要目的是想办法获取目标攻击网站的cookie，因为有了cookie相当于有了session，有了这些信息就可以在任意能接进互联网的PC登陆该网站，并以其他人的身份登陆做破坏。预防措施防止下发界面显示html标签，把</>等符号转义。

csrf：跨站点伪装请求。csrf攻击的主要目的是让用户在不知情的情况下攻击自己已登录的一个系统，类似于钓鱼。如用户当前已经登陆了邮箱或bbs，同时用户又在使用另外一个，已经被你控制的网站，我们姑且叫它钓鱼网站。这个网站上面可能因为某个图片吸引你，你去点击一下，此时可能就会触发一个js的点击事件，构造一个bbs发帖的请求，去往你的bbs发帖，由于当前你的浏览器状态已经是登陆状态，所以session登陆cookie信息都会跟正常的请求一样，纯天然的利用当前的登陆状态，让用户在不知情的情况下，帮你发帖或干其他事情。预防措施，请求加入随机数，让钓鱼网站无法正常伪造请求。

new 具体干了什么事创建出来了对象

new 一个构造函数,生成一个对象–总体发生了四件事
1:在内存中生成一个空对象;
3:运行构造函数,同时通过call,apply改变构造函数内部this指向;
4:检查构造函数运行的返回值,如果返回的是对象—会把第一步生成的空对象扔掉,
如果返回的是基本数据类型,会无视掉,并把第一步生成的对象给返回;

输入完网址按下回车,到看到网页这个过程中发生了什么?

4.服务器端响应http请求,浏览器得到HTML代码

5.浏览器解析HTML代码，并请求HTML代码中的资源

6.浏览器对页面进行渲染呈现给用户

rf攻击的主要目的是让用户在不知情的情况下攻击自己已登录的一个系统，类似于钓鱼。如用户当前已经登陆了邮箱或bbs，同时用户又在使用另外一个，已经被你控制的网站，我们姑且叫它钓鱼网站。这个网站上面可能因为某个图片吸引你，你去点击一下，此时可能就会触发一个js的点击事件，构造一个bbs发帖的请求，去往你的bbs发帖，由于当前你的浏览器状态已经是登陆状态，所以session登陆cookie信息都会跟正常的请求一样，纯天然的利用当前的登陆状态，让用户在不知情的情况下，帮你发帖或干其他事情。预防措施，请求加入随机数，让钓鱼网站无法正常伪造请求。

new 具体干了什么事创建出来了对象

new 一个构造函数,生成一个对象–总体发生了四件事
1:在内存中生成一个空对象;
3:运行构造函数,同时通过call,apply改变构造函数内部this指向;
4:检查构造函数运行的返回值,如果返回的是对象—会把第一步生成的空对象扔掉,
如果返回的是基本数据类型,会无视掉,并把第一步生成的对象给返回;

输入完网址按下回车,到看到网页这个过程中发生了什么?

4.服务器端响应http请求,浏览器得到HTML代码

5.浏览器解析HTML代码，并请求HTML代码中的资源

6.浏览器对页面进行渲染呈现给用户

写项目过程中，测试delete的一个接口，有的接口能正常传参，有的接口却不行，后来看了下delete的源码 ，发现 delete 和 post 、put 的参数不一样。post、put都有三个参数，url、data和config，而delete只有两个参数，第一个是url，第二个是config，post 和 put 第二个参数是data，所以可以直接在第二个参数的位置写上数据，后台可以访问到，而delete第二个参数是 config ，所以要通过 config 里面的 data 来传参，如果不写，后台没解析的话，就接收不到。

15、如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里面试题）

65、如果今年你打算熟练掌握一项新技术，那会是什么？

66、请谈一下你对网页标准和标准制定机构重要性的理解？

(google)w3c存在的意义就是让浏览器兼容性问题尽量小，首先是他们对浏览器开发者的约束，然后是对开发者的约束。

67、什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？

需要注意的是，data-之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。

并不是所有的浏览器都支持.dataset属性，测试的浏览器中只有Chrome和Opera支持。

72、如果把 HTML5 看作做一个开放平台，那它的构建模块有哪些？

sessionStorage、localStorage、cookie都是在浏览器端存储的数据，其中sessionStorage的概念很特别，引入了一个”浏览器窗口”的概念。sessionStorage是在同源的同窗口（或tab）中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁。同时”独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的

cookies会发送到服务器端。其余两个不会。

74、描述下 “reset” CSS 文件的作用和使用它的好处。

因为浏览器的品种很多，每个浏览器的默认样式也是不同的，所以定义一个css reset可以使各浏览器的默认样式统一。

75、解释下浮动和它的工作原理？

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留

76、列举不同的清除浮动的技巧，并指出它们各自适用的使用场景？

事实是这样的：在函数内部修改了引用类型值的参数，该参数值的原始引用保持不变。（此处可以去读一读《JavaScript高级程序设计一书》）

我们可以把参数想象成局部变量，当参数被重写时，这个变量引用的就是一个局部变量，局部变量的生存期仅限于函数执行的过程中，函数执行完毕，局部变量即被销毁以释放内存。

（补充：内部环境可以通过作用域链访问所有的外部环境中的变量对象，但外部环境无法访问内部环境。每个环境都可以向上搜索作用域链，以查询变量和函数名，反之向下则不能。）

js模块化mvc（数据层、表现层、控制层）
2、请说出三种减低页面加载时间的方法

合并js、css文件，减少http请求
外部js、css文件放在最底下
减少dom操作，尽可能用变量替代不必要的dom操作
3、你所了解到的Web攻击技术

（1）XSS（Cross-Site Scripting，跨站脚本攻击）：指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者JavaScript进行的一种攻击。
（3）CSRF（Cross-Site Request Forgeries，跨站点请求伪造）：指攻击者通过设置好的陷阱，强制对已完成的认证用户进行非预期的个人信息或设定信息等某些状态更新。

4、web前端开发，如何提高页面性能优化？

2 不要在 HTML 中使用缩放图片

3 使用恰当的图片格式

5、前端开发中，如何优化图像？图像格式的区别？

1、不用图片，尽量用css3代替。 比如说要实现修饰效果，如半透明、边框、圆角、阴影、渐变等，在当前主流浏览器中都可以用CSS达成。

2、 使用矢量图SVG替代位图。对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SVG了，所以可放心使用！

3.、使用恰当的图片格式。我们常见的图片格式有JPEG、GIF、PNG。

基本上，内容图片多为照片之类的，适用于JPEG。

而修饰图片通常更适合用无损压缩的PNG。

GIF基本上除了GIF动画外不要使用。且动画的话，也更建议用video元素和视频格式，或用SVG动画取代。

4、按照HTTP协议设置合理的缓存。

7、WebP图片格式能给前端带来的优化。WebP支持无损、有损压缩，动态、静态图片，压缩比率优于GIF、JPEG、JPEG2000、PG等格式，非常适合用于网络等图片传输。

　　1、gif:是是一种无损，8位图片格式。具有支持动画，索引透明，压缩等特性。适用于做色彩简单(色调少)的图片，如logo,各种小图标icons等。

　　2、JPEG格式是一种大小与质量相平衡的压缩图片格式。适用于允许轻微失真的色彩丰富的照片，不适合做色彩简单(色调少)的图片，如logo,各种小图标icons等。

　　3、png:PNG可以细分为三种格式:PNG8，PNG24，PNG32。后面的数字代表这种PNG格式最多可以索引和存储的颜色值。

关于透明：PNG8支持索引透明和alpha透明;PNG24不支持透明;而PNG32在24位的PNG基础上增加了8位（256阶）的alpha通道透明;

　　1、能在保证最不失真的情况下尽可能压缩图像文件的大小。

　　2、对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。

6、浏览器是如何渲染页面的？

自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。

2.解析CSS。优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式；

css雪碧图(sprite)是一种网页图片应用处理方式，它允许将一个页面涉及到的所有零星图片都包含到一张大图中。使用雪碧图的处理方式可以实现两个优点：

1、减少Http请求数量（因为浏览器同一时间能够加载的资源数是一定的，IE 8是6个，Chrome是6个，Firefox是8），提高加载性能 2、有些情况下可以减少图片的大小（字节总和）

2、雪碧图不方便变化，提高了网页开发和维护成本

字体图标就是利用字体来显示网页中的的纯色图标，或者是特殊字体

计算机里面每个字符都有一个unicode编码,比如「我」的unicode是\u6211（16进制），而字体文件的作用是规定某个字符应该用什么形状来显示，利用@font-face原理载入图标字体库，然后调用图标

1、灵活性：可以任意地缩放，改变颜色，产生阴影，透明效果，可以快速转化形态（：hover）
2、轻量性：本身体积更小，但携带的信息并没有削减。一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像。可以减少HTTP请求，还可以配合HTML5离线存储做性能优化。
3、兼容性：网页字体支持所有现代浏览器，包括IE低版本。

1、图标字体只能被渲染成单色或者CSS3的渐变色，由于此限制使得它不能广泛使用。 2、制作用于生成icon font的svg比较麻烦

Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一，可用于在HTTP环境下传递较长的标识信息

1、减少了HTTP请求 2、某些文件可以避免跨域的问题 3、没有图片更新要重新上传，还要清理缓存的问题

1、用于小图，体积约为原图的4/3 2、兼容性：IE6/IE7浏览器是不支持

1、两者都不存在于HTML文档树中，伪类与伪元素都是用于向选择器加特殊效果
2、伪类与伪元素的本质区别就是是否抽象创造了新元素
3、伪类只要不是互斥可以叠加使用
4、伪元素在一个选择器中只能出现一次，并且只能出现在末尾
5、伪类与伪元素优先级分别与类、标签优先级相同
6、伪类单冒号，伪元素双冒号

1、营造层次感（立体感）
2、充当没有宽度的边框

1、Canvas是基于位图的，它不能够改变大小，只能缩放显示，放大或缩小时图形质量会有所损失
2、 依赖分辨率，逐像素进行渲染的
3、 Canvas 通过 Javaｓｃｒｉｐｔ 来绘制2D图形（动态生成）
4、 不支持事件处理器。Canvas输出的是一整幅画布，能够以 .png 或 .jpg 格式保存结果图像
5、 适合像素处理，动态渲染和大数据量绘制，最适合图像密集型的游戏（频繁重绘对象）
6、 如果图形位置发生变化，整个场景需要重新绘制，包括任何或许已被图形覆盖的对象

2、不依赖分辨率,逐元素（DOM元素）进行渲染,能够很好的处理图形大小的改变, 放大或缩小时图形质量不会有所损失
3、 基于XML，用文本格式的描述性语言来描述图像内容
4、 支持事件处理器。SVG绘制出的每个图形元素都是独立的DOM节点，能够方便的绑定事件
5、 适合静态图片展示，高保真文档查看和打印的应用场景，不适合游戏应用）
6、 如果对象属性发生变化，浏览器能自动重现图形。也就是说，SVG绘图很容易编辑，只需要增加或移除相应的元素即可

代表作品是IE，因IE捆绑在Windows中，所以占有极高的份额，又称为IE内核或MSHTML，此内核只能用于Windows平台，且不是开源的。 代表作品还有腾讯、Maxthon（遨游）、360浏览器等。但由于市场份额比较大，曾经出现脱离了W3C标准的时候，同时IE版本比较多， 存在很多的兼容性问题

代表作品是Firefox，即火狐浏览器。因火狐是最多的用户，故常被称为firefox内核它是开源的，最大优势是跨平台，在Microsoft Windows、Linux、MacOs X等主 要操作系统中使用

它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核

表作品是Opera，Presto是由Opera Software开发的浏览器排版引擎，它是世界公认最快的渲染速度的引擎。在13年之后，Opera宣布加入谷歌阵营，弃用了 Presto

由Google和Opera Software开发的浏览器排版引擎，2013年4月发布。现在Chrome内核是Blink。谷歌还开发了自己的JS引擎，V8，使JS运行速度极大地提高了

this是函数运行时自动生成的一个内部对象，只能在函数内部使用，但总指向调用它的对象。

通过以下几个例子加深对this的理解。

（2）作为对象的方法调用

（3）作为构造函数调用

作为构造函数调用和普通函数调用的区别是，构造函数使用new关键字创建一个实例，此时this指向实例对象。

首先，创建构造函数person，为函数重新定义原型，在原型上定义了两个方法init和name，其中init返回this.name。

使用apply()和call()可以改变调用函数的对象，第一个参数为改变后调用这个函数的对象，其中apply()的第二个参数为一个数组，call的第二个参数为每个参数。

　　在javascript中原型和原型链是一个很神奇的东西，对于大多数人也是最难理解的一部分，掌握原型和原型链的本质是javascript进阶的重要一环。今天我分享一下我对javascript原型和原型链的理解。

　　我们认为在javascript任何值或变量都是对象，但是我还需要将javascript中的对象分为一下几个等级。

　　首先Object是顶级公民，这个应该毋庸置疑，因为所有的对象都是间接或直接的通过它衍生的。Function是一等公民，下面会做解释。几个像String，Array，Date，Number，Boolean，Math等内建对象是二等公民。剩下的则都是低级公民。

　　首先prototype是一个属性，同时它本身也是一个对象。那么哪些是具有prototype这个属性呢？其实javascript中所有的函数都有prototype这个属性，反过来所有具有prototype的对象本身也是一个函数，没错就是一个函数。

　　第一条我不再印证，主要看看第二条。大家都知道Object，Array，Date都有prototype，他们是函数吗？是的他们也是函数的一种，为什么这么说呢？我们在定义一个对象或者数组时，是不是可以这么做var o = new Object(),a = new Array()。学过java的人都知道new是用实例化一个对象的方法，但是我们都知道javascript中不存在真正的类的概念，所以只能用函数来模拟，那么既然可以有上面的做法也就印证了Object和Array也是特殊的函数。

　　其实上面说到的几等公民基本都是函数的一种，除了Math这个工具对象外，应该没有见过这种new Math()这种写法吧！当然这种写法也是会报错的，所以在访问Math.prototype返回的也是undefined。

　　__proto__是一个指针，它指的是构造它的对象的对象的prototype，听起来有的拗口。举个例子吧！

　　可以说几乎所有的javascript对象都有__proto__这样一个指针包括Object,我们来看一看

　　其实a = 1就相当于a = new Number(1)。可以看到所有的内建对象以及Object的__proto__指向的都是一个匿名函数，也就可以认为它们其实也是function的一个实例，所以之前会说function是一等公民。

　　那么原型链到底是什么呢？我们展开a.__proto__也就是Number.prototype对象，它是没有toString()的方法的，但是对于a来说它其实是可以调用toString的方法的，这就是原型链的作用。看下面代码

　　看上面代码和结果，我们沿着a的__proto__一直访问会到达Object的prototype，也就是说a调用toString方法最终其实是访问Object.prototype的toString方法。那么a的原型链就是由Number.prototype和Object.prototype组成，当a访问一个方法或属性时，它会先在自身查找，然后再沿原型链找，找到则调用，没找到报错。为了印证这一点，我们在Number.prototype上面加一个toString的方法。

　　__proto__是实现原型链的关键，而prototype则是原型链的组成。最后附上一张稍微复杂的原型链和构造函数的关系图，有兴趣可以研究一下。

会判断这个“目录是什么文件类型， 4. 标签标明高度和宽度 （如果浏览器没有找到这两个参数， 它需要一边下载图片一边计算大小， 浏览器需要不断地调整页面。 这不但影响速度，也影响浏览体验。 当浏览器知道了高度和宽度参数后， 即使图片暂时无法显示， 页面上也会腾出图片的空位， 然后继续加载后面的内容。 （合并文件，合并图片）。

1. cookie数据存放在客户的浏览器上，
session数据放在服务器上。
别人可以分析存放在本地的COOKIE,
考虑到安全应当使用session。
3. session会在一定时间内保存在服务器上。
当访问增多，会比较占用你服务器的性能
考虑到减轻服务器性能方面，
4. 单个cookie保存的数据不能超过4K，
很多浏览器都限制一个站点最多保存20个cookie。
5. 开发建议：将登录,用户等重要信息存放为session,
其他信息如果需要保留，可以放在cookie中。
今天输入用户名密码登录了，
第二天再打开很多情况下就直接打开了
。这个时候用到的一个机制就是cookie。
session的一个场景是购物车，
添加了商品之后客户端处
可以知道添加了哪些商品，
而服务器端如何判别呢，
所以也需要存储一些信息，
Cookie是访问某些网站以后
在本地存储的一些网站相关的信息，
下次再访问的时候减少一些步骤。
另外一个更准确的说法是：
Cookies是服务器在本地机器上
存储的小段文本并随每一个请求
是一种在客户端保持状态的方案。
Cookie的主要内容包括：
名字，值，过期时间，路径和域。
一种用来存放用户数据的类
当浏览器 第一次发送请求时，
服务器自动生成了一个HashTable
并将其通过响应发送到浏览器。
当浏览器第二次发送请求，
会将前一次服务器响应中的Session ID
放在请求中一并发送到服务器上，
服务器从请求中提取出Session ID，
并和保存的所有Session ID进行对比，
找到这个用户对应的HashTable。
一般这个值会有一个时间限制，
超时后毁掉这个值，默认是20分钟。
试想一下，建立一个连接就生成一个session id，
那么打开几个页面就好几个了，
这显然不是我们想要的，
这里就用到了Cookie，
 

var ：声明全局变量;
let ：声明块级变量，即局部变量, 定义后可以修改;
const ：用于声明常量，就是定义后不能再修改值或者引用值的常量，也具有块级作用域4

箭头函数相当于匿名函数，
是匿名函数的一种简写，
匿名函数有个明显的区别：
箭头函数内部的this是词法作用域，
 

// 点击提交按钮的时候，
// 把这个提交这个处理函数给解绑掉，
// 请求完成的时候在绑定回来
 //提交成功做跳转处理
 //处理失败，重新绑定点击事件
 
 
// 可以点击后让按钮不可用,
// 如果提交失败可以再次设置为可用
// 1.让按钮不可用
 // 提交成功做跳转处理
 // 处理失败，重新绑定点击事件
 

ECMAScript提供脚本语言必须遵守的规则、
细节和准则，是脚本语言的规范。
比如：ES5，ES6就是具体的一js版本。
描述的 ECMAScript 规范，但存在少数差异。 
一种实现,除了少数例外(这是为了保持向后兼容 ),
微软公司宣称JScript完全实现了ECMA标准.
二者在语法上没有多大的区别; 
只不过一个是NetScape公司的, 一个是微软的; 
 

页面加载时，大致可以分为以下几个步骤：
5) 加载未完成的外部资源（如 图片）;
 

不会, JS中能够进行变量作用域提升, 
把所有变量、函数的声明提升到当前
作用域的最前面, 但不进行赋值操作;
所以可能造成获取的值是undefined。

先了解下什么是hash:hash即URL中"#"字符后面的部分：
a) 使用浏览器访问网页时，
如果网页URL中带有hash，
页面就会定位到id（或name）
与hash值一样的元素的位置；
b) hash还有另一个特点，
它的改变不会导致页面重新加载；
c) hash值浏览器是不会随请求发送到服务器端的；
反应到浏览器地址栏（#后面的部分会发生变化），
同时，浏览器地址栏hash值的变化也会触发
a) 当URL的片段标识符更改时，
（跟在#符号后面的URL部分，包括#符号）
事件对象会有hash改变前的URL
（newURL）两个属性。

CDN又称为内容分发网络; 本意在于
尽可能避开互联网上有可能影响数据
传输速度和稳定性的瓶颈和环节，
使内容传输的更快、更稳定。
解决因分布、带宽、服务器性能带来的访问延迟问题，
适用于站点加速、点播、直播等场景。
使用户可就近取得所需内容，
解决 Internet网络拥挤的状况，
提高用户访问网站的响应速度和成功率。
b) 目前大部分的CDN还只是对静态内容加速，
而双线对动态加速的效果跟静态是一样的。

作用域链的作用是保证执行环境里
有权访问的变量和函数是有序的，
作用域链的变量只能向上访问，
变量访问到window对象即被终止，
作用域链向下访问变量是不被允许的;
作用域就是变量与函数的可访问范围，
即作用域控制着变量与函数的可见性
 

1) 创建一个空对象， 定义this 变量引用该对象，同时还继承了该函数的原型;
2) 属性和方法被加入到 this 引用的对象中;
3) 新创建的对象由 this 所引用， 并且最后隐式的返回 this
1) 不要在同一行声明多个变量;
4) 减少使用全局函数, 全局变量;
6) if语句必须使用大括号;
应该使用var关键字明确限定作用域;
从而避免作用域全局污染。

1) 数据体积方面JSON相对于XML来讲，
数据的体积小，传递的速度更快些。
更容易解析处理，更好的数据交互。
3) 数据描述方面;JSON对数据的描述性比XML较差。
4) 传输速度方面:JSON的速度要远远快于XML。

// 方式一: 浮动和定位
 

当两个盒子在垂直方向上设置margin值时，会出现塌陷现象。
6. 给子元素的前面添加一个兄弟元素
 

BFC就是页面上的一个隔离的独立容器，
容器里面的子元素不会影响到外面的元素。
因为BFC内部的元素和外部的元素绝对不会互相影响，
因此，当BFC外部存在浮动时，
它不会影响BFC内部Box的布局，
BFC会通过变窄，而不与浮动有重叠。
同样的，当BFC内部有浮动时，
为了不影响外部元素的布局，
BFC计算高度时会包括浮动的高度。
避免margin重叠也是这样的一个道理。

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

动静分离需求，使用不同的服务器处理请求。
处理动态内容的只处理动态内容，不处理别的，
突破浏览器并发限制, 同一时间针对同一域名
下的请求有一定数量限制。超过限制数目的请
求会被阻止。不同浏览器这个限制的数目不一样。
Cookieless, 节省带宽，尤其是上行带宽一般比下
行要慢。用户的每次访问，都会带上自己的cookie
，久而久之耗费的带宽还是挺大的。
假如weibo 的图片放在主站域名下，那么用户
而图片是不需要知道用户的cookie 的，所以这部分带
避免不必要的安全问题(比如: 上传js窃取主站cookie之类的)
节约主域名的连接数，从而提高客户端网络带宽的利用率，
 

相同点：它们都能让元素不可见
display:none;会让元素完全从渲染树中消失，
渲染的时候不占据任何空间；
渲染师元素继续占据空间，只是内容不可见;
子孙节点消失由于元素从渲染树消失造成，
通过修改子孙节点属性无法显示；
子孙节点消失由于继承了hidden，
修改常规流中元素的display通常会造成文档重排。
修改visibility属性只会造成本元素的重绘。
 

px和em都是长度单位;
px的值是固定的，指定是多少就是多少，
em得值不是固定的，并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px;
所以未经调整的浏览器都符合: 1em=16px;