前端标准知识

Web标准简单来说可以分为结构、表现、行为。其中结构是由HTML各种标签组成，简单来说就是body里面写入标签是为了页面的结构。表现指的是CSS层叠样式表，通过CSS可以让我们的页面结构标签更具美感。行为指的是页面和用户具有一定的交互，这部分主要由JS组成

W3C，全称：world wide web consortium是一个制定各种标准的非盈利性组织，也叫万维网联盟，标准包括HTML、CSS、ECMAScript等等，web标准的制定有很多好处，比如说：

1：可以统一开发流程，统一使用标准化开发工具(VSCode、WebStorm、Sublime)，方便多人协作
2：学习成本降低，只需要学习标准就行，否则就要学习各个浏览器厂商标准
3：跨平台，方便迁移都不同设备
4：降低代码维护成本

(1) 浏览器的渲染机制
浏览器的渲染机制一般分为以下几个步骤:
处理 HTML 并构建 DOM 树。
处理 CSS 构建 CSSOM 树。
将 DOM 与 CSSOM 合并成一个渲染树。
根据渲染树来布局，计算每个节点的位置。
调用 GPU 绘制，合成图层，显示在屏幕上。

(2) 重绘与回流
1：重绘：
当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要UI层面的重新像素绘制，因此 损耗较少
2：回流：
当元素的尺寸、结构或触发某些属性时，浏览器会重新渲染页面，称为回流。此时，浏览器需要重新经过计算，计算后还需要重新页面布局，因此是较重的操作。会触发回流的操作:
– 页面初次渲染 – 浏览器窗口大小改变 – 元素尺寸、位置、内容发生改变 – 元素字体大小变化 – 添加或者删除可见的 dom 元素 – 激活 CSS 伪类（例如：:hover） – 查询某些属性或调用某些方法： – clientWidth、clientHeight、clientTop、clientLeft – offsetWidth、offsetHeight、offsetTop、offsetLeft – scrollWidth、scrollHeight、scrollTop、scrollLeft – getComputedStyle() – getBoundingClientRect() – scrollTo()

总结:
回流必定触发重绘，重绘不一定触发回流。重绘的开销较小，回流的代价较高。所以尽量减少触发回流的操作, 以达到更好的性能

严格模式与混杂模式——如何触发这两种模式，区分它们有何意义。
在标准模式中，浏览器根据规范呈现页面；
在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。
浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。如果XHTML文档包含形式完整的DOCTYPE，那么它一般以标准模式呈现。对于HTML 4.01文档，包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现，但是有过渡DTD而没有URI会导致页面以混杂模式呈现。DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。
声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档

1. 浏览器模式
当浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们创建了两种呈现模式：标准模式和混杂模式（quirks mode）。在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器（比如Microsoft IE 4和Netscape Navigator 4）的行为以防止老站点无法工作。

Mozilla和Safari还有第三种模式，称为”几乎标准的模式（almost standards mode）”，除了在处理表格的方式上有一些细微的差异之外，这种模式与标准模式相同。
在Firefox中，可以使用Web Developer Extension查看页面的呈现模式。如果网站以标准模式呈现，工具栏上会显示一个绿色的钩；若以混杂模式呈现，则显于红色的叉。IE 8中的开发工具也显示浏览器使用的模式。

差异：
对于这两种模式之间的差异，最显著的一个例子与Windows上IE专有的盒模型有关。在IE 6出现时，在标准模式中使用的是正确的盒模型，在混杂模式中使用的则是老式的专有盒模型。为了维持对IE 5和更低版本的向后兼容性，Opera 7和更高版本也在混杂模式中使用有缺点的IE盒模型。

呈现方面的其他差异比较小，而且是与特定浏览器相关的，包括对于十六进制颜色值不需要#号、假设CSS中没有指定单位的长度的单位是像素，以及在使用关键字时将字号增加一级。

2：如何触发这两种模式:
浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。如果XHTML文档包含形式完整的DOCTYPE，那么它一般以标准模式呈现。对于HTML 4.01文档，包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现，但是有过渡DTD而没有URI会导致页面以混杂模式呈现。DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。

根据DOCTYPE是否存在选择呈现模式，被称为DOCTYPE切换或DOCTYPE侦测。并非所有浏览器都采用这些规则，但是这些规则很好地说明了DOCTYPE切换的工作方式。要了解更全面的内容，可查阅网站http://hsivonen.iki.fi/doctype/，这里的图表说明了不同浏览器如何根据DOCTYPE声明来选择呈现方法。

DOCTYPE切换是浏览器用来区分遗留文档和符合标准的文档的手段。无论是否编写了有效的CSS，如果选择了错误的DOCTYPE，那么页面就将以混杂模式呈现，其行为就可能会有错误或不可预测。因此，一定要在站点的每个页面上包含形式完整的DOCTYPE声明，并且在使用HTML时选择严格的DTD。

Alt 当图片不显示是 用文字代表。
Title 为该属性提供信息

1、什么是HTML语义化？

<基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等>

　　根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

2、为什么要语义化？

为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
3、写HTML代码时应注意什么？

尽可能少的使用无语义的标签p和span；
在语义不明显时，既可以使用p或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
不要使用纯样式标签，如：b、font、u等，改用css设置。
需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

