【轉(zhuǎn)自CSDN】《史上最全前端開(kāi)發(fā)面試問(wèn)題及答案整理》

<article class="baidu_pl" style="box-sizing: inherit; outline: 0px; display: block; position: relative; padding-top: 16px;">

說(shuō)說(shuō)你對(duì)閉包的理解

使用閉包主要是為了設(shè)計(jì)私有的方法和變量慕购。閉包的優(yōu)點(diǎn)是可以避免全局變量的污染震桶,缺點(diǎn)是閉包會(huì)常駐內(nèi)存蜡吧,會(huì)增大內(nèi)存使用量毫蚓,使用不當(dāng)很容易造成內(nèi)存泄露。

閉包有三個(gè)特性:

1.函數(shù)嵌套函數(shù)
2.函數(shù)內(nèi)部可以引用外部的參數(shù)和變量
3.參數(shù)和變量不會(huì)被垃圾回收機(jī)制回收

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

cookie雖然在持久保存客戶(hù)端數(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沒(méi)有做硬性限制

IEOpera 會(huì)清理近期最少使用的cookie翩概,Firefox會(huì)隨機(jī)清理cookie

cookie的最大大約為4096字節(jié)返咱,為了兼容性钥庇,一般不能超過(guò)4095字節(jié)。

IE 提供了一種存儲(chǔ)可以持久化用戶(hù)數(shù)據(jù)咖摹,叫做userdata评姨,從IE5.0就開(kāi)始支持。每個(gè)數(shù)據(jù)最多128K楞艾,每個(gè)域名下最多1M参咙。這個(gè)持久化數(shù)據(jù)放在緩存中龄广,如果緩存沒(méi)有清理硫眯,那么會(huì)一直存在。

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

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

缺點(diǎn):

1.`Cookie`數(shù)量和長(zhǎng)度的限制。每個(gè)domain最多只能有20條cookie朋鞍,每個(gè)cookie長(zhǎng)度不能超過(guò)4KB已添,否則會(huì)被截掉。

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

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

瀏覽器本地存儲(chǔ)

在較高版本的瀏覽器中弦讽,js提供了sessionStorageglobalStorage污尉。在HTML5中提供了localStorage來(lái)取代globalStorage

html5中的Web Storage包括了兩種存儲(chǔ)方式:sessionStoragelocalStorage往产。

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

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

web storage和cookie的區(qū)別

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

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

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

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

localStoragesessionStorage都具有相同的操作方法,例如setItem表箭、getItemremoveItem

cookie 和session 的區(qū)別:

 1赁咙、cookie數(shù)據(jù)存放在客戶(hù)的瀏覽器上,session數(shù)據(jù)放在服務(wù)器上免钻。
 2彼水、cookie不是很安全,別人可以分析存放在本地的COOKIE并進(jìn)行COOKIE欺騙
    考慮到安全應(yīng)當(dāng)使用session极舔。
 3凤覆、session會(huì)在一定時(shí)間內(nèi)保存在服務(wù)器上。當(dāng)訪問(wèn)增多拆魏,會(huì)比較占用你服務(wù)器的性能
     考慮到減輕服務(wù)器性能方面盯桦,應(yīng)當(dāng)使用COOKIE。
 4渤刃、單個(gè)cookie保存的數(shù)據(jù)不能超過(guò)4K拥峦,很多瀏覽器都限制一個(gè)站點(diǎn)最多保存20個(gè)cookie。
 5卖子、所以個(gè)人建議:
    將登陸信息等重要信息存放為SESSION
    其他信息如果需要保留略号,可以放在COOKIE中

CSS 相關(guān)問(wèn)題

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

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

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

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)簽,無(wú)兼容問(wèn)題; 
(4) link方式的樣式的權(quán)重 高于@import的權(quán)重.

position:absolute和float屬性的異同

A:共同點(diǎn):
對(duì)內(nèi)聯(lián)元素設(shè)置`float`和`absolute`屬性泽疆,可以讓元素脫離文檔流户矢,并且可以設(shè)置其寬高。

B:不同點(diǎn):
float仍會(huì)占據(jù)位置殉疼,position會(huì)覆蓋文檔流中的其他元素梯浪。

介紹一下box-sizing屬性?

box-sizing屬性主要用來(lái)控制元素的盒模型的解析模式瓢娜。默認(rèn)值是content-box挂洛。

  • content-box:讓元素維持W3C的標(biāo)準(zhǔn)盒模型。元素的寬度/高度由border + padding + content的寬度/高度決定眠砾,設(shè)置width/height屬性指的是content部分的寬/高

  • border-box:讓元素維持IE傳統(tǒng)盒模型(IE6以下版本和IE6~7的怪異模式)。設(shè)置width/height屬性指的是border + padding + content

標(biāo)準(zhǔn)瀏覽器下,按照W3C規(guī)范對(duì)盒模型解析肘迎,一旦修改了元素的邊框或內(nèi)距颓帝,就會(huì)影響元素的盒子尺寸,就不得不重新計(jì)算元素的盒子尺寸谷丸,從而影響整個(gè)頁(yè)面的布局堡掏。

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

