請(qǐng)你談?wù)凜ookie的弊端

cookie雖然在持久保存客戶端數(shù)據(jù)提供了方便，分擔(dān)了服務(wù)器存儲(chǔ)的負(fù)擔(dān)，但還是有很多局限性的。
第一：每個(gè)特定的域名下最多生成20個(gè)cookie

1.IE6或更低版本最多20個(gè)cookie

2.IE7和之后的版本最后可以有50個(gè)cookie。

3.Firefox最多50個(gè)cookie

4.chrome和Safari沒有做硬性限制

IE和Opera 會(huì)清理近期最少使用的cookie，F(xiàn)irefox會(huì)隨機(jī)清理cookie。

cookie的最大大約為4096字節(jié)，為了兼容性，一般不能超過4095字節(jié)。

IE 提供了一種存儲(chǔ)可以持久化用戶數(shù)據(jù)，叫做uerData，從IE5.0就開始支持。每個(gè)數(shù)據(jù)最多128K，每個(gè)域名下最多1M。這個(gè)持久化數(shù)據(jù)放在緩存中，如果緩存沒有清理，那么會(huì)一直存在。

優(yōu)點(diǎn)：極高的擴(kuò)展性和可用性

1.通過良好的編程，控制保存在cookie中的session對(duì)象的大小。
2.通過加密和安全傳輸技術(shù)（SSL），減少cookie被破解的可能性。
3.只在cookie中存放不敏感數(shù)據(jù)，即使被盜也不會(huì)有重大損失。
4.控制cookie的生命期，使之不會(huì)永遠(yuǎn)有效。偷盜者很可能拿到一個(gè)過期的cookie。

缺點(diǎn)：
1.Cookie數(shù)量和長(zhǎng)度的限制。每個(gè)domain最多只能有20條cookie，每個(gè)cookie長(zhǎng)度不能超過4KB，否則會(huì)被截掉。

2.安全性問題。如果cookie被人攔截了，那人就可以取得所有的session信息。即使加密也與事無補(bǔ)，因?yàn)閿r截者并不需要知道cookie的意義，他只要原樣轉(zhuǎn)發(fā)cookie就可以達(dá)到目的了。

3.有些狀態(tài)不可能保存在客戶端。例如，為了防止重復(fù)提交表單，我們需要在服務(wù)器端保存一個(gè)計(jì)數(shù)器。如果我們把這個(gè)計(jì)數(shù)器保存在客戶端，那么它起不到任何作用。

簡(jiǎn)單說一下瀏覽器本地存儲(chǔ)是怎樣的

在較高版本的瀏覽器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage來取代globalStorage。

html5中的Web Storage包括了兩種存儲(chǔ)方式：sessionStorage和localStorage。

sessionStorage用于本地存儲(chǔ)一個(gè)會(huì)話（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁(yè)面才能訪問并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲(chǔ)，僅僅是會(huì)話級(jí)別的存儲(chǔ)。

而localStorage用于持久化的本地存儲(chǔ)，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過期的。

web storage和cookie的區(qū)別

Web Storage的概念和cookie相似，區(qū)別是它是為了更大容量存儲(chǔ)設(shè)計(jì)的。Cookie的大小是受限的，并且每次你請(qǐng)求一個(gè)新的頁(yè)面的時(shí)候Cookie都會(huì)被發(fā)送過去，這樣無形中浪費(fèi)了帶寬，另外cookie還需要指定作用域，不可以跨域調(diào)用。

除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發(fā)者自己封裝setCookie，getCookie。

但是Cookie也是不可以或缺的：Cookie的作用是與服務(wù)器進(jìn)行交互，作為HTTP規(guī)范的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲(chǔ)”數(shù)據(jù)而生

瀏覽器的支持除了IE７及以下不支持外，其他標(biāo)準(zhǔn)瀏覽器都完全支持(ie及FF需在web服務(wù)器里運(yùn)行)，值得一提的是IE總是辦好事，例如IE7、IE6中的UserData其實(shí)就是javascript本地存儲(chǔ)的解決方案。通過簡(jiǎn)單的代碼封裝可以統(tǒng)一到所有的瀏覽器都支持web storage。

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

display:none和visibility:hidden的區(qū)別？