结构层 Html 表示层 CSS 行为层 js;

!DOCTYPE声明位于位于HTML文档中的第一行，处于html 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

100-199 用于指定客户端应相应的某些动作。
200-299 用于表示请求成功。
300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。
400-499 用于指出客户端的错误。400 1、语义有误，当前请求无法被服务器理解。401 当前请求需要用户验证 403 服务器已经理解请求，但是拒绝执行它。
500-599 用于支持服务器错误。 503 – 服务不可用

(Q1)浏览器：IE，Chrome，FireFox，Safari，Opera。
(Q2)内核：Trident，Gecko，Presto，Webkit。

优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效.

渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。

盒子模型是css技术所使用的一种思维模型。盒子模型是指将网页设计页面中的内容元素看作一个个装了东西的矩形盒子。每个矩形盒子都由内容、内边距、边框和外边距4个部分组成。除去内容部分，其余每个部分又分别包含上、下、左和右4个方向，方向既可以分别定义也可以统一定义。

我们生活中常见的手机盒子就可以看作一个盒子模型，完整的手机盒子通常包含手机、内填充物和盛装手机的外壳。如果把手机想象成HTML标记，那么手机盒子就是一个CSS盒子模型。内容就是盒子里装的手机；内边距就是怕手机损坏得填充物：边框就是盒子本身外部的壳；外边距就是多个手机盒子排放时空的缝隙。

标记

div英文全称为division，译为中文是“分割、区域”。标记简单而言就是一个块标记，可以实现网页的规划和布局。在HTML文档中，页面会被划分为很多区域，不同区域显示不同的内容，如导航栏、banner、内容区等，这些区块一般都通过标记可以在div标记中设置外边距、内边距、宽和高，同时内部可以容纳段落、标题、表图像等各种网页元素，也就是说大多数HTML标记都可以嵌套在标记中，中还可以嵌套多层。标记非常强大，通过与id、class等属性结合设置CSS样式，可以替代大多数的块级文本标记。

盒子的宽与高

网页是由多个盒子排列而成的，每个盒子都有固定的大小，在CSS中使用宽度属性widh和高度属性height控制盒子的大小。widh和height属性值可以是不同单位的数值或相对于父标记的百分比，实际工作中，最常用的属性值是像素值。

相关阅读：什么是实体化三属性？

实体化是指给标记划分区域(画盒子)，并通过宽度、高度、背景色这三种属性，让标记形态化，成为一个盒子。需要注意的是，宽度属性wdh和高度属性height仅适用于块级元素，对行内元素无效（和标记除外）。

px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em

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

模块化的概念
模块化是一种处理复杂系统分解成为更好的可管理模块的方式，它可以把系统代码划分为一系列职责单一，高度解耦且可替换的模块，系统中某一部分的变化将如何影响其它部分就会变得显而易见，系统的可维护性更加简单易得。

模块化是一种分治的思想，通过分解复杂系统为独立的模块实现细粒度的精细控制，对于复杂系统的维护和管理十分有益。模块化也是组件化的基石，是构成现在色彩斑斓的前端世界的前提条件。

为什么需要模块化
前端开发和其他开发工作的主要区别，首先是前端是基于多语言、多层次的编码和组织工作，其次前端产品的交付是基于浏览器，这些资源是通过增量加载的方式运行到浏览器端，如何在开发环境组织好这些碎片化的代码和资源，并且保证他们在浏览器端快速、优雅的加载和更新，就需要一个模块化系统。

模块化的好处
可维护性。 因为模块是独立的，一个设计良好的模块会让外面的代码对自己的依赖越少越好，这样自己就可以独立去更新和改进。

命名空间。 在 JavaScript 里面，如果一个变量在最顶级的函数之外声明，它就直接变成全局可用。因此，常常不小心出现命名冲突的情况。使用模块化开发来封装变量，可以避免污染全局环境。

重用代码。 我们有时候会喜欢从之前写过的项目中拷贝代码到新的项目，这没有问题，但是更好的方法是，通过模块引用的方式，来避免重复的代码库。我们可以在更新了模块之后，让引用了该模块的所有项目都同步更新，还能指定版本号，避免 API 变更带来的麻烦。

浏览器缓存Expires属性和Cache-Control属性都属于强缓存策略。

什么是强缓存策略？

使用强缓存策略时，如果缓存资源有效，则直接使用缓存资源，不必再向服务器发起请求。

http 头信息中的 Expires 属性

服务器通过在响应头中添加 Expires 属性，来指定资源的过期时间。在过期时间以内，该资源可以被缓存使用，不必再向服务器发送请求。这个时间是一个绝对时间，它是服务器的时间，因此可能存在这样的问题，就是客户端的时间和服务器端的时间不一致，或者用户可以对客户端时间进行修改的情况，这样就可能会影响缓存命中的结果。

http 头信息中的 Cache-Control 属性

Expires 是 http1.0 中的方式，因为它的一些缺点，在 http 1.1 中提出了一个新的头部属性就是 Cache-Control 属性，它提供了对资源的缓存的更精确的控制。它有很多不同的值，常用的比如：

