【面試】764高頻前端開(kāi)發(fā)面試問(wèn)題及答案整理

說(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雖然在持久保存客戶端數(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)有做硬性限制
IE和Opera?會(huì)清理近期最少使用的cookie,Firefox會(huì)隨機(jī)清理cookie。
cookie的最大大約為4096字節(jié),為了兼容性,一般不能超過(guò)4095字節(jié)。
IE 提供了一種存儲(chǔ)可以持久化用戶數(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)不可能保存在客戶端。例如,為了防止重復(fù)提交表單,我們需要在服務(wù)器端保存一個(gè)計(jì)數(shù)器。如果我們把這個(gè)計(jì)數(shù)器保存在客戶端,那么它起不到任何作用。
瀏覽器本地存儲(chǔ)
在較高版本的瀏覽器中,js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage來(lái)取代globalStorage。
html5中的Web Storage包括了兩種存儲(chǔ)方式:sessionStorage和localStorage。
sessionStorage用于本地存儲(chǔ)一個(gè)會(huì)話(session)中的數(shù)據(jù),這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁(yè)面才能訪問(wèn)并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲(chǔ),僅僅是會(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。
localStorage和sessionStorage都具有相同的操作方法,例如setItem、getItem和removeItem等
cookie 和session 的區(qū)別:
?1、cookie數(shù)據(jù)存放在客戶的瀏覽器上,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新增偽類有那些?
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)
可繼承的樣式: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新增偽類舉例:
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ù)選框被選中。
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、),線性漸變(gradient),旋轉(zhuǎn)(transform)
transform:rotate(9deg)?scale(0.85,0.90)?translate(0px,-30px)?skew(-9deg,0deg);//旋轉(zhuǎn),縮放,定位,傾斜
增加了更多的CSS選擇器??多背景?rgba?
在CSS3中唯一引入的偽元素是::selection.
媒體查詢,多欄布局
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)銷,因?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)依賴于標(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)、?聲明位于文檔中的最前面,處于??標(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文檔類型?
?該標(biāo)簽可聲明三種 DTD 類型,分別表示嚴(yán)格版本、過(guò)渡版本以及基于框架的 HTML 文檔。
?HTML 4.01 規(guī)定了三種文檔類型:Strict、Transitional 以及 Frameset。
?XHTML 1.0?規(guī)定了三種 XML 文檔類型: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屬性.
*?解決方法:(條件注釋)缺點(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í)慣?,F(xiàn)在可以使用[html5](http://www.w3.org/TR/html5/single-page.html)推薦的寫(xiě)法:``
*?上下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)簽法,"clear:both;">(缺點(diǎn):不過(guò)這個(gè)辦法會(huì)增加額外的標(biāo)簽使HTML結(jié)構(gòu)看起來(lái)不夠簡(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()????//通過(guò)標(biāo)簽名稱
??????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
??本地離線存儲(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框架
????
如何區(qū)分:DOCTYPE聲明\新增的結(jié)構(gòu)元素\功能元素
iframe的優(yōu)缺點(diǎn)?
1.`如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信?
調(diào)用localstorge、cookies等本地存儲(chǔ)方式
線程與進(jìn)程的區(qū)別
一個(gè)程序至少有一個(gè)進(jìn)程,一個(gè)進(jìn)程至少有一個(gè)線程.?
線程的劃分尺度小于進(jìn)程,使得多線程程序的并發(fā)性高。?
另外,進(jìn)程在執(zhí)行過(guò)程中擁有獨(dú)立的內(nèi)存單元,而多個(gè)線程共享內(nèi)存,從而極大地提高了程序的運(yùn)行效率。?
線程在執(zhí)行過(guò)程中與進(jìn)程還是有區(qū)別的。每個(gè)獨(dú)立的線程有一個(gè)程序運(yùn)行的入口、順序執(zhí)行序列和程序的出口。但是線程不能夠獨(dú)立執(zhí)行,必須依存在應(yīng)用程序中,由應(yīng)用程序提供多個(gè)線程執(zhí)行控制。?
從邏輯角度來(lái)看,多線程的意義在于一個(gè)應(yīng)用程序中,有多個(gè)執(zhí)行部分可以同時(shí)執(zhí)行。但操作系統(tǒng)并沒(méi)有將多個(gè)線程看做多個(gè)獨(dú)立的應(yīng)用,來(lái)實(shí)現(xiàn)進(jìn)程的調(diào)度和管理以及資源分配。這就是進(jì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è)“目錄是什么文件類型,或者是目錄。)?
?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?文檔樣式閃爍
??
而引用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)單的出奇,只要在之間加入一個(gè)或者
此技術(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的話,我們就稱之為原型鏈。
*??原型鏈?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ò)異步模式,提升了用戶體驗(yàn)
??2.?優(yōu)化了瀏覽器和服務(wù)器之間的傳輸,減少不必要的數(shù)據(jù)往返,減少了帶寬占用
? 3. Ajax在客戶端運(yùn)行,承擔(dān)了一部分本來(lái)由服務(wù)器承擔(dān)的工作,減少了大用戶量下的服務(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)用戶體驗(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?
js數(shù)組去重
以下是數(shù)組去重的三種方法:
Array.prototype.unique1?=?function?()?{
??var?n?=?[];?//一個(gè)新的臨時(shí)數(shù)組
??for?(var?i?=?0;?i???{
????//如果當(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?????{
????????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?????{
????????//如果當(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)求的格式,客戶端不應(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ù)娜挝帐植呗?/span>
為了準(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
另外,?fulfilled?與?rejected?一起合稱?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ì)象,通常被稱為?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è)引用類型賦值給該變量的時(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-shadow與gradients。box-shadow與gradients往往都是頁(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要求客戶端和服務(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ù)端在客戶端需要數(shù)據(jù)之前就主動(dòng)地將數(shù)據(jù)發(fā)送到客戶端緩存中,從而提高性能。HTTP/2提供更多的加密支持HTTP/2使用多路技術(shù),允許多個(gè)消息在一個(gè)連接上同時(shí)交差。
它增加了頭壓縮(header compression),因此即使非常小的請(qǐng)求,其請(qǐng)求和響應(yīng)的header都只會(huì)占用很小比例的帶寬。
源自:https://blog.csdn.net/p358278505/article/details/78718283
聲明:文章著作權(quán)歸作者所有,如有侵權(quán),請(qǐng)聯(lián)系小編刪除。

回復(fù)“加群”與大佬們一起交流學(xué)習(xí)~
點(diǎn)擊“閱讀原文”查看 80+ 篇原創(chuàng)文章