1.id選擇器( # myid)
2.類(lèi)選擇器(.myclassname)
3.標(biāo)簽選擇器(div, h1, p)
4.相鄰選擇器(h1 + p)
5.子選擇器(ul > li)
6.后代選擇器(li a)
7.通配符選擇器( * )
8.屬性選擇器(a[rel = "external"])
9.偽類(lèi)選擇器(a: hover, li:nth-child)

  • 可繼承的樣式: font-size font-family color, text-indent;

  • 不可繼承的樣式:border padding margin width height ;

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

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

優(yōu)先級(jí)為:

!important >  id > class > tag  

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

CSS3新增偽類(lèi)舉例:

p:first-of-type 選擇屬于其父元素的首個(gè) <p> 元素的每個(gè) <p> 元素游两。
p:last-of-type  選擇屬于其父元素的最后 <p> 元素的每個(gè) <p> 元素。
p:only-of-type  選擇屬于其父元素唯一的 <p> 元素的每個(gè) <p> 元素漩绵。
p:only-child    選擇屬于其父元素的唯一子元素的每個(gè) <p> 元素贱案。
p:nth-child(2)  選擇屬于其父元素的第二個(gè)子元素的每個(gè) <p> 元素。
:enabled  :disabled 控制表單控件的禁用狀態(tài)止吐。
:checked        單選框或復(fù)選框被選中宝踪。

position的值, relative和absolute分別是相對(duì)于誰(shuí)進(jìn)行定位的碍扔?

absolute 
        生成絕對(duì)定位的元素瘩燥, 相對(duì)于最近一級(jí)的 定位不是 static 的父元素來(lái)進(jìn)行定位。

fixed (老IE不支持)
    生成絕對(duì)定位的元素不同,相對(duì)于瀏覽器窗口進(jìn)行定位厉膀。 

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

static  默認(rèn)值服鹅。沒(méi)有定位凳兵,元素出現(xiàn)在正常的流中

CSS3有哪些新特性?

CSS3實(shí)現(xiàn)圓角(border-radius)企软,陰影(box-shadow)庐扫,
對(duì)文字加特效(text-shadow、)仗哨,線(xiàn)性漸變(gradient)形庭,旋轉(zhuǎn)(transform)
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉(zhuǎn),縮放,定位,傾斜
增加了更多的CSS選擇器  多背景 rgba 
在CSS3中唯一引入的偽元素是::selection.
媒體查詢(xún),多欄布局
border-image

XML和JSON的區(qū)別厌漂?

(1).數(shù)據(jù)體積方面萨醒。
JSON相對(duì)于XML來(lái)講,數(shù)據(jù)的體積小苇倡,傳遞的速度更快些验靡。
(2).數(shù)據(jù)交互方面。
JSON與JavaScript的交互更加方便雏节,更容易解析處理胜嗓,更好的數(shù)據(jù)交互。
(3).數(shù)據(jù)描述方面钩乍。
JSON對(duì)數(shù)據(jù)的描述性比XML較差辞州。
(4).傳輸速度方面。
JSON的速度要遠(yuǎn)遠(yuǎn)快于XML寥粹。

對(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)求的開(kāi)銷(xiāo)笔咽,因?yàn)檎?qǐng)求耗時(shí)比較長(zhǎng);請(qǐng)求雖然可以并發(fā)霹期,但是也有限制叶组,一般瀏覽器都是6個(gè)。對(duì)于未來(lái)而言经伙,就不需要這樣做了,因?yàn)橛辛薫http2`勿锅。

html部分

說(shuō)說(shuō)你對(duì)語(yǔ)義化的理解帕膜?

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

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

(1)、<!DOCTYPE> 聲明位于文檔中的最前面漓藕,處于 <html> 標(biāo)簽之前陶珠。告知瀏覽器以何種模式來(lái)渲染文檔。 

(2)享钞、嚴(yán)格模式的排版和 JS 運(yùn)作模式是  以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行揍诽。

(3)、在混雜模式中栗竖,頁(yè)面以寬松的向后兼容的方式顯示寝姿。模擬老式瀏覽器的行為以防止站點(diǎn)無(wú)法工作。

(4)划滋、DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以混雜模式呈現(xiàn)饵筑。   

你知道多少種Doctype文檔類(lèi)型?

 該標(biāo)簽可聲明三種 DTD 類(lèi)型处坪,分別表示嚴(yán)格版本根资、過(guò)渡版本以及基于框架的 HTML 文檔架专。
 HTML 4.01 規(guī)定了三種文檔類(lèi)型:Strict、Transitional 以及 Frameset玄帕。
 XHTML 1.0 規(guī)定了三種 XML 文檔類(lèi)型:Strict部脚、Transitional 以及 Frameset。
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ū)別

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

常見(jiàn)兼容性問(wèn)題?

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

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

* IE6雙邊距bug:塊屬性標(biāo)簽float后漆际,又有橫行的margin情況下淆珊,在ie6顯示margin比設(shè)置的大。 

* 浮動(dòng)ie產(chǎn)生的雙倍距離(IE6雙邊距問(wèn)題:在IE6下奸汇,如果對(duì)元素設(shè)置了浮動(dòng)施符,同時(shí)又設(shè)置了margin-left或margin-right,margin值會(huì)加倍擂找。)
  #box{ float:left; width:10px; margin:0 0 0 100px;} 

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

*  漸進(jìn)識(shí)別的方式贯涎,從總體中逐漸排除局部骨坑。 

  首先,巧妙的使用“\9”這一標(biāo)記柬采,將IE游覽器從所有情況中分離出來(lái)欢唾。 
  接著,再次使用“+”將IE8和IE7粉捻、IE6分離開(kāi)來(lái)礁遣,這樣IE8已經(jīng)獨(dú)立識(shí)別。

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

*  IE下,可以使用獲取常規(guī)屬性的方法來(lái)獲取自定義屬性,
   也可以使用getAttribute()獲取自定義屬性;
   Firefox下,只能使用getAttribute()獲取自定義屬性. 
   解決方法:統(tǒng)一通過(guò)getAttribute()獲取自定義屬性.

* IE下,event對(duì)象有x,y屬性,但是沒(méi)有pageX,pageY屬性; 
  Firefox下,event對(duì)象有pageX,pageY屬性,但是沒(méi)有x,y屬性.

* 解決方法:(條件注釋?zhuān)┤秉c(diǎn)是在IE瀏覽器下可能會(huì)增加額外的HTTP請(qǐng)求數(shù)盈包。

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

* 超鏈接訪問(wèn)過(guò)后hover樣式就不出現(xiàn)了 被點(diǎn)擊訪問(wèn)過(guò)的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:
L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

* 怪異模式問(wèn)題:漏寫(xiě)DTD聲明沸呐,F(xiàn)irefox仍然會(huì)按照標(biāo)準(zhǔn)模式來(lái)解析網(wǎng)頁(yè),但在IE中會(huì)觸發(fā)怪異模式呢燥。為避免怪異模式給我們帶來(lái)不必要的麻煩崭添,最好養(yǎng)成書(shū)寫(xiě)DTD聲明的好習(xí)慣。現(xiàn)在可以使用[html5](http://www.w3.org/TR/html5/single-page.html)推薦的寫(xiě)法:`<doctype html>`

* 上下margin重合問(wèn)題
ie和ff都存在叛氨,相鄰的兩個(gè)div的margin-left和margin-right不會(huì)重合呼渣,但是margin-top和margin-bottom卻會(huì)發(fā)生重合棘伴。
解決方法,養(yǎng)成良好的代碼編寫(xiě)習(xí)慣屁置,同時(shí)采用margin-top或者同時(shí)采用margin-bottom焊夸。
* 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. 弊端就是增加了無(wú)意義標(biāo)簽揪阶。
2.使用overflow。
   給包含浮動(dòng)元素的父標(biāo)簽添加css屬性 overflow:auto; zoom:1; zoom:1用于兼容IE6并徘。
3.使用after偽對(duì)象清除浮動(dòng)遣钳。
   該方法只適用于非IE瀏覽器扰魂。具體寫(xiě)法可參照以下示例麦乞。使用中需注意以下幾點(diǎn)。一劝评、該方法中必須為需要清除浮動(dòng)元素的偽對(duì)象中設(shè)置 height:0姐直,否則該元素會(huì)比實(shí)際高出若干像素;

浮動(dòng)元素引起的問(wèn)題和解決辦法蒋畜?

浮動(dòng)元素引起的問(wèn)題:

(1)父元素的高度無(wú)法被撐開(kāi)声畏,影響與父元素同級(jí)的元素
(2)與浮動(dòng)元素同級(jí)的非浮動(dòng)元素(內(nèi)聯(lián)元素)會(huì)跟隨其后
(3)若非第一個(gè)元素浮動(dòng),則該元素之前的元素也需要浮動(dòng)姻成,否則會(huì)影響頁(yè)面顯示的結(jié)構(gòu)

解決方法:
使用CSS中的clear:both;屬性來(lái)清除元素的浮動(dòng)可解決2插龄、3問(wèn)題,對(duì)于問(wèn)題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)簽法才睹,<div style="clear:both;"></div>(缺點(diǎn):不過(guò)這個(gè)辦法會(huì)增加額外的標(biāo)簽使HTML結(jié)構(gòu)看起來(lái)不夠簡(jiǎn)潔徘跪。)
2,使用after偽類(lèi)

#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()    //通過(guò)標(biāo)簽名稱(chēng)

      getElementsByName()    //通過(guò)元素的Name屬性的值(IE容錯(cuò)能力較強(qiáng)锋八,會(huì)得到一個(gè)數(shù)組,其中包括id等于name值的)

      getElementById()    //通過(guò)元素Id护盈,唯一性

html5有哪些新特性挟纱、移除了那些元素?如何處理HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題腐宋?如何區(qū)分 HTML 和 HTML5紊服?

* HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集,主要是關(guān)于圖像胸竞,位置欺嗤,存儲(chǔ),多任務(wù)等功能的增加卫枝。

* 拖拽釋放(Drag and drop) API 
  語(yǔ)義化更好的內(nèi)容標(biāo)簽(header,nav,footer,aside,article,section)
  音頻煎饼、視頻API(audio,video)
  畫(huà)布(Canvas) API
  地理(Geolocation) API
  本地離線(xiàn)存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù),瀏覽器關(guān)閉后數(shù)據(jù)不丟失校赤;
  sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除

  表單控件吆玖,calendar、date马篮、time沾乘、email、url浑测、search  
  新的技術(shù)webworker, websocket, Geolocation

* 移除的元素

純表現(xiàn)的元素:basefont翅阵,big,center迁央,font, s掷匠,strike,tt岖圈,u讹语;

對(duì)可用性產(chǎn)生負(fù)面影響的元素:frame,frameset幅狮,noframes募强;

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

* IE8/IE7/IE6支持通過(guò)document.createElement方法產(chǎn)生的標(biāo)簽,
  可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽崇摄,

  瀏覽器支持新標(biāo)簽后擎值,還需要添加標(biāo)簽?zāi)J(rèn)的樣式:

* 當(dāng)然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
   <!--[if lt IE 9]> 
   <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> 
   <![endif]--> 
如何區(qū)分: DOCTYPE聲明\新增的結(jié)構(gòu)元素\功能元素

iframe的優(yōu)缺點(diǎn)逐抑?

1.`<iframe>`優(yōu)點(diǎn):

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

2.`<iframe>`的缺點(diǎn):

    *iframe會(huì)阻塞主頁(yè)面的Onload事件鸠儿;

    *即時(shí)內(nèi)容為空,加載也需要時(shí)間
    *沒(méi)有語(yǔ)意 

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

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

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

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

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

期待的解決方案包括:
 文件合并
 文件最小化/文件壓縮
 使用 CDN 托管
 緩存的使用(多個(gè)域名來(lái)提供緩存)
 其他

請(qǐng)說(shuō)出三種減少頁(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è)“目錄是什么文件類(lèi)型固阁,或者是目錄壤躲。) 
 5.標(biāo)明高度和寬度(如果瀏覽器沒(méi)有找到這兩個(gè)參數(shù),它需要一邊下載圖片一邊計(jì)算大小备燃,如果圖片很多碉克,瀏覽器需要不斷地調(diào)整頁(yè)面。這不但影響速度并齐,也影響瀏覽體驗(yàn)漏麦。 
當(dāng)瀏覽器知道了高度和寬度參數(shù)后,即使圖片暫時(shí)無(wú)法顯示况褪,頁(yè)面上也會(huì)騰出圖片的空位撕贞,然后繼續(xù)加載后面的內(nèi)容。從而加載時(shí)間快了测垛,瀏覽體驗(yàn)也更好了捏膨。) 

6.減少http請(qǐng)求(合并文件,合并圖片)。

你都使用哪些工具來(lái)測(cè)試代碼的性能号涯?

Profiler, JSPerf(http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout), Dromaeo

什么是 FOUC(無(wú)樣式內(nèi)容閃爍)目胡?你如何來(lái)避免 FOUC?

 FOUC - Flash Of Unstyled Content 文檔樣式閃爍
 <style type="text/css" media="all">@import "../fouc.css";</style> 
而引用CSS文件的@import就是造成這個(gè)問(wèn)題的罪魁禍?zhǔn)琢纯臁E會(huì)先加載整個(gè)HTML文檔的DOM誉己,然后再去導(dǎo)入外部的CSS文件,因此域蜗,在頁(yè)面DOM加載完成到CSS導(dǎo)入完成中間會(huì)有一段時(shí)間頁(yè)面上的內(nèi)容是沒(méi)有樣式的巫延,這段時(shí)間的長(zhǎng)短跟網(wǎng)速,電腦速度都有關(guān)系地消。
 解決方法簡(jiǎn)單的出奇炉峰,只要在<head>之間加入一個(gè)<link>或者<script>元素就可以了。

null和undefined的區(qū)別脉执?

null是一個(gè)表示”無(wú)”的對(duì)象疼阔,轉(zhuǎn)為數(shù)值時(shí)為0;undefined是一個(gè)表示”無(wú)”的原始值半夷,轉(zhuǎn)為數(shù)值時(shí)為NaN婆廊。

當(dāng)聲明的變量還未被初始化時(shí),變量的默認(rèn)值為undefined巫橄。
null用來(lái)表示尚未存在的對(duì)象淘邻,常用來(lái)表示函數(shù)企圖返回一個(gè)不存在的對(duì)象。

undefined表示”缺少值”湘换,就是此處應(yīng)該有一個(gè)值宾舅,但是還沒(méi)有定義。典型用法是:

(1)變量被聲明了彩倚,但沒(méi)有賦值時(shí)筹我,就等于undefined。

(2) 調(diào)用函數(shù)時(shí)帆离,應(yīng)該提供的參數(shù)沒(méi)有提供蔬蕊,該參數(shù)等于undefined。

(3)對(duì)象沒(méi)有賦值的屬性哥谷,該屬性的值為undefined岸夯。

(4)函數(shù)沒(méi)有返回值時(shí),默認(rèn)返回undefined们妥。

null表示”沒(méi)有對(duì)象”猜扮,即該處不應(yīng)該有值。典型用法是:

(1) 作為函數(shù)的參數(shù)王悍,表示該函數(shù)的參數(shù)不是對(duì)象破镰。

(2) 作為對(duì)象原型鏈的終點(diǎn)。

new操作符具體干了什么呢?

   1、創(chuàng)建一個(gè)空對(duì)象鲜漩,并且 this 變量引用該對(duì)象源譬,同時(shí)還繼承了該函數(shù)的原型。
   2孕似、屬性和方法被加入到 this 引用的對(duì)象中踩娘。
   3、新創(chuàng)建的對(duì)象由 this 所引用喉祭,并且最后隱式的返回 this 养渴。

var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj); 

js延遲加載的方式有哪些?

defer和async泛烙、動(dòng)態(tài)創(chuàng)建DOM方式(創(chuàng)建script理卑,插入到DOM中,加載完畢后callBack)蔽氨、按需異步載入js

如何解決跨域問(wèn)題?

    jsonp藐唠、 document.domain+iframe、window.name鹉究、window.postMessage宇立、服務(wù)器上設(shè)置代理頁(yè)面

jsonp的原理是動(dòng)態(tài)插入script標(biāo)簽

具體參見(jiàn):詳解js跨域問(wèn)題

documen.write和 innerHTML的區(qū)別

document.write只能重繪整個(gè)頁(yè)面

innerHTML可以重繪頁(yè)面的一部分

.call() 和 .apply() 的區(qū)別和作用?

作用:動(dòng)態(tài)改變某個(gè)類(lèi)的某個(gè)方法的運(yùn)行環(huán)境自赔。
區(qū)別參見(jiàn):JavaScript學(xué)習(xí)總結(jié)(四)function函數(shù)部分

哪些操作會(huì)造成內(nèi)存泄漏妈嘹?

內(nèi)存泄漏指任何對(duì)象在您不再擁有或需要它之后仍然存在。
垃圾回收器定期掃描對(duì)象绍妨,并計(jì)算引用了每個(gè)對(duì)象的其他對(duì)象的數(shù)量润脸。如果一個(gè)對(duì)象的引用數(shù)量為 0(沒(méi)有其他對(duì)象引用過(guò)該對(duì)象),或?qū)υ搶?duì)象的惟一引用是循環(huán)的痘绎,那么該對(duì)象的內(nèi)存即可回收津函。

setTimeout 的第一個(gè)參數(shù)使用字符串而非函數(shù)的話(huà)肖粮,會(huì)引發(fā)內(nèi)存泄漏孤页。
閉包、控制臺(tái)日志涩馆、循環(huán)(在兩個(gè)對(duì)象彼此引用且彼此保留時(shí)行施,就會(huì)產(chǎn)生一個(gè)循環(huán))

詳見(jiàn):詳解js變量、作用域及內(nèi)存

JavaScript中的作用域與變量聲明提升魂那?

詳見(jiàn):詳解JavaScript函數(shù)模式

如何判斷當(dāng)前腳本運(yùn)行在瀏覽器還是node環(huán)境中蛾号?

通過(guò)判斷Global對(duì)象是否為window,如果不為window涯雅,當(dāng)前腳本沒(méi)有運(yùn)行在瀏覽器中

其他問(wèn)題鲜结?

你遇到過(guò)比較難的技術(shù)問(wèn)題是?你是如何解決的?

列舉IE 與其他瀏覽器不一樣的特性精刷?

什么叫優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)拗胜?

優(yōu)雅降級(jí):Web站點(diǎn)在所有新式瀏覽器中都能正常工作,如果用戶(hù)使用的是老式瀏覽器怒允,則代碼會(huì)檢查以確認(rèn)它們是否能正常工作埂软。由于IE獨(dú)特的盒模型布局問(wèn)題,針對(duì)不同版本的IE的hack實(shí)踐過(guò)優(yōu)雅降級(jí)了,為那些無(wú)法支持功能的瀏覽器增加候選方案纫事,使之在舊式瀏覽器上以某種形式降級(jí)體驗(yàn)卻不至于完全失效.

漸進(jìn)增強(qiáng):從被所有瀏覽器支持的基本功能開(kāi)始勘畔,逐步地添加那些只有新式瀏覽器才支持的功能,向頁(yè)面增加無(wú)害于基礎(chǔ)瀏覽器的額外樣式和功能的。當(dāng)瀏覽器支持時(shí)丽惶,它們會(huì)自動(dòng)地呈現(xiàn)出來(lái)并發(fā)揮作用炫七。

詳見(jiàn):css學(xué)習(xí)歸納總結(jié)(一)

WEB應(yīng)用從服務(wù)器主動(dòng)推送Data到客戶(hù)端有那些方式?

Javascript數(shù)據(jù)推送

Commet:基于HTTP長(zhǎng)連接的服務(wù)器推送技術(shù)

基于WebSocket的推送方案

SSE(Server-Send Event):服務(wù)器推送數(shù)據(jù)新方式

對(duì)前端界面工程師這個(gè)職位是怎么樣理解的钾唬?它的前景會(huì)怎么樣诉字?

前端是最貼近用戶(hù)的程序員,比后端知纷、數(shù)據(jù)庫(kù)壤圃、產(chǎn)品經(jīng)理、運(yùn)營(yíng)琅轧、安全都近伍绳。
    1、實(shí)現(xiàn)界面交互
    2乍桂、提升用戶(hù)體驗(yàn)
    3冲杀、有了Node.js,前端可以實(shí)現(xiàn)服務(wù)端的一些事情

前端是最貼近用戶(hù)的程序員睹酌,前端的能力就是能讓產(chǎn)品從 90分進(jìn)化到 100 分权谁,甚至更好,

 參與項(xiàng)目憋沿,快速高質(zhì)量完成實(shí)現(xiàn)效果圖旺芽,精確到1px;

 與團(tuán)隊(duì)成員辐啄,UI設(shè)計(jì)采章,產(chǎn)品經(jīng)理的溝通;

 做好的頁(yè)面結(jié)構(gòu)壶辜,頁(yè)面重構(gòu)和用戶(hù)體驗(yàn)悯舟;

 處理hack,兼容砸民、寫(xiě)出優(yōu)美的代碼格式抵怎;

 針對(duì)服務(wù)器的優(yōu)化奋救、擁抱最新前端技術(shù)。

你有哪些性能優(yōu)化的方法反惕?

詳情請(qǐng)看雅虎14條性能優(yōu)化原則)菠镇。

  (1) 減少http請(qǐng)求次數(shù):CSS Sprites, JS、CSS源碼壓縮承璃、圖片大小控制合適利耍;網(wǎng)頁(yè)Gzip拷获,CDN托管溪窒,data緩存 ,圖片服務(wù)器嘴瓤。

  (2) 前端模板 JS+數(shù)據(jù)舷嗡,減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費(fèi)轴猎,前端用變量保存AJAX請(qǐng)求結(jié)果,每次操作本地變量进萄,不用請(qǐng)求捻脖,減少請(qǐng)求次數(shù)

  (3) 用innerHTML代替DOM操作,減少DOM操作次數(shù)中鼠,優(yōu)化javascript性能可婶。

  (4) 當(dāng)需要設(shè)置的樣式很多時(shí)設(shè)置className而不是直接操作style。

  (5) 少用全局變量援雇、緩存DOM節(jié)點(diǎn)查找的結(jié)果矛渴。減少I(mǎi)O讀取操作。

  (6) 避免使用CSS Expression(css表達(dá)式)又稱(chēng)Dynamic properties(動(dòng)態(tài)屬性)惫搏。

  (7) 圖片預(yù)加載具温,將樣式表放在頂部,將腳本放在底部  加上時(shí)間戳筐赔。

詳情:http://segmentfault.com/blog/trigkit4/1190000000691919

一個(gè)頁(yè)面從輸入 URL 到頁(yè)面加載顯示完成铣猩,這個(gè)過(guò)程中都發(fā)生了什么?

    分為4個(gè)步驟:
    (1)茴丰,當(dāng)發(fā)送一個(gè)URL請(qǐng)求時(shí)达皿,不管這個(gè)URL是Web頁(yè)面的URL還是Web頁(yè)面上每個(gè)資源的URL,瀏覽器都會(huì)開(kāi)啟一個(gè)線(xiàn)程來(lái)處理這個(gè)請(qǐng)求较沪,同時(shí)在遠(yuǎn)程DNS服務(wù)器上啟動(dòng)一個(gè)DNS查詢(xún)鳞绕。這能使瀏覽器獲得請(qǐng)求對(duì)應(yīng)的IP地址。
    (2)尸曼, 瀏覽器與遠(yuǎn)程Web服務(wù)器通過(guò)TCP三次握手協(xié)商來(lái)建立一個(gè)TCP/IP連接。該握手包括一個(gè)同步報(bào)文萄焦,一個(gè)同步-應(yīng)答報(bào)文和一個(gè)應(yīng)答報(bào)文控轿,這三個(gè)報(bào)文在 瀏覽器和服務(wù)器之間傳遞冤竹。該握手首先由客戶(hù)端嘗試建立起通信,而后服務(wù)器應(yīng)答并接受客戶(hù)端的請(qǐng)求茬射,最后由客戶(hù)端發(fā)出該請(qǐng)求已經(jīng)被接受的報(bào)文鹦蠕。
    (3),一旦TCP/IP連接建立在抛,瀏覽器會(huì)通過(guò)該連接向遠(yuǎn)程服務(wù)器發(fā)送HTTP的GET請(qǐng)求钟病。遠(yuǎn)程服務(wù)器找到資源并使用HTTP響應(yīng)返回該資源,值為200的HTTP響應(yīng)狀態(tài)表示一個(gè)正確的響應(yīng)刚梭。
    (4)肠阱,此時(shí),Web服務(wù)器提供資源服務(wù)朴读,客戶(hù)端開(kāi)始下載資源屹徘。

請(qǐng)求返回后,便進(jìn)入了我們關(guān)注的前端模塊
簡(jiǎn)單來(lái)說(shuō)衅金,瀏覽器會(huì)解析HTML生成DOM Tree噪伊,其次會(huì)根據(jù)CSS生成CSS Rule Tree,而javascript又可以根據(jù)DOM API操作DOM

詳情:從輸入 URL 到瀏覽器接收的過(guò)程中發(fā)生了什么事情氮唯?

平時(shí)如何管理你的項(xiàng)目鉴吹?

先期團(tuán)隊(duì)必須確定好全局樣式(globe.css),編碼模式(utf-8) 等惩琉;

        編寫(xiě)習(xí)慣必須一致(例如都是采用繼承式的寫(xiě)法拙寡,單樣式都寫(xiě)成一行);

        標(biāo)注樣式編寫(xiě)人琳水,各模塊都及時(shí)標(biāo)注(標(biāo)注關(guān)鍵樣式調(diào)用的地方)肆糕;

        頁(yè)面進(jìn)行標(biāo)注(例如 頁(yè)面 模塊 開(kāi)始和結(jié)束);

        CSS跟HTML 分文件夾并行存放在孝,命名都得統(tǒng)一(例如style.css)诚啃;

        JS 分文件夾存放 命名以該JS功能為準(zhǔn)的英文翻譯。

        圖片采用整合的 images.png png8 格式文件使用 盡量整合在一起使用方便將來(lái)的管理 

說(shuō)說(shuō)最近最流行的一些東西吧私沮?常去哪些網(wǎng)站始赎?

Node.js、Mongodb仔燕、npm造垛、MVVM、MEAN晰搀、three.js,React 五辽。
網(wǎng)站:w3cfuns,sf,hacknews,CSDN,慕課,博客園外恕,InfoQ,w3cplus等

javascript對(duì)象的幾種創(chuàng)建方式

1杆逗,工廠模式
2乡翅,構(gòu)造函數(shù)模式
3,原型模式
4罪郊,混合構(gòu)造函數(shù)和原型模式
5蠕蚜,動(dòng)態(tài)原型模式
6,寄生構(gòu)造函數(shù)模式
7悔橄,穩(wěn)妥構(gòu)造函數(shù)模式

javascript繼承的6種方法

1靶累,原型鏈繼承
2,借用構(gòu)造函數(shù)繼承
3癣疟,組合繼承(原型+借用構(gòu)造)
4挣柬,原型式繼承
5,寄生式繼承
6争舞,寄生組合式繼承

詳情:JavaScript繼承方式詳解

ajax過(guò)程

(1)創(chuàng)建XMLHttpRequest對(duì)象,也就是創(chuàng)建一個(gè)異步調(diào)用對(duì)象.

(2)創(chuàng)建一個(gè)新的HTTP請(qǐng)求,并指定該HTTP請(qǐng)求的方法凛忿、URL及驗(yàn)證信息.

(3)設(shè)置響應(yīng)HTTP請(qǐng)求狀態(tài)變化的函數(shù).

(4)發(fā)送HTTP請(qǐng)求.

(5)獲取異步調(diào)用返回的數(shù)據(jù).

(6)使用JavaScript和DOM實(shí)現(xiàn)局部刷新.

詳情:JavaScript學(xué)習(xí)總結(jié)(七)Ajax和Http狀態(tài)字

異步加載和延遲加載

1.異步加載的方案: 動(dòng)態(tài)插入script標(biāo)簽
2.通過(guò)ajax去獲取js代碼,然后通過(guò)eval執(zhí)行
3.script標(biāo)簽上添加defer或者async屬性
4.創(chuàng)建并插入iframe竞川,讓它異步執(zhí)行js
5.延遲加載:有些 js 代碼并不是頁(yè)面初始化的時(shí)候就立刻需要的店溢,而稍后的某些情況才需要的。

前端安全問(wèn)題委乌?

sql注入原理

就是通過(guò)把SQL命令插入到Web表單遞交或輸入域名或頁(yè)面請(qǐng)求的查詢(xún)字符串床牧,最終達(dá)到欺騙服務(wù)器執(zhí)行惡意的SQL命令。

總的來(lái)說(shuō)有以下幾點(diǎn):

1.永遠(yuǎn)不要信任用戶(hù)的輸入遭贸,要對(duì)用戶(hù)的輸入進(jìn)行校驗(yàn)戈咳,可以通過(guò)正則表達(dá)式,或限制長(zhǎng)度壕吹,對(duì)單引號(hào)和雙"-"進(jìn)行轉(zhuǎn)換等著蛙。
2.永遠(yuǎn)不要使用動(dòng)態(tài)拼裝SQL,可以使用參數(shù)化的SQL或者直接使用存儲(chǔ)過(guò)程進(jìn)行數(shù)據(jù)查詢(xún)存取耳贬。
3.永遠(yuǎn)不要使用管理員權(quán)限的數(shù)據(jù)庫(kù)連接踏堡,為每個(gè)應(yīng)用使用單獨(dú)的權(quán)限有限的數(shù)據(jù)庫(kù)連接。
4.不要把機(jī)密信息明文存放咒劲,請(qǐng)加密或者h(yuǎn)ash掉密碼和敏感的信息顷蟆。

XSS原理及防范

Xss(cross-site scripting)攻擊指的是攻擊者往Web頁(yè)面里插入惡意html標(biāo)簽或者javascript代碼。比如:攻擊者在論壇中放一個(gè)
看似安全的鏈接腐魂,騙取用戶(hù)點(diǎn)擊后帐偎,竊取cookie中的用戶(hù)私密信息;或者攻擊者在論壇中加一個(gè)惡意表單蛔屹,
當(dāng)用戶(hù)提交表單的時(shí)候削樊,卻把信息傳送到攻擊者的服務(wù)器中,而不是用戶(hù)原本以為的信任站點(diǎn)判导。

XSS防范方法

1.代碼里對(duì)用戶(hù)輸入的地方和變量都需要仔細(xì)檢查長(zhǎng)度和對(duì)”<”,”>”,”;”,”’”等字符做過(guò)濾嫉父;其次任何內(nèi)容寫(xiě)到頁(yè)面之前都必須加以encode沛硅,避免不小心把html tag 弄出來(lái)眼刃。這一個(gè)層面做好绕辖,至少可以堵住超過(guò)一半的XSS 攻擊。

2.避免直接在cookie 中泄露用戶(hù)隱私擂红,例如email仪际、密碼等等。
3.通過(guò)使cookie 和系統(tǒng)ip 綁定來(lái)降低cookie 泄露后的危險(xiǎn)昵骤。這樣攻擊者得到的cookie 沒(méi)有實(shí)際價(jià)值树碱,不可能拿來(lái)重放。

4.盡量采用POST 而非GET 提交表單

XSS與CSRF有什么區(qū)別嗎变秦?

XSS是獲取信息成榜,不需要提前知道其他用戶(hù)頁(yè)面的代碼和數(shù)據(jù)包。CSRF是代替用戶(hù)完成指定的動(dòng)作蹦玫,需要知道其他用戶(hù)頁(yè)面的代碼和數(shù)據(jù)包赎婚。

要完成一次CSRF攻擊,受害者必須依次完成兩個(gè)步驟:

1.登錄受信任網(wǎng)站A樱溉,并在本地生成Cookie挣输。
  2.在不登出A的情況下,訪問(wèn)危險(xiǎn)網(wǎng)站B福贞。

CSRF的防御

1.服務(wù)端的CSRF方式方法很多樣撩嚼,但總的思想都是一致的,就是在客戶(hù)端頁(yè)面增加偽隨機(jī)數(shù)挖帘。
2.使用驗(yàn)證碼

ie各版本和chrome可以并行下載多少個(gè)資源

IE6 兩個(gè)并發(fā)完丽,iE7升級(jí)之后的6個(gè)并發(fā),之后版本也是6個(gè)

Firefox拇舀,chrome也是6個(gè)

javascript里面的繼承怎么實(shí)現(xiàn)逻族,如何避免原型鏈上面的對(duì)象共享

用構(gòu)造函數(shù)和原型鏈的混合模式去實(shí)現(xiàn)繼承,避免對(duì)象共享可以參考經(jīng)典的extend()函數(shù)你稚,很多前端框架都有封裝的瓷耙,就是用一個(gè)空函數(shù)當(dāng)做中間變量

grunt, YUI compressor 和 google clojure用來(lái)進(jìn)行代碼壓縮的用法刁赖。

YUI Compressor 是一個(gè)用來(lái)壓縮 JS 和 CSS 文件的工具搁痛,采用Java開(kāi)發(fā)。

使用方法:

//壓縮JS
java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -v src.js > packed.js
//壓縮CSS
java -jar yuicompressor-2.4.2.jar --type css --charset utf-8 -v src.css > packed.css

詳情請(qǐng)見(jiàn):你需要掌握的前端代碼性能優(yōu)化工具

Flash宇弛、Ajax各自的優(yōu)缺點(diǎn)鸡典,在使用中如何取舍?

1枪芒、Flash ajax對(duì)比
Flash適合處理多媒體彻况、矢量圖形谁尸、訪問(wèn)機(jī)器;對(duì)CSS纽甘、處理文本上不足良蛮,不容易被搜索。
Ajax對(duì)CSS悍赢、文本支持很好决瞳,支持搜索;多媒體左权、矢量圖形皮胡、機(jī)器訪問(wèn)不足。
共同點(diǎn):與服務(wù)器的無(wú)刷新傳遞消息赏迟、用戶(hù)離線(xiàn)和在線(xiàn)狀態(tài)屡贺、操作DOM

請(qǐng)解釋一下 JavaScript 的同源策略。

概念:同源策略是客戶(hù)端腳本(尤其是Javascript)的重要的安全度量標(biāo)準(zhǔn)锌杀。它最早出自Netscape Navigator2.0甩栈,其目的是防止某個(gè)文檔或腳本從多個(gè)不同源裝載。

這里的同源策略指的是:協(xié)議抛丽,域名谤职,端口相同,同源策略是一種安全協(xié)議亿鲜。
指一段腳本只能讀取來(lái)自同一來(lái)源的窗口和文檔的屬性允蜈。

為什么要有同源限制?

我們舉例說(shuō)明:比如一個(gè)黑客程序蒿柳,他利用Iframe把真正的銀行登錄頁(yè)面嵌到他的頁(yè)面上饶套,當(dāng)你使用真實(shí)的用戶(hù)名,密碼登錄時(shí)垒探,他的頁(yè)面就可以通過(guò)Javascript讀取到你的表單中input中的內(nèi)容妓蛮,這樣用戶(hù)名,密碼就輕松到手了圾叼。

什么是 “use strict”; ? 使用它的好處和壞處分別是什么蛤克?

ECMAscript 5添加了第二種運(yùn)行模式:”嚴(yán)格模式”(strict mode)。顧名思義夷蚊,這種模式使得Javascript在更嚴(yán)格的條件下運(yùn)行构挤。

設(shè)立”嚴(yán)格模式”的目的,主要有以下幾個(gè):

- 消除Javascript語(yǔ)法的一些不合理惕鼓、不嚴(yán)謹(jǐn)之處筋现,減少一些怪異行為;
- 消除代碼運(yùn)行的一些不安全之處,保證代碼運(yùn)行的安全;
- 提高編譯器效率矾飞,增加運(yùn)行速度一膨;
- 為未來(lái)新版本的Javascript做好鋪墊。

注:經(jīng)過(guò)測(cè)試IE6,7,8,9均不支持嚴(yán)格模式洒沦。

缺點(diǎn):
現(xiàn)在網(wǎng)站的JS 都會(huì)進(jìn)行壓縮豹绪,一些文件用了嚴(yán)格模式,而另一些沒(méi)有微谓。這時(shí)這些本來(lái)是嚴(yán)格模式的文件森篷,被 merge 后输钩,這個(gè)串就到了文件的中間豺型,不僅沒(méi)有指示嚴(yán)格模式,反而在壓縮后浪費(fèi)了字節(jié)买乃。

GET和POST的區(qū)別姻氨,何時(shí)使用POST?

    GET:一般用于信息獲取剪验,使用URL傳遞參數(shù)肴焊,對(duì)所發(fā)送信息的數(shù)量也有限制,一般在2000個(gè)字符
    POST:一般用于修改服務(wù)器上的資源功戚,對(duì)所發(fā)送的信息沒(méi)有限制娶眷。

    GET方式需要使用Request.QueryString來(lái)取得變量的值,而POST方式通過(guò)Request.Form來(lái)獲取變量的值啸臀,
    也就是說(shuō)Get是通過(guò)地址欄來(lái)傳值届宠,而Post是通過(guò)提交表單來(lái)傳值。

然而乘粒,在以下情況中豌注,請(qǐng)使用 POST 請(qǐng)求:
無(wú)法使用緩存文件(更新服務(wù)器上的文件或數(shù)據(jù)庫(kù))
向服務(wù)器發(fā)送大量數(shù)據(jù)(POST 沒(méi)有數(shù)據(jù)量限制)
發(fā)送包含未知字符的用戶(hù)輸入時(shí),POST 比 GET 更穩(wěn)定也更可靠

哪些地方會(huì)出現(xiàn)css阻塞灯萍,哪些地方會(huì)出現(xiàn)js阻塞轧铁?

js的阻塞特性:所有瀏覽器在下載JS的時(shí)候,會(huì)阻止一切其他活動(dòng)旦棉,比如其他資源的下載齿风,內(nèi)容的呈現(xiàn)等等。直到JS下載绑洛、解析救斑、執(zhí)行完畢后才開(kāi)始繼續(xù)并行下載其他資源并呈現(xiàn)內(nèi)容。為了提高用戶(hù)體驗(yàn)诊笤,新一代瀏覽器都支持并行下載JS系谐,但是JS下載仍然會(huì)阻塞其它資源的下載(例如.圖片,css文件等)。

由于瀏覽器為了防止出現(xiàn)JS修改DOM樹(shù)纪他,需要重新構(gòu)建DOM樹(shù)的情況鄙煤,所以就會(huì)阻塞其他的下載和呈現(xiàn)。

嵌入JS會(huì)阻塞所有內(nèi)容的呈現(xiàn)茶袒,而外部JS只會(huì)阻塞其后內(nèi)容的顯示梯刚,2種方式都會(huì)阻塞其后資源的下載。也就是說(shuō)外部樣式不會(huì)阻塞外部腳本的加載薪寓,但會(huì)阻塞外部腳本的執(zhí)行亡资。

CSS怎么會(huì)阻塞加載了?CSS本來(lái)是可以并行下載的向叉,在什么情況下會(huì)出現(xiàn)阻塞加載了(在測(cè)試觀察中锥腻,IE6CSS都是阻塞加載)

當(dāng)CSS后面跟著嵌入的JS的時(shí)候,該CSS就會(huì)出現(xiàn)阻塞后面資源下載的情況母谎。而當(dāng)把嵌入JS放到CSS前面瘦黑,就不會(huì)出現(xiàn)阻塞的情況了。

根本原因:因?yàn)闉g覽器會(huì)維持htmlcssjs的順序奇唤,樣式表必須在嵌入的JS執(zhí)行前先加載幸斥、解析完。而嵌入的JS會(huì)阻塞后面的資源加載咬扇,所以就會(huì)出現(xiàn)上面CSS阻塞下載的情況甲葬。

嵌入JS應(yīng)該放在什么位置?

   1懈贺、放在底部经窖,雖然放在底部照樣會(huì)阻塞所有呈現(xiàn),但不會(huì)阻塞資源下載隅居。

   2钠至、如果嵌入JS放在head中,請(qǐng)把嵌入JS放在CSS頭部胎源。

   3棉钧、使用defer(只支持IE)

   4、不要在嵌入的JS中調(diào)用運(yùn)行時(shí)間較長(zhǎng)的函數(shù)涕蚤,如果一定要用宪卿,可以用`setTimeout`來(lái)調(diào)用

Javascript無(wú)阻塞加載具體方式

  • 將腳本放在底部。<link>還是放在head中万栅,用以保證在js加載前佑钾,能加載出正常顯示的頁(yè)面。<script>標(biāo)簽放在</body>前代赁。

  • 成組腳本:由于每個(gè)<script>標(biāo)簽下載時(shí)阻塞頁(yè)面解析過(guò)程,所以限制頁(yè)面的<script>總數(shù)也可以改善性能。適用于內(nèi)聯(lián)腳本和外部腳本瞻讽。

  • 非阻塞腳本:等頁(yè)面完成加載后婆瓜,再加載js代碼。也就是猴蹂,在window.onload事件發(fā)出后開(kāi)始下載代碼。
    (1)defer屬性:支持IE4和fierfox3.5更高版本瀏覽器
    (2)動(dòng)態(tài)腳本元素:文檔對(duì)象模型(DOM)允許你使用js動(dòng)態(tài)創(chuàng)建HTML的幾乎全部文檔內(nèi)容聋溜。代碼如下:

<script>
var script=document.createElement("script");
script.type="text/javascript";
script.src="file.js";
document.getElementsByTagName("head")[0].appendChild(script);
</script>

此技術(shù)的重點(diǎn)在于:無(wú)論在何處啟動(dòng)下載,文件額下載和運(yùn)行都不會(huì)阻塞其他頁(yè)面處理過(guò)程把曼。即使在head里(除了用于下載文件的http鏈接)晃危。

閉包相關(guān)問(wèn)題沿量?

詳情請(qǐng)見(jiàn):詳解js閉包

js事件處理程序問(wèn)題钓简?

詳情請(qǐng)見(jiàn):JavaScript學(xué)習(xí)總結(jié)(九)事件詳解

eval是做什么的外邓?

它的功能是把對(duì)應(yīng)的字符串解析成JS代碼并運(yùn)行撤蚊;
應(yīng)該避免使用eval侦啸,不安全,非常耗性能(2次光涂,一次解析成js語(yǔ)句,一次執(zhí)行)拧烦。

JavaScript原型齐佳,原型鏈 ? 有什么特點(diǎn)疫衩?

*  原型對(duì)象也是普通的對(duì)象隧土,是對(duì)象一個(gè)自帶隱式的 __proto__ 屬性,原型也有可能有自己的原型曹傀,如果一個(gè)原型對(duì)象的原型不為null的話(huà)辐脖,我們就稱(chēng)之為原型鏈。
*  原型鏈?zhǔn)怯梢恍┯脕?lái)繼承和共享屬性的對(duì)象組成的(有限的)對(duì)象鏈皆愉。

事件嗜价、IE與火狐的事件機(jī)制有什么區(qū)別艇抠? 如何阻止冒泡?

 1\. 我們?cè)诰W(wǎng)頁(yè)中的某個(gè)操作(有的操作對(duì)應(yīng)多個(gè)事件)久锥。例如:當(dāng)我們點(diǎn)擊一個(gè)按鈕就會(huì)產(chǎn)生一個(gè)事件家淤。是可以被 JavaScript 偵測(cè)到的行為。  
 2\. 事件處理機(jī)制:IE是事件冒泡瑟由、firefox同時(shí)支持兩種事件模型絮重,也就是:捕獲型事件和冒泡型事件。歹苦;
 3\.  ev.stopPropagation();注意舊ie的方法 ev.cancelBubble = true;

ajax 是什么?ajax 的交互模型?同步和異步的區(qū)別?如何解決跨域問(wèn)題?

詳情請(qǐng)見(jiàn):JavaScript學(xué)習(xí)總結(jié)(七)Ajax和Http狀態(tài)字

1\. 通過(guò)異步模式青伤,提升了用戶(hù)體驗(yàn)

  2\. 優(yōu)化了瀏覽器和服務(wù)器之間的傳輸,減少不必要的數(shù)據(jù)往返殴瘦,減少了帶寬占用

  3\. Ajax在客戶(hù)端運(yùn)行狠角,承擔(dān)了一部分本來(lái)由服務(wù)器承擔(dān)的工作,減少了大用戶(hù)量下的服務(wù)器負(fù)載蚪腋。

  2\. Ajax的最大的特點(diǎn)是什么丰歌。

  Ajax可以實(shí)現(xiàn)動(dòng)態(tài)不刷新(局部刷新)
  readyState屬性 狀態(tài) 有5個(gè)可取值: 0=未初始化 ,1=啟動(dòng) 2=發(fā)送屉凯,3=接收立帖,4=完成

ajax的缺點(diǎn)

  1、ajax不支持瀏覽器back按鈕神得。

  2厘惦、安全問(wèn)題 AJAX暴露了與服務(wù)器交互的細(xì)節(jié)。

  3哩簿、對(duì)搜索引擎的支持比較弱。

  4酝静、破壞了程序的異常機(jī)制节榜。

  5、不容易調(diào)試别智。

跨域: jsonp宗苍、 iframe、window.name薄榛、window.postMessage讳窟、服務(wù)器上設(shè)置代理頁(yè)面

js對(duì)象的深度克隆

  function clone(Obj) {   
        var buf;   
        if (Obj instanceof Array) {   
            buf = [];  //創(chuàng)建一個(gè)空的數(shù)組 
            var i = Obj.length;   
            while (i--) {   
                buf[i] = clone(Obj[i]);   
            }   
            return buf;   
        }else if (Obj instanceof Object){   
            buf = {};  //創(chuàng)建一個(gè)空對(duì)象 
            for (var k in Obj) {  //為這個(gè)對(duì)象添加新的屬性 
                buf[k] = clone(Obj[k]);   
            }   
            return buf;   
        }else{   
            return Obj;   
        }   
    }  

AMD和CMD 規(guī)范的區(qū)別?

詳情請(qǐng)見(jiàn):詳解JavaScript模塊化開(kāi)發(fā)

網(wǎng)站重構(gòu)的理解敞恋?

網(wǎng)站重構(gòu):在不改變外部行為的前提下丽啡,簡(jiǎn)化結(jié)構(gòu)、添加可讀性硬猫,而在網(wǎng)站前端保持一致的行為补箍。也就是說(shuō)是在不改變UI的情況下改执,對(duì)網(wǎng)站進(jìn)行優(yōu)化,在擴(kuò)展的同時(shí)保持一致的UI坑雅。

對(duì)于傳統(tǒng)的網(wǎng)站來(lái)說(shuō)重構(gòu)通常是:

表格(table)布局改為DIV+CSS
使網(wǎng)站前端兼容于現(xiàn)代瀏覽器(針對(duì)于不合規(guī)范的CSS辈挂、如對(duì)IE6有效的)
對(duì)于移動(dòng)平臺(tái)的優(yōu)化
針對(duì)于SEO進(jìn)行優(yōu)化
深層次的網(wǎng)站重構(gòu)應(yīng)該考慮的方面

減少代碼間的耦合
讓代碼保持彈性
嚴(yán)格按規(guī)范編寫(xiě)代碼
設(shè)計(jì)可擴(kuò)展的API
代替舊有的框架、語(yǔ)言(如VB)
增強(qiáng)用戶(hù)體驗(yàn)
通常來(lái)說(shuō)對(duì)于速度的優(yōu)化也包含在重構(gòu)中

壓縮JS裹粤、CSS终蒂、image等前端資源(通常是由服務(wù)器來(lái)解決)
程序的性能優(yōu)化(如數(shù)據(jù)讀寫(xiě))
采用CDN來(lái)加速資源加載
對(duì)于JS DOM的優(yōu)化
HTTP服務(wù)器的文件緩存

如何獲取UA?

<script> 
    function whatBrowser() {  
        document.Browser.Name.value=navigator.appName;  
        document.Browser.Version.value=navigator.appVersion;  
        document.Browser.Code.value=navigator.appCodeName;  
        document.Browser.Agent.value=navigator.userAgent;  
    }  
</script>

js數(shù)組去重

以下是數(shù)組去重的三種方法:

Array.prototype.unique1 = function () {
  var n = []; //一個(gè)新的臨時(shí)數(shù)組
  for (var i = 0; i < this.length; i++) //遍歷當(dāng)前數(shù)組
  {
    //如果當(dāng)前數(shù)組的第i已經(jīng)保存進(jìn)了臨時(shí)數(shù)組遥诉,那么跳過(guò)拇泣,
    //否則把當(dāng)前項(xiàng)push到臨時(shí)數(shù)組里面
    if (n.indexOf(this[i]) == -1) n.push(this[i]);
  }
  return n;
}

Array.prototype.unique2 = function()
{
    var n = {},r=[]; //n為hash表,r為臨時(shí)數(shù)組
    for(var i = 0; i < this.length; i++) //遍歷當(dāng)前數(shù)組
    {
        if (!n[this[i]]) //如果hash表中沒(méi)有當(dāng)前項(xiàng)
        {
            n[this[i]] = true; //存入hash表
            r.push(this[i]); //把當(dāng)前數(shù)組的當(dāng)前項(xiàng)push到臨時(shí)數(shù)組里面
        }
    }
    return r;
}

Array.prototype.unique3 = function()
{
    var n = [this[0]]; //結(jié)果數(shù)組
    for(var i = 1; i < this.length; i++) //從第二項(xiàng)開(kāi)始遍歷
    {
        //如果當(dāng)前數(shù)組的第i項(xiàng)在當(dāng)前數(shù)組中第一次出現(xiàn)的位置不是i突那,
        //那么表示第i項(xiàng)是重復(fù)的挫酿,忽略掉。否則存入結(jié)果數(shù)組
        if (this.indexOf(this[i]) == i) n.push(this[i]);
    }
    return n;
}

HTTP狀態(tài)碼

100  Continue  繼續(xù)愕难,一般在發(fā)送post請(qǐng)求時(shí)早龟,已發(fā)送了http header之后服務(wù)端將返回此信息,表示確認(rèn)猫缭,之后發(fā)送具體參數(shù)信息
200  OK   正常返回信息
201  Created  請(qǐng)求成功并且服務(wù)器創(chuàng)建了新的資源
202  Accepted  服務(wù)器已接受請(qǐng)求葱弟,但尚未處理
301  Moved Permanently  請(qǐng)求的網(wǎng)頁(yè)已永久移動(dòng)到新位置。
302 Found  臨時(shí)性重定向猜丹。
303 See Other  臨時(shí)性重定向芝加,且總是使用 GET 請(qǐng)求新的 URI。
304  Not Modified  自從上次請(qǐng)求后射窒,請(qǐng)求的網(wǎng)頁(yè)未修改過(guò)藏杖。

400 Bad Request  服務(wù)器無(wú)法理解請(qǐng)求的格式,客戶(hù)端不應(yīng)當(dāng)嘗試再次使用相同的內(nèi)容發(fā)起請(qǐng)求脉顿。
401 Unauthorized  請(qǐng)求未授權(quán)蝌麸。
403 Forbidden  禁止訪問(wèn)。
404 Not Found  找不到如何與 URI 相匹配的資源艾疟。

500 Internal Server Error  最常見(jiàn)的服務(wù)器端錯(cuò)誤来吩。
503 Service Unavailable 服務(wù)器端暫時(shí)無(wú)法處理請(qǐng)求(可能是過(guò)載或維護(hù))。

js操作獲取和設(shè)置cookie

//創(chuàng)建cookie
function setCookie(name, value, expires, path, domain, secure) {
    var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);
    if (expires instanceof Date) {
        cookieText += '; expires=' + expires;
    }
    if (path) {
        cookieText += '; expires=' + expires;
    }
    if (domain) {
        cookieText += '; domain=' + domain;
    }
    if (secure) {
        cookieText += '; secure';
    }
    document.cookie = cookieText;
}

//獲取cookie
function getCookie(name) {
    var cookieName = encodeURIComponent(name) + '=';
    var cookieStart = document.cookie.indexOf(cookieName);
    var cookieValue = null;
    if (cookieStart > -1) {
        var cookieEnd = document.cookie.indexOf(';', cookieStart);
        if (cookieEnd == -1) {
            cookieEnd = document.cookie.length;
        }
        cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
    }
    return cookieValue;
}

//刪除cookie
function unsetCookie(name) {
    document.cookie = name + "= ; expires=" + new Date(0);
}

說(shuō)說(shuō)TCP傳輸?shù)娜挝帐植呗?/h3>
為了準(zhǔn)確無(wú)誤地把數(shù)據(jù)送達(dá)目標(biāo)處蔽莱,TCP協(xié)議采用了三次握手策略弟疆。用TCP協(xié)議把數(shù)據(jù)包送出去后,TCP不會(huì)對(duì)傳送  后的情況置之不理盗冷,它一定會(huì)向?qū)Ψ酱_認(rèn)是否成功送達(dá)怠苔。握手過(guò)程中使用了TCP的標(biāo)志:SYN和ACK。
發(fā)送端首先發(fā)送一個(gè)帶SYN標(biāo)志的數(shù)據(jù)包給對(duì)方正塌。接收端收到后嘀略,回傳一個(gè)帶有SYN/ACK標(biāo)志的數(shù)據(jù)包以示傳達(dá)確認(rèn)信息恤溶。最后,發(fā)送端再回傳一個(gè)帶ACK標(biāo)志的數(shù)據(jù)包帜羊,代表“握手”結(jié)束
若在握手過(guò)程中某個(gè)階段莫名中斷咒程,TCP協(xié)議會(huì)再次以相同的順序發(fā)送相同的數(shù)據(jù)包。

說(shuō)說(shuō)你對(duì)Promise的理解

依照 Promise/A+ 的定義讼育,Promise 有四種狀態(tài):

pending: 初始狀態(tài), 非 fulfilled 或 rejected.
fulfilled: 成功的操作.
rejected: 失敗的操作.
settled: Promise已被fulfilled或rejected帐姻,且不是pending

另外, fulfilledrejected 一起合稱(chēng) settled奶段。

Promise 對(duì)象用來(lái)進(jìn)行延遲(deferred) 和異步(asynchronous ) 計(jì)算饥瓷。

Promise 的構(gòu)造函數(shù)

構(gòu)造一個(gè) Promise,最基本的用法如下:

var promise = new Promise(function(resolve, reject) {
    if (...) {  // succeed
        resolve(result);
    } else {   // fails
        reject(Error(errMessage));
    }
});

Promise 實(shí)例擁有 then 方法(具有 then 方法的對(duì)象痹籍,通常被稱(chēng)為 thenable)呢铆。它的使用方法如下:

promise.then(onFulfilled, onRejected)

接收兩個(gè)函數(shù)作為參數(shù),一個(gè)在 fulfilled 的時(shí)候被調(diào)用蹲缠,一個(gè)在 rejected 的時(shí)候被調(diào)用棺克,接收參數(shù)就是 future,onFulfilled 對(duì)應(yīng) resolve, onRejected 對(duì)應(yīng) reject线定。

Javascript垃圾回收方法

標(biāo)記清除(mark and sweep)

這是JavaScript最常見(jiàn)的垃圾回收方式娜谊,當(dāng)變量進(jìn)入執(zhí)行環(huán)境的時(shí)候,比如函數(shù)中聲明一個(gè)變量斤讥,垃圾回收器將其標(biāo)記為“進(jìn)入環(huán)境”纱皆,當(dāng)變量離開(kāi)環(huán)境的時(shí)候(函數(shù)執(zhí)行結(jié)束)將其標(biāo)記為“離開(kāi)環(huán)境”。

垃圾回收器會(huì)在運(yùn)行的時(shí)候給存儲(chǔ)在內(nèi)存中的所有變量加上標(biāo)記芭商,然后去掉環(huán)境中的變量以及被環(huán)境中變量所引用的變量(閉包)派草,在這些完成之后仍存在標(biāo)記的就是要?jiǎng)h除的變量了

引用計(jì)數(shù)(reference counting)

在低版本IE中經(jīng)常會(huì)出現(xiàn)內(nèi)存泄露,很多時(shí)候就是因?yàn)槠洳捎靡糜?jì)數(shù)方式進(jìn)行垃圾回收铛楣。引用計(jì)數(shù)的策略是跟蹤記錄每個(gè)值被使用的次數(shù)澳眷,當(dāng)聲明了一個(gè) 變量并將一個(gè)引用類(lèi)型賦值給該變量的時(shí)候這個(gè)值的引用次數(shù)就加1,如果該變量的值變成了另外一個(gè)蛉艾,則這個(gè)值得引用次數(shù)減1,當(dāng)這個(gè)值的引用次數(shù)變?yōu)?的時(shí) 候衷敌,說(shuō)明沒(méi)有變量在使用勿侯,這個(gè)值沒(méi)法被訪問(wèn)了,因此可以將其占用的空間回收缴罗,這樣垃圾回收器會(huì)在運(yùn)行的時(shí)候清理掉引用次數(shù)為0的值占用的空間助琐。

在IE中雖然JavaScript對(duì)象通過(guò)標(biāo)記清除的方式進(jìn)行垃圾回收,但BOM與DOM對(duì)象卻是通過(guò)引用計(jì)數(shù)回收垃圾的面氓,也就是說(shuō)只要涉及BOM及DOM就會(huì)出現(xiàn)循環(huán)引用問(wèn)題兵钮。

談?wù)勑阅軆?yōu)化問(wèn)題

代碼層面:避免使用css表達(dá)式蛆橡,避免使用高級(jí)選擇器,通配選擇器掘譬。
緩存利用:緩存Ajax泰演,使用CDN,使用外部js和css文件以便緩存葱轩,添加Expires頭睦焕,服務(wù)端配置Etag,減少DNS查找等
請(qǐng)求數(shù)量:合并樣式和腳本靴拱,使用css圖片精靈垃喊,初始首屏之外的圖片資源按需加載,靜態(tài)資源延遲加載袜炕。
請(qǐng)求帶寬:壓縮文件本谜,開(kāi)啟GZIP,

移動(dòng)端性能優(yōu)化

盡量使用css3動(dòng)畫(huà)偎窘,開(kāi)啟硬件加速乌助。適當(dāng)使用touch事件代替click事件。避免使用css3漸變陰影效果评架。
盡可能少的使用box-shadowgradients眷茁。box-shadowgradients往往都是頁(yè)面的性能殺手

什么是Etag?

瀏覽器下載組件的時(shí)候纵诞,會(huì)將它們存儲(chǔ)到瀏覽器緩存中上祈。如果需要再次獲取相同的組件,瀏覽器將檢查組件的緩存時(shí)間浙芙,
假如已經(jīng)過(guò)期登刺,那么瀏覽器將發(fā)送一個(gè)條件GET請(qǐng)求到服務(wù)器,服務(wù)器判斷緩存還有效嗡呼,則發(fā)送一個(gè)304響應(yīng)纸俭,
告訴瀏覽器可以重用緩存組件。

那么服務(wù)器是根據(jù)什么判斷緩存是否還有效呢?答案有兩種方式南窗,一種是前面提到的ETag揍很,另一種是根據(jù)Last-Modified

Expires和Cache-Control

Expires要求客戶(hù)端和服務(wù)端的時(shí)鐘嚴(yán)格同步。HTTP1.1引入Cache-Control來(lái)克服Expires頭的限制万伤。如果max-age和Expires同時(shí)出現(xiàn)窒悔,則max-age有更高的優(yōu)先級(jí)。

Cache-Control: no-cache, private, max-age=0
ETag: abcde
Expires: Thu, 15 Apr 2014 20:00:00 GMT
Pragma: private
Last-Modified: $now // RFC1123 format

棧和隊(duì)列的區(qū)別?

棧的插入和刪除操作都是在一端進(jìn)行的敌买,而隊(duì)列的操作卻是在兩端進(jìn)行的香缺。
隊(duì)列先進(jìn)先出毙死,棧先進(jìn)后出律适。
棧只允許在表尾一端進(jìn)行插入和刪除典徊,而隊(duì)列只允許在表尾一端進(jìn)行插入,在表頭一端進(jìn)行刪除 

棧和堆的區(qū)別?

棧區(qū)(stack)—   由編譯器自動(dòng)分配釋放   ,存放函數(shù)的參數(shù)值,局部變量的值等氧映。
堆區(qū)(heap)   —   一般由程序員分配釋放,   若程序員不釋放攘宙,程序結(jié)束時(shí)可能由OS回收屯耸。
堆(數(shù)據(jù)結(jié)構(gòu)):堆可以被看成是一棵樹(shù),如:堆排序蹭劈;
棧(數(shù)據(jù)結(jié)構(gòu)):一種先進(jìn)后出的數(shù)據(jù)結(jié)構(gòu)疗绣。 

關(guān)于Http 2.0 你知道多少?

HTTP/2引入了“服務(wù)端推(serverpush)”的概念铺韧,它允許服務(wù)端在客戶(hù)端需要數(shù)據(jù)之前就主動(dòng)地將數(shù)據(jù)發(fā)送到客戶(hù)端緩存中多矮,從而提高性能。
HTTP/2提供更多的加密支持
HTTP/2使用多路技術(shù)哈打,允許多個(gè)消息在一個(gè)連接上同時(shí)交差塔逃。
它增加了頭壓縮(header compression),因此即使非常小的請(qǐng)求料仗,其請(qǐng)求和響應(yīng)的header都只會(huì)占用很小比例的帶寬湾盗。

轉(zhuǎn)自

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市立轧,隨后出現(xiàn)的幾起案子格粪,更是在濱河造成了極大的恐慌,老刑警劉巖氛改,帶你破解...
    沈念sama閱讀 222,104評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件帐萎,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡胜卤,警方通過(guò)查閱死者的電腦和手機(jī)疆导,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,816評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)葛躏,“玉大人澈段,你說(shuō)我怎么就攤上這事〗⒃埽” “怎么了均蜜?”我有些...
    開(kāi)封第一講書(shū)人閱讀 168,697評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)芒率。 經(jīng)常有香客問(wèn)我,道長(zhǎng)篙顺,這世上最難降的妖魔是什么偶芍? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,836評(píng)論 1 298
  • 正文 為了忘掉前任充择,我火速辦了婚禮,結(jié)果婚禮上匪蟀,老公的妹妹穿的比我還像新娘椎麦。我一直安慰自己,他們只是感情好材彪,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,851評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布观挎。 她就那樣靜靜地躺著,像睡著了一般段化。 火紅的嫁衣襯著肌膚如雪嘁捷。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 52,441評(píng)論 1 310
  • 那天显熏,我揣著相機(jī)與錄音雄嚣,去河邊找鬼。 笑死喘蟆,一個(gè)胖子當(dāng)著我的面吹牛缓升,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播蕴轨,決...
    沈念sama閱讀 40,992評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼港谊,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了橙弱?” 一聲冷哼從身側(cè)響起歧寺,我...
    開(kāi)封第一講書(shū)人閱讀 39,899評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎膘螟,沒(méi)想到半個(gè)月后成福,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,457評(píng)論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡荆残,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,529評(píng)論 3 341
  • 正文 我和宋清朗相戀三年奴艾,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片内斯。...
    茶點(diǎn)故事閱讀 40,664評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡蕴潦,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出俘闯,到底是詐尸還是另有隱情潭苞,我是刑警寧澤,帶...
    沈念sama閱讀 36,346評(píng)論 5 350
  • 正文 年R本政府宣布真朗,位于F島的核電站此疹,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜蝗碎,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,025評(píng)論 3 334
  • 文/蒙蒙 一湖笨、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧蹦骑,春花似錦慈省、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,511評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至捎废,卻和暖如春笑窜,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背缕坎。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,611評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工怖侦, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人谜叹。 一個(gè)月前我還...
    沈念sama閱讀 49,081評(píng)論 3 377
  • 正文 我出身青樓匾寝,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親荷腊。 傳聞我的和親對(duì)象是個(gè)殘疾皇子艳悔,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,675評(píng)論 2 359