通过设置 max-age 来指定资源能够被缓存的时间的大小，这是一个相对的时间，它会根据这个时间的大小和资源第一次请求时的时间来计算出资源过期的时间，因此相对于 Expires 来说，这种方式更加有效一些。

private，用来规定资源只能被客户端缓存，不能够代理服务器所缓存。

no-store ，用来指定资源不能够被缓存。

no-cache 代表该资源能够被缓存，但是立即失效，每次都需要向服务器发起请求。

一般来说只需要设置其中一种方式就可以实现强缓存策略，当两种方式一起使用时，Cache-Control 的优先级要高于 Expires 。

HTTP/2引入了“服务端推（server push）”的概念，它允许服务端在客户端需要数据之前就主动地将数据发送到客户端缓存中，从而提高性能。

HTTP/2提供更多的加密支持

HTTP/2使用多路技术，允许多个消息在一个连接上同时交差。

它增加了头压缩（header compression），因此即使非常小的请求，其请求和响应的header都只会占用很小比例的带宽

Cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性的。
第一：每个特定的域名下最多生成20个cookie
1.IE6或更低版本最多20个cookie
2.IE7和之后的版本最后可以有50个cookie。
3.Firefox最多50个cookie
4.chrome和Safari没有做硬性限制
IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie。
cookie的最大大约为4096字节，为了兼容性，一般不能超过4095字节。
IE 提供了一种存储可以持久化用户数据，叫做userdata，从IE5.0就开始支持。每个数据最多128K，每个域名下最多1M。这个持久化数据放在缓存中，如果缓存没有清理，那么会一直存在。

优点：极高的扩展性和可用性
1.通过良好的编程，控制保存在cookie中的session对象的大小。
2.通过加密和安全传输技术（SSL），减少cookie被破解的可能性。
3.只在cookie中存放不敏感数据，即使被盗也不会有重大损失。
4.控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。
缺点：
1.`Cookie`数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉.
2.安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。
3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

但是cookie也是不可以或缺的：cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生

浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)，值得一提的是IE总是办好事，例如IE7、IE6中的userData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等

1、cookie数据存放在客户的浏览器上，session数据放在服务器上。
2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗考虑到安全应当使用session。
3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能考虑到减轻服务器性能方面，应当使用COOKIE。
4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
5、所以个人建议：
将登陆信息等重要信息存放为SESSION
其他信息如果需要保留，可以放在COOKIE中

display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。
visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间

1：概念 在⻚⾯布局的过程中，我们经常会遇到⼀些奇怪的情况，⽐如元素的⾼度消失了、两栏布局⽆法⾃适应、元素间距出现异常等等。这些问题往往是由于元素之间相互影响⽽导致的。在这⾥，就涉及到了BFC（Bl o c k Fo r m a t t i n g Co n t e x t）的概念。
BFC（块级格式化上下⽂）是⻚⾯中⼀块独⽴的渲染区域，具有⼀套独⽴的渲染规则：内部的盒⼦会在垂直⽅向上⼀个接⼀个地放置。
同⼀个BFC的相邻盒⼦的m a r g in会发⽣重叠，与⽅向⽆关。
每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此。BFC的区域不会与floa t的元素区域重叠。
计算BFC的⾼度时，浮动⼦元素也参与计算。
BFC是⻚⾯上的⼀个隔离的独⽴容器，容器⾥⾯的⼦元素不会影响到外⾯的元素，反之亦然。
BFC的⽬的是形成⼀个相对于外界完全独⽴的空间，使内部的⼦元素不会影响到外部的元素

2：触发条件
触发BFC的条件包含但不限于：
根元素，即HTML元素
浮动元素：floa t值为l e ft、ri ght
ov e rflow值不为v isibl e，为auto、s c roll、hidden
displ ay的值为inline -block、inline -t abl e、t abl e - ce ll、t abl e - caption、flex、inline -
fle x、grid、inline - grid position的值为absolut e或fix ed


利⽤BFC的特性，我们可以在以下场景中应⽤BFC：


"container">
Haha



Hehe



在没有触发BFC的情况下，两个p元素之间的距离为1 0 0 p x，发⽣了m a r g i n重叠（塌陷）。通过给包含
p元素的容器触发BFC，两个p元素不再属于同⼀个BFC，从⽽避免了m a r g i n重叠。


"parent">
"child">