display:none 隱藏對(duì)應(yīng)的元素，在文檔布局中不再給它分配空間，它各邊的元素會(huì)合攏，
就當(dāng)他從來不存在。

visibility:hidden 隱藏對(duì)應(yīng)的元素，但是在文檔布局中仍保留原來的空間。

CSS中 link 和@import 的區(qū)別是？

(1) link屬于HTML標(biāo)簽，而@import是CSS提供的;

(2) 頁(yè)面被加載的時(shí)，link會(huì)同時(shí)被加載，而@import引用的CSS會(huì)等到頁(yè)面被加載完再加載;

(3) import只在IE5以上才能識(shí)別，而link是HTML標(biāo)簽，無兼容問題;

(4) link方式的樣式的權(quán)重 高于@import的權(quán)重.

position的absolute與fixed共同點(diǎn)與不同點(diǎn)

A：共同點(diǎn)：

1.改變行內(nèi)元素的呈現(xiàn)方式，display被置為block；

2.讓元素脫離普通流，不占據(jù)空間；

3.默認(rèn)會(huì)覆蓋到非定位元素上

B不同點(diǎn)：
absolute的”根元素“是可以設(shè)置的，而fixed的”根元素“固定為瀏覽器窗口。
當(dāng)你滾動(dòng)網(wǎng)頁(yè)，fixed元素與瀏覽器窗口之間的距離是不變的。

介紹一下CSS的盒子模型？

1）盒模型： 內(nèi)容(content)、填充(padding)、邊界(margin)、 邊框(border)

2）有兩種， IE 盒子模型、標(biāo)準(zhǔn) W3C 盒子模型；IE的content部分包含了 border 和 padding;

image

CSS 選擇符有哪些？哪些屬性可以繼承？?jī)?yōu)先級(jí)算法如何計(jì)算？ CSS3新增偽類有那些？

CSS 選擇符：

1.id選擇器(# myid)

2.類選擇器(.myclassname)

3.標(biāo)簽選擇器(div, h1, p)

4.相鄰選擇器(h1 + p)

5.子選擇器(ul > li)

6.后代選擇器(li a)

7.通配符選擇器( * )

8.屬性選擇器(a[rel = "external"])

9.偽類選擇器(a: hover, li:nth-child)

可繼承的樣式：

1.font-size

2.font-family

3.color

4.text-indent

不可繼承的樣式：

1.border

2.padding

3.margin

4.width

5.height

優(yōu)先級(jí)算法：

1.優(yōu)先級(jí)就近原則，同權(quán)重情況下樣式定義最近者為準(zhǔn);

2.載入樣式以最后載入的定位為準(zhǔn);

3.!important > id > class > tag

4.important 比 內(nèi)聯(lián)優(yōu)先級(jí)高，但內(nèi)聯(lián)比 id 要高

CSS3新增偽類舉例：

• p:first-of-type 選擇屬于其父元素的首個(gè)
  元素的每個(gè)

元素。

p:last-of-type 選擇屬于其父元素的最后

元素的每個(gè)

元素。

p:only-of-type 選擇屬于其父元素唯一的

元素的每個(gè)

元素。

p:only-child 選擇屬于其父元素的唯一子元素的每個(gè)

元素。

p:nth-child(2) 選擇屬于其父元素的第二個(gè)子元素的每個(gè)

元素。

:enabled :disabled 控制表單控件的禁用狀態(tài)。

:checked 單選框或復(fù)選框被選中。

列出display的值，說明他們的作用。position的值， relative和absolute分別是相對(duì)于誰進(jìn)行定位的？

display 的值的作用

1.block 象塊類型元素一樣顯示。

2.inline 缺省值。象行內(nèi)元素類型一樣顯示。

3.inline-block 象行內(nèi)元素一樣顯示，但其內(nèi)容象塊類型元素一樣顯示。

4.list-item 象塊類型元素一樣顯示，并添加樣式列表標(biāo)記。

position 的值的定位區(qū)別：

1.absolute 生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)祖先元素進(jìn)行定位。

2.fixed 生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位（老IE不支持）。

3.relative 生成相對(duì)定位的元素，相對(duì)于其在普通流中的位置進(jìn)行定位。

4.static 默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right z-index 聲明）。

5.inherit 規(guī)定從父元素繼承 position 屬性的值。

CSS3有哪些新特性？

1. CSS3實(shí)現(xiàn)圓角（border-radius），陰影（box-shadow），

2. 對(duì)文字加特效（text-shadow、），線性漸變（gradient），旋轉(zhuǎn)（transform）

3. transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋轉(zhuǎn),縮放,定位,傾斜

4. 增加了更多的CSS選擇器 多背景 rgba

5. 在CSS3中唯一引入的偽元素是 ::selection.

6. 媒體查詢，多欄布局

7. border-image

為什么要初始化CSS樣式。

因?yàn)闉g覽器的兼容問題，不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的，如果沒對(duì)CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁(yè)面顯示差異。

當(dāng)然，初始化樣式會(huì)對(duì)SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。

*最簡(jiǎn)單的初始化方法就是（不建議）：

{padding: 0; margin: 0;}

淘寶的樣式初始化：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; } 

對(duì)BFC規(guī)范的理解？

BFC，塊級(jí)格式化上下文，一個(gè)創(chuàng)建了新的BFC的盒子是獨(dú)立布局的，盒子里面的子元素的樣式不會(huì)影響到外面的元素。在同一個(gè) BFC 中的兩個(gè)毗鄰的塊級(jí)盒在垂直方向（和布局方向有關(guān)系）的 margin 會(huì)發(fā)生折疊。

W3C CSS 2.1 規(guī)范中的一個(gè)概念，它決定了元素如何對(duì)其內(nèi)容進(jìn)行布局，以及與其他元素的關(guān)系和相互作用。

解釋下 CSS sprites，以及你要如何在頁(yè)面或網(wǎng)站中使用它。

CSS Sprites 其實(shí)就是把網(wǎng)頁(yè)中一些背景圖片整合到一張圖片文件中，再利用 CSS 的"background-image"，"background-repeat"，"background-position" 的組合進(jìn)行背景定位，background-position 可以用數(shù)字能精確的定位出背景圖片的位置。這樣可以減少很多圖片請(qǐng)求的開銷，因?yàn)檎?qǐng)求耗時(shí)比較長(zhǎng)；請(qǐng)求雖然可以并發(fā)，但是也有限制，一般瀏覽器都是6個(gè)。對(duì)于未來而言，就不需要這樣做了，因?yàn)橛辛?http2。

說說你對(duì)語義化的理解？

1. 去掉或者丟失樣式的時(shí)候能夠讓頁(yè)面呈現(xiàn)出清晰的結(jié)構(gòu)
2. 有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標(biāo)簽來確定上下文和各個(gè)關(guān)鍵字的權(quán)重；
3. 方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動(dòng)設(shè)備）以意義的方式來渲染網(wǎng)頁(yè)；
4. 便于團(tuán)隊(duì)開發(fā)和維護(hù)，語義化更具可讀性，是下一步吧網(wǎng)頁(yè)的重要?jiǎng)酉?，遵循W3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個(gè)標(biāo)準(zhǔn)，可以減少差異化。

Doctype作用? 嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義?

1. 聲明位于文檔中的最前面，處于 標(biāo)簽之前。告知瀏覽器以何種模式來渲染文檔。
2. 嚴(yán)格模式的排版和 JS 運(yùn)作模式是 以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。
3. 在混雜模式中，頁(yè)面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點(diǎn)無法工作。
4. DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以混雜模式呈現(xiàn)。

你知道多少種Doctype文檔類型？

1. 該標(biāo)簽可聲明三種 DTD 類型，分別表示嚴(yán)格版本、過渡版本以及基于框架的 HTML 文檔。
2. HTML 4.01 規(guī)定了三種文檔類型：Strict、Transitional 以及 Frameset。
3. XHTML 1.0 規(guī)定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。
4. Standards （標(biāo)準(zhǔn)）模式（也就是嚴(yán)格呈現(xiàn)模式）用于呈現(xiàn)遵循最新標(biāo)準(zhǔn)的網(wǎng)頁(yè)，而 Quirks（包容）模式（也就是松散呈現(xiàn)模式或者兼容模式）用于呈現(xiàn)為傳統(tǒng)瀏覽器而設(shè)計(jì)的網(wǎng)頁(yè)。

HTML與XHTML——二者有什么區(qū)別