1，去掉或者丢失样式的时候能够让页面呈现出清晰的结构
2，有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
3，方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
4，便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理.
浏览器默认的margin和padding不同。解决方案是加一个全局的* {
margin:0;
padding:0;
}
来统一。
IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。）
#box {
float:left;
width:10px;
margin:0 0 0 100px;
}
这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入
_display:inline;
将其转化为行内属性。(_这个符号只有ie6会识别)
渐进识别的方式，从总体中逐渐排除局部。
首先，巧妙的使用“9”这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
css
.bb {
background-color:#f1ee18;
/*所有识别*/
.background-color:#00deff9;
/*IE6、7、8识别*/
+background-color:#a200ff;
/*IE6、7识别*/
_background-color:#1e0bd1;
/*IE6识别*/
}
怪异模式问题：漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发
怪异模式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。现在
可以使用[html5](http://www.w3.org/TR/html5/single-page.html)推荐的写法：``

1.异步加载的方案： 动态插入script标签

2.通过ajax去获取js代码，然后通过eval执行

3.script标签上添加defer或者async属性

4.创建并插入iframe，让它异步执行js

5.延迟加载：有些 js 代码并不是页面初始化的时候就立刻需要的，而稍后的某些情况才需要的。

构造一个 Promise，最基本的用法如下：
var promise = new Promise(function(resolve, reject) {
if (...) { // succeed
resolve(result);
} else { // fails
reject(Error(errMessage));
}
});

Promise 实例拥有 then 方法（具有 then 方法的对象，通常被称为 thenable）。它的使用方法如下：
promise.then(onFulfilled, onRejected)
接收两个函数作为参数，一个在 fulfilled 的时候被调用，一个在 rejected 的时候被调用，接收参数就是 future，onFulfilled对应 resolve, onRejected 对应 reject。

严格模式主要有以下限制：
变量必须声明后再使用
函数的参数不能有同名属性，否则报错
不能使用with语句
不能对只读属性赋值，否则报错
不能使用前缀0表示八进制数，否则报错
不能删除不可删除的属性，否则报错
不能删除变量delete prop，会报错，只能删除属性delete global[prop]
eval不会在它的外层作用域引入变量
eval和arguments不能被重新赋值
arguments不会自动反映函数参数的变化
不能使用arguments.callee
不能使用arguments.caller
禁止this指向全局对象
不能使用fn.caller和fn.arguments获取函数调用的堆栈
增加了保留字（比如protected、static和interface）

设立”严格模式”的目的，主要有以下几个：
消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
消除代码运行的一些不安全之处，保证代码运行的安全；
提高编译器效率，增加运行速度；
为未来新版本的Javascript做好铺垫。
注：经过测试IE6,7,8,9均不支持严格模式。

ICMP协议： 因特网控制报文协议。它是TCP/IP协议族的一个子协议，用于在IP主机、路由器之间传递控制消息。
TFTP协议： 是TCP/IP协议族中的一个用来在客户机与服务器之间进行简单文件传输的协议，提供不复杂、开销不大的文件传输服务。
HTTP协议： 超文本传输协议，是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用于分布式超媒体信息系统。
DHCP协议： 动态主机配置协议，是一种让系统得以连接到网络上，并获取所需要的配置参数手段。

1、缺点：
在网页中使用框架结构最大的弊病是搜索引擎的"蜘蛛"程序无法解读这种页面。当"蜘蛛"程序遇到由数个框架组成的网页时，它们只看到框架而无法找到链 接，因此它们会以为该网站是个死站点，并且很快转身离去。对一个网站来说这无异于一场灾难。如果你想销售产品，你需要客户;如想得到客户，你首先要让人们 访问你的网站，而要做到这一点，你就非求助于搜索引擎不可。你花费了大量的时间、精力和金钱开设了一家网上商店，却又故意不让搜索引擎检索你，这就好象开 家零售商店，却将窗户全部漆成黑色，而且还不挂任何招牌一样。

2、优点：
从上文中我们可以发现，使用ifame框架的弊端是无法被搜索引擎所爬行抓取。但凡事总是具有两面性。它的这个缺点也可能是他的优点。利用这一点那我 们就可以把我们站点上一些需要给我们的用户查看，但是不需要搜索引擎爬行的内容用ifame框架进行显示，这样就可以让ifram发挥真正的效果了，而且 有我们站点中的代码也可以得到很大的精简，举一个例子，就如笔者上文提到的添加微博直播信息，这些微博信息我们并不需要提供给搜索引擎，而我们需要提供的 是与访客的一个互动的体验，如下图所示，而如果我们使用ifame框架嵌入微博的信息，不仅可以简便的添加站点的微博直播平台，同时我们看到代码也十分的 精简。

iframe好在能够把原先的网页全部原封不动显示下来,但是如果用在首页,是搜索引擎最套讨厌的.那么你的网站即使做的在好,也排不到好的名次!如 果是动态网页，用include还好点！但是必须要去除他 的

共同点：都是保存在浏览器端，且同源的。
区别： 安全性、大小、有效期、作用域
1 cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
2存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
3 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
4 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

a.语法上更严格，放弃了一些语义不好的标签
b.必须要有head，body.标签必须闭合
c.一些老的浏览器并不兼容

FOUC(Flash Of Unstyled Content)--文档样式闪烁
<br />
<style type="text/css"media="all">@import"../fouc.css";</style>而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。解决方法简单的出奇，只要在<head>之间加入一个<link>或者<script>元素就可以了<br />

W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。这样浏览器渲染上就产生了Quircks mode和Standars mode，两种渲染方法共存在一个浏览器上。IE盒子模型和标准W3C盒子模型：ie的width包括：paddingorder。标准的width不包括：paddingorder

在js中如何判断当前浏览器正在以何种方式解析？
document对象有个属性compatMode,它有两个值：BackCompat对应quirks mode，CSS1Compat对应strict mode。

SVG 意为可缩放矢量图形（Scalable Vector Graphics）。

什么是SVG？

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

关于盒模型请看文章CSS之布局与定位。

请解释一下*{box-sizing:border-box;}的作用,并且说明使用它有什么好处？
说到IE的bug，在IE6以前的版本中，IE对盒模型的解析出现一些问题，跟其它浏览器不同，将border与padding都包含在width之内。而另外一些浏览器则与它相反，是不包括border和padding的。

在我们开发的过程中会发现，有时候，如果对页面中的大区域进行设置时，将border、padding计算到width和height之内，反而更灵活。但W3C的CSS2.1规范却规定了他们并不能被包含其中。考虑到这个问题，css3中引入了一个新的属性：box-sizing，它具有“content-box”和”border-box“两个值。

1 box-sizing:content-box
当我们设置box-sizing:content-box;时，浏览器对盒模型的解释遵从我们之前认识到的W3C标准，当它定义width和height时，它的宽度不包括border和padding。

1 box-sizing:border-box
当我们设置box-sizing:border-box;时，浏览器对盒模型的解释与IE6之前的版本相同，当它定义width和height时，border和padding则是被包含在宽高之内的。内容的宽和高可以通过定义的“width”和“height”减去相应方向的“padding”和“border”的宽度得到。内容的宽和高必须保证不能为负，必要时将自动增大该元素border box的尺寸以使其内容的宽或高最小为0。

同步是阻塞模式，异步是非阻塞模式。
同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；
异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率

基本流程：
a. 域名解析
b. 发起TCP的3次握手
c. 建立TCP连接后发起http请求
d. 服务器端响应http请求，浏览器得到html代码
e. 浏览器解析html代码，并请求html代码中的资源
f. 浏览器对页面进行渲染呈现给用户

CommonJS是服务器端模块的规范，Node.js采用了这个规范。CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。AMD规范则是非同步加载模块，允许指定回调函数。

AMD推荐的风格通过返回一个对象做为模块对象，CommonJS的风格通过对module.exports或exports的属性赋值来达到暴露模块对象的目的。

共同点：两者都是为了实现模块化编程而出现的，对于大型项目，参与人数多，代码逻辑复杂，是最适合使用模块化的思想来完成整个项目的。同时采用这种思想也很便于对整个项目进行管控。

区别：CommonJS是适用于服务器端的，著名的Node执行环境就是采用的CommonJS模式。它是同步加载不同模块文件。之所以采用同步，是因为模块文件都存放在服务器的各个硬盘上，实际的加载时间就是硬盘的文件读取时间。

AMD，Asynchronous Module Definition，即异步模块定义。它是适用于浏览器端的一种模块加载方式。从名字可知，AMD采用的是异步加载方式（js中最典型的异步例子就是ajax）。浏览器需要使用的js文件（第一次加载，忽略缓存）都存放在服务器端，从服务器端加载文件到浏览器是受网速等各种环境因素的影响的，如果采用同步加载方式，一旦js文件加载受阻，后续在排队等待执行的js语句将执行出错，会导致页面的‘假死’，用户无法使用一些交互。所以在浏览器端是无法使用CommonJS的模式的。目前，主要有两个Javascript库实现了AMD规范：require.js和curl.js

Javascript数据推送
Commet：基于HTTP长连接的服务器推送技术
基于WebSocket的推送方案
SSE（Server-Send Event）：服务器推送数据新方式

cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性的。
第一：每个特定的域名下最多生成20个cookie
1.IE6或更低版本最多20个cookie
2.IE7和之后的版本最后可以有50个cookie。
3.Firefox最多50个cookie
4.chrome和Safari没有做硬性限制
IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie。
cookie的最大大约为4096字节，为了兼容性，一般不能超过4095字节。
IE 提供了一种存储可以持久化用户数据，叫做userdata，从IE5.0就开始支持。每个数据最多128K，每个域名下最多1M。这个持久化数据放在缓存中，如果缓存没有清理，那么会一直存在。
优点：极高的扩展性和可用性
1.通过良好的编程，控制保存在cookie中的session对象的大小。
2.通过加密和安全传输技术（SSL），减少cookie被破解的可能性。
3.只在cookie中存放不敏感数据，即使被盗也不会有重大损失。
4.控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。
缺点：
1.`Cookie`数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉.
2.安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。
3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

静态URL
1、加载的时候不需要调用数据库，响应速度快。
2、纯静态网页是纯HTML格式的文件，因此不容易遭受黑客攻击，网站的安全性比较高。
3、网站的简洁化提高用户体验度。
伪静态URL
1、后台发布文章的时候，可以实时更新内容。
2、方便的实现对化化引擎的优化，并且比生成静态更加方便。
3、缩短了URL的长度，隐藏文件实际路径提高了安全性，易于用户记忆和输入。
4、占空间比较小。
5、URL地址以HTML为结尾的形式，具有隐藏或加密，跟纯静态的页面一样有防止黑客攻击。
网站为什么要做静态URL？
1、静态URL相对于另外两种HTML页面收录效果比较快、优化程度也比较容易。
2、静态URL比较清晰和更容易读懂，分享的时候有一条链接，动态页面显示是一串链接，并不美观。
3、国内大部分都使用百度搜索引擎，而百度搜索引擎暂时不支持js调用。

不同之处如下
（1）IE支持 currentStyle；Firefox使用 get ComputStyle。
（2）IE使用 inner Text；Firefox使用 textContent。
（3）在透明度滤镜方面，正使用 filter:alpha（ opacity=num）；Firefox使用-moz- opacity :num
（4）在事件方面，IE使用 attachEvent:Firefox使用 add Event Listener
（5）对于鼠标位置：IE使用 event. clientX；Firefox使用 event. pageX。
（6）IE使用 event. srcElement；Firefox使用 event. target
（7）要消除list的原点，IE中仅须使 margin：0即可达到最终效果；Firefox中需要设置margin：0、 padding：0和 list-style:none
（8）CSS圆角：IE7以下不支持圆角。

网站重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。也就是说是在不改变UI的情况下，对网站进行优化，
在扩展的同时保持一致的UI。
对于传统的网站来说重构通常是：

@ 表格(table)布局改为DIV+CSS
@ 使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)
@ 对于移动平台的优化
@ 针对于SEO进行优化
@ 深层次的网站重构应该考虑的方面
@ 减少代码间的耦合
@ 让代码保持弹性
@ 严格按规范编写代码
@ 设计可扩展的API
@ 代替旧有的框架、语言(如VB)
@ 增强用户体验
@ 通常来说对于速度的优化也包含在重构中
@ JS、CSS、image等前端资源(通常是由服务器来解决)
@ 程序的性能优化(如数据读写)
@ 采用CDN来加速资源加载
@ 对于JS DOM的优化
@ HTTP服务器的文件缓存