1. 所有的標(biāo)記都必須要有一個(gè)相應(yīng)的結(jié)束標(biāo)記
2. 所有標(biāo)簽的元素和屬性的名字都必須使用小寫
3. 所有的 XML 標(biāo)記都必須合理嵌套
4. 所有的屬性必須用引號(hào) "" 括起來
5. 把所有 < 和 & 特殊符號(hào)用編碼表示
6. 給所有屬性賦一個(gè)值
7. 不要在注釋內(nèi)容中使用 "--"
8. 圖片必須有說明文字

html常見兼容性問題？

1. png24位的圖片在iE6瀏覽器上出現(xiàn)背景
   解決方案：做成PNG8，也可以引用一段腳本處理.

2. 瀏覽器默認(rèn)的margin和padding不同
   解決方案：加一個(gè)全局的 *{margin:0;padding:0;} 來統(tǒng)一。

3. IE6雙邊距bug：在IE6下，如果對(duì)元素設(shè)置了浮動(dòng)，同時(shí)又設(shè)置了margin-left或margin-right，margin值會(huì)加倍。

#box{ float:left; width:10px; margin:0 0 0 10px;} 

這種情況之下IE會(huì)產(chǎn)生20px的距離
解決方案：在float的標(biāo)簽樣式控制中加入 _display:inline; 將其轉(zhuǎn)化為行內(nèi)屬性。( _ 這個(gè)符號(hào)只有ie6會(huì)識(shí)別)

4. 漸進(jìn)識(shí)別的方式，從總體中逐漸排除局部。
   首先，巧妙的使用“\9”這一標(biāo)記，將IE游覽器從所有情況中分離出來。
   接著，再次使用 "+" 將IE8和IE7、IE6分離開來，這樣IE8已經(jīng)獨(dú)立識(shí)別。

.bb{
    background-color:#f1ee18; /*所有識(shí)別*/
    .background-color:#00deff\9; /*IE6、7、8識(shí)別*/
    +background-color:#a200ff; /*IE6、7識(shí)別*/
    _background-color:#1e0bd1; /*IE6識(shí)別*/ 
} 

5.IE下，可以使用獲取常規(guī)屬性的方法來獲取自定義屬性，也可以使用 getAttribute() 獲取自定義屬性；Firefox下,只能使用getAttribute()獲取自定義屬性
解決方法：統(tǒng)一通過getAttribute()獲取自定義屬性

6. IE下，event對(duì)象有 x、y 屬性，但是沒有 pageX、pageY屬性; Firefox下，event對(duì)象有 pageX、pageY 屬性，但是沒有 x、y 屬性
   解決方法：（條件注釋）缺點(diǎn)是在IE瀏覽器下可能會(huì)增加額外的HTTP請(qǐng)求數(shù)。

7. Chrome 中文界面下默認(rèn)會(huì)將小于 12px 的文本強(qiáng)制按照 12px 顯示
   解決方法：可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決

8. 超鏈接訪問過后 hover 樣式就不出現(xiàn)了，被點(diǎn)擊訪問過的超鏈接樣式不在具有 hover 和 active 了
   解決方法：改變CSS屬性的排列順序 L-V-H-A

a:link {}
a:visited {}
a:hover {}
a:active {}

9. 怪異模式問題：漏寫 DTD 聲明，F(xiàn)irefox 仍然會(huì)按照標(biāo)準(zhǔn)模式來解析網(wǎng)頁(yè)，但在 IE 中會(huì)觸發(fā)怪異模式。為避免怪異模式給我們帶來不必要的麻煩，最好養(yǎng)成書寫 DTD 聲明的好習(xí)慣。現(xiàn)在可以使用html5 推薦的寫法：

10. 上下margin重合問題：ie和ff都存在，相鄰的兩個(gè)div的margin-left和margin-right不會(huì)重合，但是margin-top和margin-bottom卻會(huì)發(fā)生重合。
    解決方法：養(yǎng)成良好的代碼編寫習(xí)慣，同時(shí)采用margin-top或者同時(shí)采用margin-bottom。

11. ie6對(duì)png圖片格式支持不好
    解決方案：引用一段腳本處理

解釋下浮動(dòng)和它的工作原理？清除浮動(dòng)的技巧

浮動(dòng)元素脫離文檔流，不占據(jù)空間。浮動(dòng)元素碰到包含它的邊框或者浮動(dòng)元素的邊框停留。

1. 使用空標(biāo)簽清除浮動(dòng)。
   這種方法是在所有浮動(dòng)標(biāo)簽后面添加一個(gè)空標(biāo)簽 定義css clear:both. 弊端就是增加了無意義標(biāo)簽。

2. 使用overflow。
   給包含浮動(dòng)元素的父標(biāo)簽添加css屬性 overflow:auto; zoom:1; zoom:1用于兼容IE6。

3. 使用after偽對(duì)象清除浮動(dòng)。
   該方法只適用于非IE瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點(diǎn)。一、該方法中必須為需要清除浮動(dòng)元素的偽對(duì)象中設(shè)置 height:0，否則該元素會(huì)比實(shí)際高出若干像素；

浮動(dòng)元素引起的問題和解決辦法？

浮動(dòng)元素引起的問題：

1. 父元素的高度無法被撐開，影響與父元素同級(jí)的元素
2. 與浮動(dòng)元素同級(jí)的非浮動(dòng)元素會(huì)跟隨其后
3. 若非第一個(gè)元素浮動(dòng)，則該元素之前的元素也需要浮動(dòng)，否則會(huì)影響頁(yè)面顯示的結(jié)構(gòu)

解決方法：
使用 CSS 中的 clear:both; 屬性來清除元素的浮動(dòng)可解決2、3問題，對(duì)于問題1，添加如下樣式，給父元素添加clearfix樣式：

.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{display: inline-block;} /* for IE/Mac */

清除浮動(dòng)的幾種方法：

1. 額外標(biāo)簽法，

（缺點(diǎn)：不過這個(gè)辦法會(huì)增加額外的標(biāo)簽使HTML結(jié)構(gòu)看起來不夠簡(jiǎn)潔。）

2. 使用after偽元素

#parent:after{
    content:".";
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
}

3. 浮動(dòng)外部元素
4. 設(shè)置 overflow 為 hidden 或者 auto

IE 8以下版本的瀏覽器中的盒模型有什么不同

IE8以下瀏覽器的盒模型中定義的元素的寬高包括內(nèi)邊距和邊框

DOM操作——怎樣添加、移除、移動(dòng)、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)。

1. 創(chuàng)建新節(jié)點(diǎn)

createDocumentFragment() // 創(chuàng)建一個(gè)DOM片段
createElement() // 創(chuàng)建一個(gè)具體的元素
createTextNode() // 創(chuàng)建一個(gè)文本節(jié)點(diǎn)

2. 添加、移除、替換、插入

appendChild()
removeChild()
replaceChild()
insertBefore() // 在已有的子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn)

3. 查找

getElementsByTagName() // 通過標(biāo)簽名稱
getElementsByName() // 通過元素的Name屬性的值(IE容錯(cuò)能力較強(qiáng)，會(huì)得到一個(gè)數(shù)組，其中包括id等于name值的)
getElementById() // 通過元素Id，唯一性

html5有哪些新特性、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5？

新特性：
HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲(chǔ)，多任務(wù)等功能的增加。

1. 拖拽釋放(Drag and drop) API
2. 語義化更好的內(nèi)容標(biāo)簽（header,nav,footer,aside,article,section）
3. 音頻、視頻API(audio,video)
4. 畫布(Canvas) API
5. 地理(Geolocation) API
6. 本地離線存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；
7. sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除
8. 表單控件，calendar、date、time、email、url、search
9. 新的技術(shù)webworker, websocket, Geolocation

移除的元素：

1. 純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u；
2. 對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes；

支持HTML5新標(biāo)簽：

1. IE8/IE7/IE6支持通過 document.createElement 方法產(chǎn)生的標(biāo)簽，可以利用這一特性讓這些瀏覽器支持 HTML5 新標(biāo)簽，瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式（當(dāng)然最好的方式是直接使用成熟的框架、使用最多的是html5shiv框架）：

如何區(qū)分：
DOCTYPE聲明新增的結(jié)構(gòu)元素、功能元素

iframe的優(yōu)缺點(diǎn)？

優(yōu)點(diǎn)：

1. 解決加載緩慢的第三方內(nèi)容如圖標(biāo)和廣告等的加載問題
2. Security sandbox
3. 并行加載腳本