GOF提出的23种设计模式，分为三大类。
（1）创建型模式，共5种，分别是工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。
（2）结构型模式，共7种，分别是适配器模式、装饰器模式、代理模式、外观模式桥接模式、组合模式、享元模式。
（3）行为型模式，共11种，分别是策略模式、模板方法模式、观察者模式、选代子模式、責任链模式、命令模式、备忘录模弌、状态模式、访问者模式、中介者模式、解释器模式。
在前端开发中，有些特定的模式不太适用。当然，有些适用于前端的模式并未包含在这23种设计模式中，如委托模式、节流模式等

1：内存泄漏: 即为变量内容持续占用内存空间，不释放，垃圾回收机制也没有将该内存回收的情况
2：内容泄露的原因:
（1）死循环
（2）定时器没有清除
（3）绑定的事件没有解除
（4）递归调用没有结束条件

3：主要存在内存泄漏的问题点: :
（1）BOM DOM对象泄漏
（2）scipt中存在对BOM DOM对象的引用
（3）javaScript对象泄漏
（4）闭包函数导致的泄漏 主要关注的代码点
DOM中的addEventLisner 函数及派生的事件监听， 比如Jquery 中的on 函数， vue 组件实例的 $on 函数，第三方库中的初始化函数
BOM对象的事件监听，比如webSocket的监听事件避免不必要的函数引用如果是要render函数，避免在html标签中DOM BOM事件