缺點(diǎn)：

1. iframe會(huì)阻塞主頁(yè)面的Onload事件
2. 即時(shí)內(nèi)容為空，加載也需要時(shí)間
3. 沒有語意

如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信?

調(diào)用 localstorge、cookies 等本地存儲(chǔ)方式

webSocket 如何兼容低瀏覽器？

Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基于 multipart 編碼發(fā)送 XHR 、 基于長(zhǎng)輪詢的 XHR

線程與進(jìn)程的區(qū)別

1. 一個(gè)程序至少有一個(gè)進(jìn)程,一個(gè)進(jìn)程至少有一個(gè)線程
2. 線程的劃分尺度小于進(jìn)程，使得多線程程序的并發(fā)性高
3. 另外，進(jìn)程在執(zhí)行過程中擁有獨(dú)立的內(nèi)存單元，而多個(gè)線程共享內(nèi)存，從而極大地提高了程序的運(yùn)行效率
4. 線程在執(zhí)行過程中與進(jìn)程還是有區(qū)別的。每個(gè)獨(dú)立的線程有一個(gè)程序運(yùn)行的入口、順序執(zhí)行序列和程序的出口。但是線程不能夠獨(dú)立執(zhí)行，必須依存在應(yīng)用程序中，由應(yīng)用程序提供多個(gè)線程執(zhí)行控制
5. 從邏輯角度來看，多線程的意義在于一個(gè)應(yīng)用程序中，有多個(gè)執(zhí)行部分可以同時(shí)執(zhí)行。但操作系統(tǒng)并沒有將多個(gè)線程看做多個(gè)獨(dú)立的應(yīng)用，來實(shí)現(xiàn)進(jìn)程的調(diào)度和管理以及資源分配。這就是進(jìn)程和線程的重要區(qū)別

你如何對(duì)網(wǎng)站的文件和資源進(jìn)行優(yōu)化？

期待的解決方案包括：

1. 文件合并
2. 文件最小化/文件壓縮
3. 使用 CDN 托管
4. 緩存的使用（多個(gè)域名來提供緩存）
5. 其他

請(qǐng)說出三種減少頁(yè)面加載時(shí)間的方法

1. 優(yōu)化圖片
2. 圖像格式的選擇（GIF：提供的顏色較少，可用在一些對(duì)顏色要求不高的地方）
3. 優(yōu)化CSS（壓縮合并css，如 margin-top, margin-left...)
4. 網(wǎng)址后加斜杠（如www.campr.com/目錄，會(huì)判斷這個(gè)目錄是什么文件類型，或者是目錄。）
5. 標(biāo)明高度和寬度（如果瀏覽器沒有找到這兩個(gè)參數(shù)，它需要一邊下載圖片一邊計(jì)算大小，如果圖片很多，瀏覽器需要不斷地調(diào)整頁(yè)面。這不但影響速度，也影響瀏覽體驗(yàn)。
   當(dāng)瀏覽器知道了高度和寬度參數(shù)后，即使圖片暫時(shí)無法顯示，頁(yè)面上也會(huì)騰出圖片的空位，然后繼續(xù)加載后面的內(nèi)容。從而加載時(shí)間快了，瀏覽體驗(yàn)也更好了）
6. 減少http請(qǐng)求（合并文件，合并圖片）

你都使用哪些工具來測(cè)試代碼的性能？

1. Profiler
2. JSPerf（http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout）
3. Dromaeo

什么是 FOUC（無樣式內(nèi)容閃爍）？你如何來避免 FOUC？

FOUC - Flash Of Unstyled Content 文檔樣式閃爍

而引用CSS文件的@import就是造成這個(gè)問題的罪魁禍?zhǔn)?。IE會(huì)先加載整個(gè)HTML文檔的DOM，然后再去導(dǎo)入外部的CSS文件，因此，在頁(yè)面DOM加載完成到CSS導(dǎo)入完成中間會(huì)有一段時(shí)間頁(yè)面上的內(nèi)容是沒有樣式的，這段時(shí)間的長(zhǎng)短跟網(wǎng)速，電腦速度都有關(guān)系。
解決方法簡(jiǎn)單的出奇，只要在之間加入一個(gè)或者