举列：
1.文件合并（目的是减少http请求）：使用css sprites合并图片，一个网站经常使用小图标和小图片进行美化，但是很遗憾这些小图片占用了大量的HTTP请求，因此可以采用sprites的方式把所有的图片合并成一张图片 ，可以通过相关工具在线合并，也可以在ps中合并。
2.使用CDN（内容分发网络）加速，降低通信距离。
3.缓存的使用，添加Expire/Cache-Control头。
4.启用Gzip压缩文件
5.将css放在页面最上面。
6.将script放在页面最下面。
7.避免在css中使用表达式。
8.将css, js都放在外部文件中。
9.减少DNS查询。
10.文件压缩：最小化css, js，减小文件体积。
11.避免重定向。
12.移除重复脚本。
13.配置实体标签ETag。14.使用AJAX缓存，让网站内容分批加载，局部更新。

前端Web性能优化建议以下操作措施：
（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
（2）前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
（3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
（4） 当需要设置的样式很多时设置className而不是直接操作style。
（5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
（6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
（8） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示div+css布局慢。对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘IO。向前端优化指的是，在不影响功能和体验的情况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询。减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成（例如join查询），减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分，换语言是无法“优化”的。

Profiler
JSPerf
Dromaeo

（1）正确使用 display属性， display属性会影响页面的渲染，因此要注意以下几方面。
display:inline后不应该再使用 width、 height、 margin、 padding和float 。
display:inline- block后不应该再使用 float。
display:block后不应该再使用 vertical-align。
display:table-*后不应该再使用 margin或者float。
（2）不滥用 float。
（3）不声明过多的font-size。
（4）当值为0时不需要单位。
（5）标准化各种浏览器前缀，并注意以下几方面。
浏览器无前缀应放在最后。
CSS动画只用（ -webkit-无前缀）两种即可。
其他前缀包括 -webkit-、-moz-、-ms-、无前缀（ Opera浏览器改用 blink内核，所以-0-被淘汰）
（6）避免让选择符看起来像是正则表达式。高级选择器不容易读懂，执行时间也长。
（7）尽量使用id、 class选择器设置样式（避免使用 style属性设置行内样式）
（8）尽量使用CSS3动画。
（9）减少重绘和回流。

（1）对于资源加载，按需加载和异步加载
（2）首次加载的资源不超过1024KB，即越小越好。
（3）压缩HTML、CSS、 JavaScript文件。
（4）减少DOM节点。
（5）避免空src（空src在部分浏览器中会导致无效请求）。
（6）避免30*、40*、50*请求错误
（7）添加 Favicon.ico，如果没有设置图标ico，则默认的图标会导致发送一个404或者500请求。

（1）缓存DOM的选择和计算。
（2）尽量使用事件委托模式，避免批量绑定事件。
（3）使用 touchstart、 touchend代替 click。
（4）合理使用 requestAnimationFrame动画代替 setTimeOut。
（5）适当使用 canvas动画。
（6）尽量避免在高频事件（如 TouchMove、 Scroll事件）中修改视图，这会导致多次渲染。

xhtml和html的区别

一、其基础语言不同
1、XhtmL是基于可扩展标记语言（XmL）。
2、htmL是基于标准通用标记语言（sgmL）。

二、语法严格程度不同
1、XhtmL语法比较严格，存在dtd定义规则。
2、htmL语法要求比较松散，这样对网页编写者来说，比较方便。

三、可混合应用不同
1、XhtmL可以混合各种XmL应用，比如mathmL、sVg。
2、htmL不能混合其它XmL应用。

四、大小写敏感度不同
1、XhtmL对大小写敏感，标准的XhtmL标签应该使用小写。
2、htmL对大小写不敏感。

五、公布时间不同
1、XhtmL是2000年w3c公布发行的。
2、htmL4.01是1999年w3c推荐标准。

1. 强制浏览器是用Web标准解析
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br />
<html xmlns=" http://www.w3.org/1999/xhtml">

2. Set Position: relative
给元素指定Position: relative能够解决很多奇怪的问题，比如对齐和显示不正确等。对于Position的属性要小心设置，特别是设为absolute。
3. 给Float的元素加上inline属性避免双倍margin
这大概是最著名的一个bug了，IE6下对于浮动元素，会莫名其妙的双倍空白边，解决的方法也很莫名，设上display:inline属性就好了，对于float元素这个属性本身没有任何意义。
4. 给特定元素加上hasLayout属性
很多IE6（甚至是IE7）的问题可以通过设置hasLayout这个ie only的内部属性来解决，比如让a这样的行级元素变成块级元素或者让元素应用透明效果。但这个属性并不能直接设置。最简单的让元素拥有 hasLayout属性的方法是显式的为其设置高度或者宽度。有的时候，你不能显示的为其设定高度，可以使用设置高度为1%，而其父元素如果没有确定的高度时，该设置不会被应用到实际的高度上，但是hasLayout会被激活。
5. Fix字符重复bug
这是IE6上面一个非常奇怪的BUG，他的触发条件也是相当诡异，在浮动元素间如果有

这样的普通的HTML注释的话，会导致Float元素中的最后的字符会很诡异的出现在后面的clear元素中，具体的介绍大家可以看这里 positioniseverything 。
解决的方法也很奇怪
* 将所有的浮动元素设为 display:inline;
* 给最后的浮动元素设置 margin-right:-3px;
* 使用条件注释避免IE6下的问题 Put your commentary in here…
* 在最后的容器内放入一个空的div (这种添加这种无语义的workaround并不是最理想的选择)
6. 需要悬浮效果的地方，尽量使用
<a>
标签
IE6中只能对
<a>
应用css hover效果，所以尽可能使用
<a>
标签来获取最大的兼容性。
7. 使用!important或者高级选择器来兼容IE6
使用!important和高级选择器来兼容IE6，可以避免使用那些通不过校验的非常规hack，比如所谓的_width这样的东西。我们来看个简单的例子。
<br />
#element {<br />
	min-height: 20em;<br />
	height: auto !important;<br />
	/* understood by all browsers */<br />
	height: 20em;<br />
	/* IE6 incorrectly uses this value /*<br />
}<br />
IE6是不能正确解读!important这个修饰符的，所以他会错误的使用height:20em这个属性来实现最小高度。（IE6下容器会自动扩展）<br />
#element {<br />
   min-height: 20em;<br />
   height: 20em;<br />
}<br />
/* ignored by IE6 */<br />
	#element[id] {<br />
		height: auto;<br />
	}<br />
	或者使用高级选择器，同样也能实现该目的，这样代码既能保持合法性，也能很好的去兼容IE6这个诡异的产品。<br />
	针对各版本IE和FF的css hack<br />
	#element {<br />
		/*顺序是FF&IE8,IE7,IE6 不能颠倒！*/<br />
		color:red <br />
		/* 只对FF*/<br />
		color:<br />
		/*\**/<br />
		black\9 <br />
		/*只对IE8有效**/<br />
		*color:gray<br />
		/*只对IE7有效*/<br />
		_color:blue <br />
		/*只对IE6有效*/<br />
	}<br />
	8. 避免在IE6下使用百分比尺寸<br />
	body {<br />
		margin: 2% 0 !important;<br />
		margin: 20px 0;<br />
		/* IE6 only */<br />
	}<br />

IE6下是用百分比的尺寸是件非常让人头疼的事情，尽可能避免这样的使用，而是采用结合!important和精确尺寸来明确元素的大小。
9. 频繁测试，尽早测试
和其他编程一样，现在编程提倡持续测试，尽早测试，甚至可以测试驱动，在CSS开发过程中也要尽可能的频繁测试，可以参看我之前介绍的一些测试工具。
IE: IE developer toolbar, debug bar ,IETester(ie5-8)
FF: firebug
10. 重构你的代码
在任何浏览器中，需要获得鼠标hover效果，都建议尽量采用A标签，可以先将A标签强制转化为block块级元素（display:block），然后就可以为其设定宽度和高度，但是它也具有了块级元素自动换行的属性，所以麻烦的是如果要其横排还要为其指定float:left，并且在应用完成后及时的清除浮动，这样就可以得到
或者
效果，而且获得了最大兼容性。在任何浏览器中，需要获得鼠标hover效果，都建议尽量采用A标签，可以先将A标签强制转化为block块级元素（display:block），然后就可以为其设定宽度和高度，但是它也具有了块级元素自动换行的属性，所以麻烦的是如果要其横排还要为其指定float:left，并且在应用完成后及时的清除浮动，这样就可以得到
或者
效果，而且获得了最大兼容性。

实现多个标签页之间的通信，本质上都是通过中介者模式来实现的。因为标签页之间没有办法直接通信，因此我们可以找一个中介者，让标签页和中介者进行通信，然后让这个中介者来进行消息的转发。通信方法如下：

使用 websocket 协议，因为 websocket 协议可以实现服务器推送，所以服务器就可以用来当做这个中介者。标签页通过向服务器发送数据，然后由服务器向其他标签页推送转发。
使用 ShareWorker 的方式，shareWorker 会在页面存在的生命周期内创建一个唯一的线程，并且开启多个页面也只会使用同一个线程。这个时候共享线程就可以充当中介者的角色。标签页间通过共享一个线程，然后通过这个共享的线程来实现数据的交换。
使用 localStorage 的方式，我们可以在一个标签页对 localStorage 的变化事件进行监听，然后当另一个标签页修改数据的时候，我们就可以通过这个监听事件来获取到数据。这个时候 localStorage 对象就是充当的中介者的角色。
使用 postMessage 方法，如果我们能够获得对应标签页的引用，就可以使用postMessage 方法，进行通信

worker主线程:
1.通过 worker = new Worker( url ) 加载一个JS文件来创建一个worker，同时返回一个worker实例。

2.通过worker.postMessage( data ) 方法来向worker发送数据。

3.绑定worker.onmessage方法来接收worker发送过来的数据。

4.可以使用 worker.terminate() 来终止一个worker的执行。

WebSocket是Web应用程序的传输协议，它提供了双向的，按序到达的数据流。他是一个Html5协议，WebSocket的连接是持久的，他通过在客户端和服务器之间保持双工连接，服务器的更新可以被及时推送给客户端，而不需要客户端以一定时间间隔去轮询。

a.用图片代替。
b.使用一些在线字体库，例如Typekit，Google Webfonts等。
c.使用@font-face

1.CDN缓存更方便
2.突破浏览器并发限制（一般每个域名建立的链接不超过6个）
3.Cookieless，节省带宽，尤其是上行带宽一般比下行要慢
4.对于UGC的内容和主站隔离，防止不必要的安全问题(上传js窃取主站cookie之类的)。正是这个原因要求用户内容的域名必须不是自己主站的子域名，而是一个完全独立的第三方域名。
5.数据做了划分，甚至切到了不同的物理集群，通过子域名来分流比较省事。这个可能被用的不多。
PS:关于Cookie的问题，带宽是次要的，安全隔离才是主要的。关于多域名，也不是越多越好，虽然服务器端可以做泛解释，浏览器做dns解释也是耗时间的，而且太多域名，如果要走https的话，还有要多买证书和部署的问题。

下面这些问题需要考虑：

应用字符集的选择，选择UTF-8编码
语言书写习惯&导航结构
数据库驱动型网站

ETag是URL的TAG，主要是标志URL对象有没发生改变，用于客户端的缓存。服务器产生ETag，并在HTTP响应头中将其传送到客户端，服务器用它来判断页面是否被修改过，如果未修改返回304，无需传输整个对象。
HTTP协议里ETag是“被请求变量的实体值”。
站点启用ETag的好处有哪些？
1、Sitemap启用ETag后，百度就可以快速的知道Sitemap的更新，在内容没有做更改的情况下，服务器只发回304应答头，对流量的消耗极小，平均每个head在227B大小的通常下，如果24个小时每秒回应的流量消耗仅为18.7M。
2、站长平台对每个站点的Sitemap主动抓取次数是有上限的，目前并没有对所有站点开放，如果你的站点Sitemap开启了ETag，并通过了测试，就可以用较小的流量享受百度及时更新网站的Sitemap的功能，加速了百度收录网站的内容。
3、网站上的文件会出现周期性的更改，但主体的内容并没有改变，仅改变了修改的时间，站长不需要客户端认为这个文件被修改了，而重新GET。
4、网站上的某些文件修改起来会比较麻烦，比如在1秒的期间内，修改了N次，If-Modified-Since能检查到的粒度是秒级，但是这种修改是无法判断的。
正常情况下ETag会与Last-Modified一起使用，这样可利用客户端的缓存。

web-garden和 web-farm都是网络托管系统。唯一的区别是 web-garden是在单个服务器中包含许多处理器的设置，而web-farm是使用多个服务器的较大设置