什么是 FOUC（無(wú)樣式內(nèi)容閃爍）翁都？你如何來(lái)避免 FOUC界赔？? ?

FOUC - Flash Of Unstyled Content 文檔樣式閃爍@import "../fouc.css";而引用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è)或者元素就可以了。

?li與li之間有看不見(jiàn)的空白間隔是什么原因引起的铺遂？有什么解決辦法衫哥？? ??

行框的排列會(huì)受到中間空白（回車\空格）等的影響，因?yàn)榭崭褚矊儆谧址?這些空白也會(huì)被應(yīng)用樣式襟锐，占據(jù)空間撤逢，所以會(huì)有間隔，把字符大小設(shè)為0粮坞，就沒(méi)有空格了笛质。

?為什么要初始化CSS樣式。 ? ??

因?yàn)闉g覽器的兼容問(wèn)題捞蚂，不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的妇押，如果沒(méi)對(duì)CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁(yè)面顯示差異。? ? - 當(dāng)然姓迅，初始化樣式會(huì)對(duì)SEO有一定的影響敲霍，但魚和熊掌不可兼得，但力求影響最小的情況下初始化丁存。? ? ? ??

最簡(jiǎn)單的初始化方法： * {padding: 0; margin: 0;} （強(qiáng)烈不建議）? ? ? ??

淘寶的樣式初始化代碼：? ??

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; }

absolute的containing block(容器塊)計(jì)算方式跟正常流有什么不同肩杈？? ??

無(wú)論屬于哪種，都要先找到其祖先元素中最近的 position 值不為 static 的元素解寝，然后再判斷：? ??

1扩然、若此元素為 inline 元素，則 containing block 為能夠包含這個(gè)元素生成的第一個(gè)和最后一個(gè) inline box 的 padding box (除 margin, border 外的區(qū)域) 的最小矩形聋伦；? ??

2夫偶、否則,則由這個(gè)祖先元素的 padding box 構(gòu)成界睁。? ? 如果都找不到，則為 initial containing block兵拢。? ? ? ? 補(bǔ)充：? ? 1. static(默認(rèn)的)/relative：簡(jiǎn)單說(shuō)就是它的父元素的內(nèi)容框（即去掉padding的部分） ? ? ? ? ? ? ? ? ? ? ? ?2. absolute: 向上找最近的定位為absolute/relative的元素? ??

3. fixed: 它的containing block一律為根元素(html/body)翻斟，根元素也是initial containing block

對(duì)BFC規(guī)范(塊級(jí)格式化上下文：block formatting context)的理解？? ??

（W3C CSS 2.1 規(guī)范中的一個(gè)概念,它是一個(gè)獨(dú)立容器说铃，決定了元素如何對(duì)其內(nèi)容進(jìn)行定位,以及與其他元素的關(guān)系和相互作用访惜。）? ? 一個(gè)頁(yè)面是由很多個(gè) Box 組成的,元素的類型和 display 屬性,決定了這個(gè) Box 的類型。? ? 不同類型的 Box,會(huì)參與不同的 Formatting Context（決定如何渲染文檔的容器）,因此Box內(nèi)的元素會(huì)以不同的方式渲染,也就是說(shuō)BFC內(nèi)部的元素和外部的元素不會(huì)互相影響腻扇。

如何理解表現(xiàn)與內(nèi)容相分離债热？? ??

表現(xiàn)與結(jié)構(gòu)相分離簡(jiǎn)單的說(shuō)就是HTML中只有標(biāo)簽元素 表現(xiàn)完全是由CSS文件控制的。

怎么讓Chrome支持小于12px 的文字幼苛？? ??

body{-webkit-text-size-adjust:none}

::before 和 :after中雙冒號(hào)和單冒號(hào) 有什么區(qū)別阳柔？解釋一下這2個(gè)偽元素的作用。? ??

單冒號(hào)(:)用于CSS3偽類蚓峦，雙冒號(hào)(::)用于CSS3偽元素舌剂。? ? 偽元素由雙冒號(hào)和偽元素名稱組成。雙冒號(hào)是在css3規(guī)范中引入的暑椰，用于區(qū)分偽類和偽元素霍转。但是偽類兼容現(xiàn)存樣式，瀏覽器需要同時(shí)支持舊的偽類一汽，比如:first-line避消、:first-letter、:before召夹、:after等岩喷。? ? 對(duì)于CSS2之前已有的偽元素，比如:before监憎，單冒號(hào)和雙冒號(hào)的寫法::before作用是一樣的纱意。? ? 提醒，如果你的網(wǎng)站只需要兼容webkit鲸阔、firefox偷霉、opera等瀏覽器褐筛，建議對(duì)于偽元素采用雙冒號(hào)的寫法类少，如果不得不兼容IE瀏覽器，還是用CSS2的單冒號(hào)寫法比較安全渔扎。

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定義的權(quán)重? ? 以下是權(quán)重的規(guī)則：標(biāo)簽的權(quán)重為1琼蚯，class的權(quán)重為10酬凳，id的權(quán)重為100，以下例子是演示各種定義的權(quán)重值：? ? /*權(quán)重為1*/? ? div{? ? }? ? /*權(quán)重為10*/? ? .class1{? ? }? ? /*權(quán)重為100*/? ? #id1{? ? }? ? /*權(quán)重為100+1=101*/? ? #id1 div{? ? }? ? /*權(quán)重為10+1=11*/? ? .class1 div{? ? }? ? /*權(quán)重為10+10+1=21*/? ? .class1 .class2 div{? ? }? ? ? ? 如果權(quán)重相同遭庶，則最后定義的樣式會(huì)起作用宁仔，但是應(yīng)該避免這種情況出現(xià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`痘儡。

什么是CSS 預(yù)處理器 / 后處理器？ ? ?

預(yù)處理器例如：LESS枢步、Sass近弟、Stylus，用來(lái)預(yù)編譯Sass或less榔袋，增強(qiáng)了css代碼的復(fù)用性让蕾，? ? ? 還有層級(jí)、mixin结蟋、變量脯倚、循環(huán)、函數(shù)等，具有很方便的UI組件模塊化開(kāi)發(fā)能力推正，極大的提高工作效率恍涂。? ? ? ? - 后處理器例如：PostCSS，通常被視為在完成的樣式表中根據(jù)CSS規(guī)范處理CSS植榕，讓其更有效再沧；目前最常做的? ? ? 是給CSS屬性添加瀏覽器私有前綴，實(shí)現(xiàn)跨瀏覽器兼容性的問(wèn)題尊残。

?如果需要手動(dòng)寫動(dòng)畫炒瘸，你認(rèn)為最小時(shí)間間隔是多久，為什么寝衫？ ??

?多數(shù)顯示器默認(rèn)頻率是60Hz顷扩，即1秒刷新60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms

display:inline-block 什么時(shí)候會(huì)顯示間隙慰毅？

移除空格隘截、使用margin負(fù)值、使用font-size:0汹胃、letter-spacing婶芭、word-spacing

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

display:none隱藏對(duì)應(yīng)的元素着饥，在文檔布局中不再給它分配空間犀农，它各邊的元素會(huì)合攏，就當(dāng)他從來(lái)不存在贱勃。? ? ? ? visibility:hidden隱藏對(duì)應(yīng)的元素井赌，但是在文檔布局中仍保留原來(lái)的空間。

介紹js的基本數(shù)據(jù)類型贵扰。? ??

Undefined仇穗、Null、Boolean戚绕、Number纹坐、String

介紹js有哪些內(nèi)置對(duì)象？? ? ??

Object 是 JavaScript 中所有對(duì)象的父對(duì)象? ? 數(shù)據(jù)封裝類對(duì)象：Object舞丛、Array耘子、Boolean、Number 和 String? ? 其他對(duì)象：Function球切、Arguments谷誓、Math、Date吨凑、RegExp捍歪、Error

說(shuō)幾條寫JavaScript的基本規(guī)范户辱？? ??

1.不要在同一行聲明多個(gè)變量。? ? 2.請(qǐng)使用 ===/!==來(lái)比較true/false或者數(shù)值? ? 3.使用對(duì)象字面量替代new Array這種形式? ? 4.不要使用全局函數(shù)糙臼。? ? 5.Switch語(yǔ)句必須帶有default分支? ? 6.函數(shù)不應(yīng)該有時(shí)候有返回值庐镐，有時(shí)候沒(méi)有返回值。? ? 7.For循環(huán)必須使用大括號(hào)? ? 8.If語(yǔ)句必須使用大括號(hào)? ? 9.for-in循環(huán)中的變量 應(yīng)該使用var關(guān)鍵字明確限定作用域变逃，從而避免作用域污染必逆。

JavaScript原型，原型鏈 ? 有什么特點(diǎn)揽乱？? ??

每個(gè)對(duì)象都會(huì)在其內(nèi)部初始化一個(gè)屬性名眉，就是prototype(原型)，當(dāng)我們?cè)L問(wèn)一個(gè)對(duì)象的屬性時(shí)锤窑，? ? 如果這個(gè)對(duì)象內(nèi)部不存在這個(gè)屬性璧针，那么他就會(huì)去prototype里找這個(gè)屬性嚷炉，這個(gè)prototype又會(huì)有自己的prototype渊啰，? ? 于是就這樣一直找下去，也就是我們平時(shí)所說(shuō)的原型鏈的概念申屹。? ? 關(guān)系：instance.constructor.prototype = instance.__proto__? ? ? ? 特點(diǎn)：? ? JavaScript對(duì)象是通過(guò)引用來(lái)傳遞的绘证，我們創(chuàng)建的每個(gè)新對(duì)象實(shí)體中并沒(méi)有一份屬于自己的原型副本。當(dāng)我們修改原型時(shí)哗讥，與之相關(guān)的對(duì)象也會(huì)繼承這一改變嚷那。? ? ? ? 當(dāng)我們需要一個(gè)屬性的時(shí)，Javascript引擎會(huì)先看當(dāng)前對(duì)象中是否有這個(gè)屬性杆煞， 如果沒(méi)有的話魏宽，? ? 就會(huì)查找他的Prototype對(duì)象是否有這個(gè)屬性，如此遞推下去决乎，一直檢索到 Object 內(nèi)建對(duì)象队询。? ? ? ? function Func(){}? ? ? ? Func.prototype.name = "Sean";? ? ? ? Func.prototype.getInfo = function() {? ? ? ? ? return this.name;? ? ? ? }? ? ? ? var person = new Func();//現(xiàn)在可以參考var person = Object.create(oldObject);? ? ? ? console.log(person.getInfo());//它擁有了Func的屬性和方法? ? ? ? //"Sean"? ? ? ? console.log(Func.prototype);? ? ? ? // Func { name="Sean", getInfo=function()}

JavaScript有幾種類型的值？ ??

?棧：原始數(shù)據(jù)類型（Undefined构诚，Null蚌斩，Boolean，Number范嘱、String）? ? 堆：引用數(shù)據(jù)類型（對(duì)象送膳、數(shù)組和函數(shù)）? ? ? ? 兩種類型的區(qū)別是：存儲(chǔ)位置不同；? ? 原始數(shù)據(jù)類型直接存儲(chǔ)在棧(stack)中的簡(jiǎn)單數(shù)據(jù)段丑蛤，占據(jù)空間小叠聋、大小固定，屬于被頻繁使用數(shù)據(jù)受裹，所以放入棧中存儲(chǔ)碌补；? ? 引用數(shù)據(jù)類型存儲(chǔ)在堆(heap)中的對(duì)象,占據(jù)空間大、大小不固定,如果存儲(chǔ)在棧中，將會(huì)影響程序運(yùn)行的性能脑慧；引用數(shù)據(jù)類型在棧中存儲(chǔ)了指針魄眉，該指針指向堆中該實(shí)體的起始地址。當(dāng)解釋器尋找引用值時(shí)闷袒，會(huì)首先檢索其? ? 在棧中的地址坑律，取得地址后從堆中獲得實(shí)體?

Javascript如何實(shí)現(xiàn)繼承？? ??

1囊骤、構(gòu)造繼承? ? 2晃择、原型繼承? ? 3、實(shí)例繼承? ? 4也物、拷貝繼承 ?

Javascript作用鏈域?? ??

全局函數(shù)無(wú)法查看局部函數(shù)的內(nèi)部細(xì)節(jié)宫屠，但局部函數(shù)可以查看其上層的函數(shù)細(xì)節(jié)，直至全局細(xì)節(jié)滑蚯。? ? 當(dāng)需要從局部函數(shù)查找某一屬性或方法時(shí)浪蹂，如果當(dāng)前作用域沒(méi)有找到，就會(huì)上溯到上層作用域查找告材，? ? 直至全局函數(shù)坤次，這種組織形式就是作用域鏈。

This對(duì)象的理解斥赋。? ??

this總是指向函數(shù)的直接調(diào)用者（而非間接調(diào)用者）缰猴；? ? 如果有new關(guān)鍵字，this指向new出來(lái)的那個(gè)對(duì)象疤剑；? ? 在事件中滑绒，this指向觸發(fā)這個(gè)事件的對(duì)象，特殊的是隘膘，IE中的attachEvent中的this總是指向全局對(duì)象Window疑故；

?eval是做什么的？? ??

它的功能是把對(duì)應(yīng)的字符串解析成JS代碼并運(yùn)行棘幸；? ? 應(yīng)該避免使用eval焰扳，不安全，非常耗性能（2次误续，一次解析成js語(yǔ)句吨悍，一次執(zhí)行）。? ? 由JSON字符串轉(zhuǎn)換為JSON對(duì)象的時(shí)候可以用eval蹋嵌，var obj =eval('('+ str +')');

?null育瓜，undefined 的區(qū)別？? ??

null? ? ? ? 表示一個(gè)對(duì)象被定義了栽烂，值為“空值”躏仇；? ? undefined? 表示不存在這個(gè)值恋脚。? ? ? ? typeof undefined? ? ? ? //"undefined"? ? ? ? undefined :是一個(gè)表示"無(wú)"的原始值或者說(shuō)表示"缺少值"，就是此處應(yīng)該有一個(gè)值焰手，但是還沒(méi)有定義糟描。當(dāng)嘗試讀取時(shí)會(huì)返回 undefined；? ? ? ? 例如變量被聲明了书妻，但沒(méi)有賦值時(shí)船响，就等于undefined? ? ? ? typeof null? ? ? ? //"object"? ? ? ? null : 是一個(gè)對(duì)象(空對(duì)象, 沒(méi)有任何屬性和方法)；? ? ? ? 例如作為函數(shù)的參數(shù)躲履，表示該函數(shù)的參數(shù)不是對(duì)象见间；? ? ? ? 注意：? ? ? ? 在驗(yàn)證null時(shí)，一定要使用　=== 工猜，因?yàn)?== 無(wú)法分別 null 和　undefined? ? ? ? 再來(lái)一個(gè)例子：? ? ? ? ? ? null? ? ? ? Q：有張三這個(gè)人么米诉？? ? ? ? A：有！? ? ? ? Q：張三有房子么篷帅？? ? ? ? A：沒(méi)有史侣！? ? ? ? ? ? undefined? ? ? ? Q：有張三這個(gè)人么？? ? ? ? A：沒(méi)有犹褒！

?["1", "2", "3"].map(parseInt) 答案是多少抵窒？? ??

[1, NaN, NaN] 因?yàn)?parseInt 需要兩個(gè)參數(shù) (val, radix)弛针，? ? 其中 radix 表示解析時(shí)用的基數(shù)叠骑。? ? map 傳了 3 個(gè) (element, index, array)，對(duì)應(yīng)的 radix 不合法導(dǎo)致解析失敗削茁。

事件是宙枷？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;）

?什么是閉包（closure）贤笆，為什么要用它？? ??

閉包是指有權(quán)訪問(wèn)另一個(gè)函數(shù)作用域中變量的函數(shù)讨阻，創(chuàng)建閉包的最常見(jiàn)的方式就是在一個(gè)函數(shù)內(nèi)創(chuàng)建另一個(gè)函數(shù)芥永，通過(guò)另一個(gè)函數(shù)訪問(wèn)這個(gè)函數(shù)的局部變量,利用閉包可以突破作用鏈域，將函數(shù)內(nèi)部的變量和方法傳遞到外部钝吮。? ? 閉包的特性：? ? ? ? 1.函數(shù)內(nèi)再嵌套函數(shù)? ? 2.內(nèi)部函數(shù)可以引用外層的參數(shù)和變量? ? 3.參數(shù)和變量不會(huì)被垃圾回收機(jī)制回收 ? ? ? ??

javascript 代碼中的"use strict";是什么意思 ? 使用它區(qū)別是什么埋涧？? ??

use strict是一種ECMAscript 5 添加的（嚴(yán)格）運(yùn)行模式,這種模式使得 Javascript 在更嚴(yán)格的條件下運(yùn)行,? ? ? ? 使JS編碼更加規(guī)范化的模式,消除Javascript語(yǔ)法的一些不合理板辽、不嚴(yán)謹(jǐn)之處，減少一些怪異行為棘催。? ? 默認(rèn)支持的糟糕特性都會(huì)被禁用劲弦，比如不能用with，也不能在意外的情況下給全局變量賦值;? ? 全局變量的顯示聲明,函數(shù)必須聲明在頂層醇坝，不允許在非函數(shù)代碼塊內(nèi)聲明函數(shù),arguments.callee也不允許使用瓶您；? ? 消除代碼運(yùn)行的一些不安全之處，保證代碼運(yùn)行的安全,限制函數(shù)中的arguments修改纲仍，嚴(yán)格模式下的eval函數(shù)的行為和非嚴(yán)格模式的也不相同;? ? ? ? 提高編譯器效率呀袱，增加運(yùn)行速度；? ? 為未來(lái)新版本的Javascript標(biāo)準(zhǔn)化做鋪墊郑叠。

如何判斷一個(gè)對(duì)象是否屬于某個(gè)類夜赵？? ??

使用instanceof （待完善）? ? if(a instanceof Person){? ? ? alert('yes');? ? }

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);

Javascript中，有一個(gè)函數(shù)蕾殴，執(zhí)行時(shí)對(duì)象查找時(shí)笑撞，永遠(yuǎn)不會(huì)去查找原型，這個(gè)函數(shù)是钓觉？? ? hasOwnProperty? ? ? ? javaScript中hasOwnProperty函數(shù)方法是返回一個(gè)布爾值茴肥，指出一個(gè)對(duì)象是否具有指定名稱的屬性。此方法無(wú)法檢查該對(duì)象的原型鏈中是否具有該屬性荡灾；該屬性必須是對(duì)象本身的一個(gè)成員瓤狐。? ? 使用方法：? ? object.hasOwnProperty(proName)? ? 其中參數(shù)object是必選項(xiàng)。一個(gè)對(duì)象的實(shí)例批幌。? ? proName是必選項(xiàng)础锐。一個(gè)屬性名稱的字符串值。? ? ? ? 如果 object 具有指定名稱的屬性逼裆，那么JavaScript中hasOwnProperty函數(shù)方法返回 true郁稍，反之則返回 false。

JSON 的了解胜宇？? ? ? ?

JSON(JavaScript Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式耀怜。? ? 它是基于JavaScript的一個(gè)子集恢着。數(shù)據(jù)格式簡(jiǎn)單, 易于讀寫, 占用帶寬小? ? 如：{"age":"12", "name":"back"}? ? ? ? JSON字符串轉(zhuǎn)換為JSON對(duì)象:? ? var obj =eval('('+ str +')');? ? var obj = str.parseJSON();? ? var obj = JSON.parse(str);? ? ? ? JSON對(duì)象轉(zhuǎn)換為JSON字符串：? ? var last=obj.toJSONString();? ? var last=JSON.stringify(obj)

?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。

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

defer和async杭煎、動(dòng)態(tài)創(chuàng)建DOM方式（用得最多）、按需異步載入js

?Ajax 是什么? 如何創(chuàng)建一個(gè)Ajax卒落？? ??

ajax的全稱：Asynchronous Javascript And XML羡铲。? ? 異步傳輸+js+xml。? ? ? ? 所謂異步儡毕，在這里簡(jiǎn)單地解釋就是：向服務(wù)器發(fā)送請(qǐng)求的時(shí)候也切，我們不必等待結(jié)果，而是可以同時(shí)做其他的事情妥曲，等到有了結(jié)果它自己會(huì)根據(jù)設(shè)定進(jìn)行后續(xù)操作贾费，與此同時(shí)，頁(yè)面是不會(huì)發(fā)生整頁(yè)刷新的檐盟，提高了用戶體驗(yàn)。? ? ? ? (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)局部刷新?

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ā)送包含未知字符的用戶輸入時(shí)太雨，POST 比 GET 更穩(wěn)定也更可靠

?同步和異步的區(qū)別?? ??

同步的概念應(yīng)該是來(lái)自于OS中關(guān)于同步的概念:不同進(jìn)程為協(xié)同完成某項(xiàng)工作而在先后次序上調(diào)整(通過(guò)阻塞,喚醒等方式).同步強(qiáng)調(diào)的是順序性.誰(shuí)先誰(shuí)后.異步則不存在這種順序性.? ? 同步：瀏覽器訪問(wèn)服務(wù)器請(qǐng)求，用戶看得到頁(yè)面刷新魁蒜，重新發(fā)請(qǐng)求,等請(qǐng)求完囊扳，頁(yè)面刷新，新內(nèi)容出現(xiàn)兜看，用戶看到新內(nèi)容,進(jìn)行下一步操作锥咸。? ? ? ? 異步：瀏覽器訪問(wèn)服務(wù)器請(qǐng)求，用戶正常操作细移，瀏覽器后端進(jìn)行請(qǐng)求她君。等請(qǐng)求完，頁(yè)面不刷新葫哗，新內(nèi)容也會(huì)出現(xiàn)缔刹，用戶看到新內(nèi)容。

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

jsonp劣针、 iframe校镐、window.name、window.postMessage捺典、服務(wù)器上設(shè)置代理頁(yè)面

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

document.write只能重繪整個(gè)頁(yè)面? ? innerHTML可以重繪頁(yè)面的一部分

?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贝室，唯一性

Jquery與jQuery UI 有啥區(qū)別？? ??

*jQuery是一個(gè)js庫(kù)仿吞，主要提供的功能是選擇器滑频，屬性修改和事件綁定等等。? ? ? ? *jQuery UI則是在jQuery的基礎(chǔ)上唤冈，利用jQuery的擴(kuò)展性峡迷，設(shè)計(jì)的插件。? ? 提供了一些常用的界面元素你虹，諸如對(duì)話框绘搞、拖動(dòng)行為彤避、改變大小行為等等### jquery 中如何將數(shù)組轉(zhuǎn)化為json字符串，然后再轉(zhuǎn)化回來(lái)看杭？? ? jQuery中沒(méi)有提供這個(gè)功能忠藤，所以你需要先編寫兩個(gè)jQuery的擴(kuò)展：? ? ? ? $.fn.stringifyArray = function(array) {? ? ? ? return JSON.stringify(array)? ? }? ? ? ? $.fn.parseArray = function(array) {? ? ? ? return JSON.parse(array)? ? }? ? ? ? 然后調(diào)用：? ? $("").stringifyArray(array)

針對(duì) jQuery 的優(yōu)化方法？? ??

*基于Class的選擇性的性能相對(duì)于Id選擇器開(kāi)銷很大楼雹，因?yàn)樾璞闅v所有DOM元素模孩。? ? ? ? *頻繁操作的DOM，先緩存起來(lái)再操作贮缅。用Jquery的鏈?zhǔn)秸{(diào)用更好榨咐。? ? 比如：var str=$("a").attr("href");? ? ? ? *for (var i = size; i < arr.length; i++) {}? ? for 循環(huán)每一次循環(huán)都查找了數(shù)組 (arr) 的.length 屬性，在開(kāi)始循環(huán)的時(shí)候設(shè)置一個(gè)變量來(lái)存儲(chǔ)這個(gè)數(shù)字谴供，可以讓循環(huán)跑得更快：? ? for (var i = size, length = arr.length; i < length; i++) {}

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

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

那些操作會(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ì)引發(fā)內(nèi)存泄漏螃宙。? ? 閉包蛮瞄、控制臺(tái)日志、循環(huán)（在兩個(gè)對(duì)象彼此引用且彼此保留時(shí)谆扎，就會(huì)產(chǎn)生一個(gè)循環(huán)）

?檢測(cè)瀏覽器版本版本有哪些方式挂捅？? ??

功能檢測(cè)、userAgent特征檢測(cè)? ? ? ? 比如：navigator.userAgent? ? //"Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36"

什么是Polyfill?? ??

polyfill 是“在舊版瀏覽器上復(fù)制標(biāo)準(zhǔn) API 的 JavaScript 補(bǔ)充”,可以動(dòng)態(tài)地加載 JavaScript 代碼或庫(kù)燕酷，在不支持這些標(biāo)準(zhǔn) API 的瀏覽器中模擬它們籍凝。? ? 例如，geolocation（地理位置）polyfill 可以在 navigator 對(duì)象上添加全局的 geolocation 對(duì)象苗缩，還能添加 getCurrentPosition 函數(shù)以及“坐標(biāo)”回調(diào)對(duì)象，? ? 所有這些都是 W3C 地理位置 API 定義的對(duì)象和函數(shù)声诸。因?yàn)?polyfill 模擬標(biāo)準(zhǔn) API酱讶，所以能夠以一種面向所有瀏覽器未來(lái)的方式針對(duì)這些 API 進(jìn)行開(kāi)發(fā)，? ? 一旦對(duì)這些 API 的支持變成絕對(duì)大多數(shù)彼乌，則可以方便地去掉 polyfill泻肯，無(wú)需做任何額外工作渊迁。?

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)容。代碼如下：var script=document.createElement("script");

script.type="text/javascript";

script.src="file.js";

document.getElementsByTagName("head")[0].appendChild(script);此技術(shù)的重點(diǎn)在于：無(wú)論在何處啟動(dòng)下載峡钓，文件額下載和運(yùn)行都不會(huì)阻塞其他頁(yè)面處理過(guò)程妓笙。即使在head里（除了用于下載文件的http鏈接）。

談一談你對(duì) ECMAScript6 的了解能岩？? ??

ECMAScript 6 是JavaScript語(yǔ)言的下一代標(biāo)準(zhǔn)寞宫，已經(jīng)在2015年6月正式發(fā)布了。? ? 它的目標(biāo)捧灰，是使得JavaScript語(yǔ)言可以用來(lái)編寫復(fù)雜的大型應(yīng)用程序淆九，成為企業(yè)級(jí)開(kāi)發(fā)語(yǔ)言。? ? 標(biāo)準(zhǔn)的制定者有計(jì)劃毛俏，以后每年發(fā)布一次標(biāo)準(zhǔn)炭庙，使用年份作為標(biāo)準(zhǔn)的版本。? ? 因?yàn)楫?dāng)前版本的ES6是在2015年發(fā)布的煌寇，所以又稱ECMAScript 2015焕蹄。? ? 也就是說(shuō)，ES6就是ES2015

?Object.is() 與原來(lái)的比較操作符“ ===”阀溶、“ ==”的區(qū)別腻脏？? ??

兩等號(hào)判等，會(huì)在比較時(shí)進(jìn)行類型轉(zhuǎn)換银锻；? ? 三等號(hào)判等(判斷嚴(yán)格)永品，比較時(shí)不進(jìn)行隱式類型轉(zhuǎn)換,（類型不同則會(huì)返回false）；? ? ? ? Object.is 在三等號(hào)判等的基礎(chǔ)上特別處理了 NaN 击纬、-0 和 +0 鼎姐，保證 -0 和 +0 不再相同，? ? 但 Object.is(NaN, NaN) 會(huì)返回 true.? ? ? ? Object.is 應(yīng)被認(rèn)為有其特殊的用途，而不能用它認(rèn)為它比其它的相等對(duì)比更寬松或嚴(yán)格炕桨。?

ECMAScript 6 怎么寫 class 饭尝，為何會(huì)出現(xiàn) class？? ? ES6的class可以看作只是一個(gè)語(yǔ)法糖献宫，它的絕大部分功能钥平，ES5都可以做到，新的class寫法只是讓對(duì)象原型的寫法更加清晰姊途、更像面向?qū)ο缶幊痰恼Z(yǔ)法而已涉瘾。? ? //定義類? ? class Point {? ? ? constructor(x,y) {? ? ? ? ? //構(gòu)造方法? ? ? ? ? this.x = x; //this關(guān)鍵字代表實(shí)例對(duì)象? ? ? ? ? this.y = y;? ? ? } toString() {? ? ? ? ? return '(' + this.x + ',' + this.y + ')';? ? ? }? ? }

前端頁(yè)面有哪三層構(gòu)成，分別是什么吭净？作用是什么睡汹？? ??

最準(zhǔn)確的網(wǎng)頁(yè)設(shè)計(jì)思路是把網(wǎng)頁(yè)分成三個(gè)層次，即：結(jié)構(gòu)層寂殉、表示層囚巴、行為層。? ? 網(wǎng)頁(yè)的結(jié)構(gòu)層（structural layer）由HTML或XHTML之類的標(biāo)記語(yǔ)言負(fù)責(zé)創(chuàng)建友扰。標(biāo)簽彤叉，也就是那些出現(xiàn)在尖括號(hào)里的單詞，對(duì)網(wǎng)頁(yè)內(nèi)容的語(yǔ)義含義做出了描述村怪，但這些標(biāo)簽不包含任何關(guān)于如何顯示有關(guān)內(nèi)容的信息秽浇。例如，P 標(biāo)簽表達(dá)了這樣一種語(yǔ)義：“這是一個(gè)文本段甚负〖砘溃”? ? 網(wǎng)頁(yè)的表示層（presentation layer）由CSS負(fù)責(zé)創(chuàng)建。 CSS對(duì)“如何顯示有關(guān)內(nèi)容”的問(wèn)題做出了回答梭域。? ? 網(wǎng)頁(yè)的行為層（behavior layer）負(fù)責(zé)回答“內(nèi)容應(yīng)該如何對(duì)事件做出反應(yīng)”這一問(wèn)題斑举。這是JavaScript語(yǔ)言和DOM主宰的領(lǐng)域。

?頁(yè)面重構(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ī)范編寫代碼? ? 設(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ù)讀寫)? ? 采用CDN來(lái)加速資源加載? ? 對(duì)于JS DOM的優(yōu)化? ? HTTP服務(wù)器的文件緩存

列舉IE與其他瀏覽器不一樣的特性迁酸？? ??

觸發(fā)事件的元素被認(rèn)為是目標(biāo)（target）先鱼。而在 IE 中，目標(biāo)包含在 event 對(duì)象的 srcElement 屬性奸鬓；? ? ? ? 獲取字符代碼焙畔、如果按鍵代表一個(gè)字符（shift、ctrl串远、alt除外）宏多，IE 的 keyCode 會(huì)返回字符代碼（Unicode），DOM 中按鍵的代碼和字符是分離的澡罚，要獲取字符代碼伸但，需要使用 charCode 屬性；? ? ? ? 阻止某個(gè)事件的默認(rèn)行為留搔，IE 中阻止某個(gè)事件的默認(rèn)行為更胖，必須將 returnValue 屬性設(shè)置為 false，Mozilla 中隔显，需要調(diào)用 preventDefault() 方法却妨；? ? ? ? 停止事件冒泡，IE 中阻止事件進(jìn)一步冒泡括眠，需要設(shè)置 cancelBubble 為 true彪标，Mozzilla 中，需要調(diào)用 stopPropagation()掷豺；

什么是Cookie 隔離捞烟？（或者說(shuō)：請(qǐng)求資源的時(shí)候不要讓它帶cookie怎么做）? ??

如果靜態(tài)文件都放在主域名下，那靜態(tài)文件請(qǐng)求的時(shí)候都帶有的cookie的數(shù)據(jù)提交給server的当船，非常浪費(fèi)流量题画，? ? 所以不如隔離開(kāi)。? ? ? ? 因?yàn)閏ookie有域的限制生年，因此不能跨域提交請(qǐng)求婴程，故使用非主要域名的時(shí)候，請(qǐng)求頭中就不會(huì)帶有cookie數(shù)據(jù)抱婉，? ? 這樣可以降低請(qǐng)求頭的大小档叔，降低請(qǐng)求時(shí)間，從而達(dá)到降低整體請(qǐng)求延時(shí)的目的蒸绩。? ? ? ? 同時(shí)這種方式不會(huì)將cookie傳入Web Server衙四，也減少了Web Server對(duì)cookie的處理分析環(huán)節(jié)，? ? 提高了webserver的http請(qǐng)求的解析速度患亿。

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

?優(yōu)雅降級(jí)：Web站點(diǎn)在所有新式瀏覽器中都能正常工作押逼，如果用戶使用的是老式瀏覽器，則代碼會(huì)針對(duì)舊版本的IE進(jìn)行降級(jí)處理了,使之在舊式瀏覽器上以某種形式降級(jí)體驗(yàn)卻不至于完全不能用惦界。? ? 如：border-shadow? ? ? ? 漸進(jìn)增強(qiáng)：從被所有瀏覽器支持的基本功能開(kāi)始挑格，逐步地添加那些只有新版本瀏覽器才支持的功能,向頁(yè)面增加不影響基礎(chǔ)瀏覽器的額外樣式和功能的。當(dāng)瀏覽器支持時(shí)沾歪，它們會(huì)自動(dòng)地呈現(xiàn)出來(lái)并發(fā)揮作用漂彤。? ? 如：默認(rèn)使用flash上傳，但如果瀏覽器支持 HTML5 的文件上傳功能灾搏，則使用HTML5實(shí)現(xiàn)更好的體驗(yàn)

?網(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)求（合并文件仰冠，合并圖片）。

?是否了解公鑰加密和私鑰加密蝶糯。? ??

一般情況下是指私鑰用于對(duì)數(shù)據(jù)進(jìn)行簽名洋只，公鑰用于對(duì)簽名進(jìn)行驗(yàn)證;? ? HTTP網(wǎng)站在瀏覽器端用公鑰加密敏感數(shù)據(jù)，然后在服務(wù)器端再用私鑰解密昼捍。

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

?html5提供的Websocket? ? 不可見(jiàn)的iframe? ? WebSocket通過(guò)Flash? ? XHR長(zhǎng)時(shí)間連接? ? XHR Multipart Streaming? ? script標(biāo)簽的長(zhǎng)時(shí)間連接(可跨域) ? ?

?對(duì)Node的優(yōu)點(diǎn)和缺點(diǎn)提出了自己的看法？? ??

*（優(yōu)點(diǎn)）因?yàn)镹ode是基于事件驅(qū)動(dòng)和無(wú)阻塞的妒茬，所以非常適合處理并發(fā)請(qǐng)求担锤，? ? ? 因此構(gòu)建在Node上的代理服務(wù)器相比其他技術(shù)實(shí)現(xiàn)（如Ruby）的服務(wù)器表現(xiàn)要好得多。? ? ? 此外乍钻，與Node代理服務(wù)器交互的客戶端代碼是由javascript語(yǔ)言編寫的肛循，? ? ? 因此客戶端和服務(wù)器端都用同一種語(yǔ)言編寫铭腕，這是非常美妙的事情。? ? ? ? *（缺點(diǎn)）Node是一個(gè)相對(duì)新的開(kāi)源項(xiàng)目多糠，所以不太穩(wěn)定累舷，它總是一直在變，? ? ? 而且缺少足夠多的第三方庫(kù)支持熬丧∷袼冢看起來(lái)，就像是Ruby/Rails當(dāng)年的樣子析蝴。?

?你有用過(guò)哪些前端性能優(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é)果票渠。減少IO讀取操作。? ? ? ? （6） 避免使用CSS Expression（css表達(dá)式)又稱Dynamic properties(動(dòng)態(tài)屬性)芬迄。? ? ? ? （7） 圖片預(yù)加載问顷，將樣式表放在頂部，將腳本放在底部? 加上時(shí)間戳禀梳。? ? ? ? （8） 避免在頁(yè)面的主體布局中使用table杜窄，table要等其中的內(nèi)容完全下載之后才會(huì)顯示出來(lái)，顯示比div+css布局慢出皇。? ? 對(duì)普通的網(wǎng)站有一個(gè)統(tǒng)一的思路羞芍，就是盡量向前端優(yōu)化、減少數(shù)據(jù)庫(kù)操作郊艘、減少磁盤IO荷科。向前端優(yōu)化指的是唯咬，在不影響功能和體驗(yàn)的情況下，能在瀏覽器執(zhí)行的不要在服務(wù)端執(zhí)行畏浆，能在緩存服務(wù)器上直接返回的不要到應(yīng)用服務(wù)器胆胰，程序能直接取得的結(jié)果不要到外部取得，本機(jī)內(nèi)能取得的數(shù)據(jù)不要到遠(yuǎn)程取刻获，內(nèi)存能取到的不要到磁盤取蜀涨，緩存中有的不要去數(shù)據(jù)庫(kù)查詢。減少數(shù)據(jù)庫(kù)操作指減少更新次數(shù)蝎毡、緩存結(jié)果減少查詢次數(shù)厚柳、將數(shù)據(jù)庫(kù)執(zhí)行的操作盡可能的讓你的程序完成（例如join查詢），減少磁盤IO指盡量不使用文件系統(tǒng)作為緩存沐兵、減少讀寫文件次數(shù)等别垮。程序優(yōu)化永遠(yuǎn)要優(yōu)化慢的部分，換語(yǔ)言是無(wú)法“優(yōu)化”的扎谎。

?http狀態(tài)碼有那些碳想？分別代表是什么意思？? ??

簡(jiǎn)單版? ? [? ? ? ? 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ù)）。? ? ]? ? ? ? 完整版? ? 1**(信息類)：表示接收到請(qǐng)求并且繼續(xù)處理? ? 100——客戶必須繼續(xù)發(fā)出請(qǐng)求? ? 101——客戶要求服務(wù)器根據(jù)請(qǐng)求轉(zhuǎn)換HTTP協(xié)議版本? ? ? ? 2**(響應(yīng)成功)：表示動(dòng)作被成功接收嗤放、理解和接受? ? 200——表明該請(qǐng)求被成功地完成思喊，所請(qǐng)求的資源發(fā)送回客戶端? ? 201——提示知道新文件的URL? ? 202——接受和處理、但處理未完成? ? 203——返回信息不確定或不完整? ? 204——請(qǐng)求收到次酌，但返回信息為空? ? 205——服務(wù)器完成了請(qǐng)求恨课，用戶代理必須復(fù)位當(dāng)前已經(jīng)瀏覽過(guò)的文件? ? 206——服務(wù)器已經(jīng)完成了部分用戶的GET請(qǐng)求? ? ? ? 3**(重定向類)：為了完成指定的動(dòng)作舆乔，必須接受進(jìn)一步處理? ? 300——請(qǐng)求的資源可在多處得到? ? 301——本網(wǎng)頁(yè)被永久性轉(zhuǎn)移到另一個(gè)URL? ? 302——請(qǐng)求的網(wǎng)頁(yè)被轉(zhuǎn)移到一個(gè)新的地址，但客戶訪問(wèn)仍繼續(xù)通過(guò)原始URL地址剂公，重定向拖吼，新的URL會(huì)在response中的Location中返回籍铁，瀏覽器將會(huì)使用新的URL發(fā)出新的Request增显。? ? 303——建議客戶訪問(wèn)其他URL或訪問(wèn)方式? ? 304——自從上次請(qǐng)求后，請(qǐng)求的網(wǎng)頁(yè)未修改過(guò)腿堤，服務(wù)器返回此響應(yīng)時(shí)士修，不會(huì)返回網(wǎng)頁(yè)內(nèi)容黔州，代表上次的文檔已經(jīng)被緩存了，還可以繼續(xù)使用? ? 305——請(qǐng)求的資源必須從服務(wù)器指定的地址得到? ? 306——前一版本HTTP中使用的代碼在辆，現(xiàn)行版本中不再使用? ? 307——申明請(qǐng)求的資源臨時(shí)性刪除? ? ? ? 4**(客戶端錯(cuò)誤類)：請(qǐng)求包含錯(cuò)誤語(yǔ)法或不能正確執(zhí)行? ? 400——客戶端請(qǐng)求有語(yǔ)法錯(cuò)誤证薇，不能被服務(wù)器所理解? ? 401——請(qǐng)求未經(jīng)授權(quán)，這個(gè)狀態(tài)代碼必須和WWW-Authenticate報(bào)頭域一起使用? ? HTTP 401.1 - 未授權(quán)：登錄失敗? ? 　　HTTP 401.2 - 未授權(quán)：服務(wù)器配置問(wèn)題導(dǎo)致登錄失敗? ? 　　HTTP 401.3 - ACL 禁止訪問(wèn)資源? ? 　　HTTP 401.4 - 未授權(quán)：授權(quán)被篩選器拒絕? ? HTTP 401.5 - 未授權(quán)：ISAPI 或 CGI 授權(quán)失敗? ? 402——保留有效ChargeTo頭響應(yīng)? ? 403——禁止訪問(wèn)匆篓，服務(wù)器收到請(qǐng)求浑度，但是拒絕提供服務(wù)? ? HTTP 403.1 禁止訪問(wèn)：禁止可執(zhí)行訪問(wèn)? ? 　　HTTP 403.2 - 禁止訪問(wèn)：禁止讀訪問(wèn)? ? 　　HTTP 403.3 - 禁止訪問(wèn)：禁止寫訪問(wèn)? ? 　　HTTP 403.4 - 禁止訪問(wèn)：要求 SSL? ? 　　HTTP 403.5 - 禁止訪問(wèn)：要求 SSL 128? ? 　　HTTP 403.6 - 禁止訪問(wèn)：IP 地址被拒絕? ? 　　HTTP 403.7 - 禁止訪問(wèn)：要求客戶證書? ? 　　HTTP 403.8 - 禁止訪問(wèn)：禁止站點(diǎn)訪問(wèn)? ? 　　HTTP 403.9 - 禁止訪問(wèn)：連接的用戶過(guò)多? ? 　　HTTP 403.10 - 禁止訪問(wèn)：配置無(wú)效? ? 　　HTTP 403.11 - 禁止訪問(wèn)：密碼更改? ? 　　HTTP 403.12 - 禁止訪問(wèn)：映射器拒絕訪問(wèn)? ? 　　HTTP 403.13 - 禁止訪問(wèn)：客戶證書已被吊銷? ? 　　HTTP 403.15 - 禁止訪問(wèn)：客戶訪問(wèn)許可過(guò)多? ? 　　HTTP 403.16 - 禁止訪問(wèn)：客戶證書不可信或者無(wú)效? ? HTTP 403.17 - 禁止訪問(wèn)：客戶證書已經(jīng)到期或者尚未生效? ? 404——一個(gè)404錯(cuò)誤表明可連接服務(wù)器，但服務(wù)器無(wú)法取得所請(qǐng)求的網(wǎng)頁(yè)鸦概，請(qǐng)求資源不存在箩张。eg：輸入了錯(cuò)誤的URL? ? 405——用戶在Request-Line字段定義的方法不允許? ? 406——根據(jù)用戶發(fā)送的Accept拖，請(qǐng)求資源不可訪問(wèn)? ? 407——類似401窗市，用戶必須首先在代理服務(wù)器上得到授權(quán)? ? 408——客戶端沒(méi)有在用戶指定的餓時(shí)間內(nèi)完成請(qǐng)求? ? 409——對(duì)當(dāng)前資源狀態(tài)先慷，請(qǐng)求不能完成? ? 410——服務(wù)器上不再有此資源且無(wú)進(jìn)一步的參考地址? ? 411——服務(wù)器拒絕用戶定義的Content-Length屬性請(qǐng)求? ? 412——一個(gè)或多個(gè)請(qǐng)求頭字段在當(dāng)前請(qǐng)求中錯(cuò)誤? ? 413——請(qǐng)求的資源大于服務(wù)器允許的大小? ? 414——請(qǐng)求的資源URL長(zhǎng)于服務(wù)器允許的長(zhǎng)度? ? 415——請(qǐng)求資源不支持請(qǐng)求項(xiàng)目格式? ? 416——請(qǐng)求中包含Range請(qǐng)求頭字段，在當(dāng)前請(qǐng)求資源范圍內(nèi)沒(méi)有range指示值咨察，請(qǐng)求也不包含If-Range請(qǐng)求頭字段? ? 417——服務(wù)器不滿足請(qǐng)求Expect頭字段指定的期望值论熙，如果是代理服務(wù)器，可能是下一級(jí)服務(wù)器不能滿足請(qǐng)求長(zhǎng)扎拣。? ? ? ? 5**(服務(wù)端錯(cuò)誤類)：服務(wù)器不能正確執(zhí)行一個(gè)正確的請(qǐng)求? ? HTTP 500 - 服務(wù)器遇到錯(cuò)誤赴肚，無(wú)法完成請(qǐng)求? ? 　　HTTP 500.100 - 內(nèi)部服務(wù)器錯(cuò)誤 - ASP 錯(cuò)誤? ? 　　HTTP 500-11 服務(wù)器關(guān)閉? ? 　　HTTP 500-12 應(yīng)用程序重新啟動(dòng)? ? 　　HTTP 500-13 - 服務(wù)器太忙? ? 　　HTTP 500-14 - 應(yīng)用程序無(wú)效? ? 　　HTTP 500-15 - 不允許請(qǐng)求 global.asa? ? 　　Error 501 - 未實(shí)現(xiàn)? ? HTTP 502 - 網(wǎng)關(guān)錯(cuò)誤? ? HTTP 503：由于超載或停機(jī)維護(hù)，服務(wù)器目前無(wú)法使用二蓝，一段時(shí)間后可能恢復(fù)正常

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

詳細(xì)版：? ? 1刊愚、瀏覽器會(huì)開(kāi)啟一個(gè)線程來(lái)處理這個(gè)請(qǐng)求踊跟，對(duì) URL 分析判斷如果是 http 協(xié)議就按照 Web 方式來(lái)處理;? ? 2、調(diào)用瀏覽器內(nèi)核中的對(duì)應(yīng)方法，比如 WebView 中的 loadUrl 方法;? ? 3商玫、通過(guò)DNS解析獲取網(wǎng)址的IP地址箕憾，設(shè)置 UA 等信息發(fā)出第二個(gè)GET請(qǐng)求;? ? 4、進(jìn)行HTTP協(xié)議會(huì)話拳昌，客戶端發(fā)送報(bào)頭(請(qǐng)求報(bào)頭);? ? 5袭异、進(jìn)入到web服務(wù)器上的 Web Server，如 Apache炬藤、Tomcat御铃、Node.JS 等服務(wù)器;? ? 6、進(jìn)入部署好的后端應(yīng)用沈矿，如 PHP上真、Java、JavaScript羹膳、Python 等睡互，找到對(duì)應(yīng)的請(qǐng)求處理;? ? 7、處理結(jié)束回饋報(bào)頭陵像，此處如果瀏覽器訪問(wèn)過(guò)就珠，緩存上有對(duì)應(yīng)資源，會(huì)與服務(wù)器最后修改時(shí)間對(duì)比醒颖，一致則返回304;? ? 8嗓违、瀏覽器開(kāi)始下載html文檔(響應(yīng)報(bào)頭，狀態(tài)碼200)图贸，同時(shí)使用緩存;? ? 9、文檔樹(shù)建立冕广，根據(jù)標(biāo)記請(qǐng)求所需指定MIME類型的文件（比如css疏日、js）,同時(shí)設(shè)置了cookie;? ? 10、頁(yè)面開(kāi)始渲染DOM撒汉，JS根據(jù)DOM API操作DOM,執(zhí)行事件綁定等沟优，頁(yè)面顯示完成。? ? ? ??

簡(jiǎn)潔版：? ? 瀏覽器根據(jù)請(qǐng)求的URL交給DNS域名解析睬辐，找到真實(shí)IP挠阁，向服務(wù)器發(fā)起請(qǐng)求；? ? 服務(wù)器交給后臺(tái)處理完成后返回?cái)?shù)據(jù)溯饵，瀏覽器接收文件（HTML侵俗、JS、CSS丰刊、圖象等）隘谣；? ? 瀏覽器對(duì)加載到的資源（HTML、JS啄巧、CSS等）進(jìn)行語(yǔ)法解析寻歧，建立相應(yīng)的內(nèi)部數(shù)據(jù)結(jié)構(gòu)（如HTML的DOM）掌栅；? ? 載入解析到的資源文件，渲染頁(yè)面码泛，完成猾封。

對(duì)前端工程師這個(gè)職位是怎么樣理解的？它的前景會(huì)怎么樣噪珊？? ??

前端是最貼近用戶的程序員晌缘，比后端、數(shù)據(jù)庫(kù)卿城、產(chǎn)品經(jīng)理枚钓、運(yùn)營(yíng)、安全都近瑟押。? ? 1搀捷、實(shí)現(xiàn)界面交互? ? 2、提升用戶體驗(yàn)? ? 3多望、有了Node.js嫩舟，前端可以實(shí)現(xiàn)服務(wù)端的一些事情? ? ? ? 前端是最貼近用戶的程序員，前端的能力就是能讓產(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)和用戶體驗(yàn)颅痊；? ? ? ? 處理hack殖熟，兼容、寫出優(yōu)美的代碼格式斑响；? ? ? ? 針對(duì)服務(wù)器的優(yōu)化菱属、擁抱最新前端技術(shù)。

平時(shí)如何管理你的項(xiàng)目舰罚？? ??

先期團(tuán)隊(duì)必須確定好全局樣式（globe.css）纽门，編碼模式(utf-8) 等；? ? ? ? 編寫習(xí)慣必須一致（例如都是采用繼承式的寫法沸停，單樣式都寫成一行）膜毁；? ? ? ? 標(biāo)注樣式編寫人，各模塊都及時(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)站？? ??

ES6\WebAssembly\Node\MVVM\Web Components\React\React Native\Webpack 組件化? ? 網(wǎng)站：CSDN,慕課败玉，博客園敌土，簡(jiǎn)書，稀土掘金,qdfuns等

移動(dòng)端（Android IOS）怎么做好用戶體驗(yàn)?? ??

清晰的視覺(jué)縱線运翼、? ? 信息的分組返干、極致的減法、? ? 利用選擇代替輸入血淌、? ? 標(biāo)簽及文字的排布方式矩欠、? ? 依靠明文確認(rèn)密碼、? ? 合理的鍵盤利用悠夯、

前端 MVC癌淮、MVVM!

MVC? ? ? ? 模型（Model）：數(shù)據(jù)保存? ? 視圖（View）：用戶界面? ? 控制器（Controller）：業(yè)務(wù)邏輯? ? (1)View 傳送指令到 Controller? ? (2)Controller 完成業(yè)務(wù)邏輯后，要求 Model 改變狀態(tài)? ? (3)Model 將新的數(shù)據(jù)發(fā)送到 View 沦补，用戶得到反饋所有通信都是單向的乳蓄。? ? MVVM? ? 模型（Model）? ? 視圖（View）? ? 視圖模型（ViewModel）? ? (1)各部分間都是雙向通信? ? (2)View 與 Model 不發(fā)生聯(lián)系，都通過(guò) ViewModel 傳遞? ? (3)View 非常薄夕膀，不部署任何業(yè)務(wù)邏輯虚倒，稱為“被動(dòng)視圖”（Passive View），即沒(méi)有任何主動(dòng)性产舞；而 ViewModel 非常厚裹刮，所有邏輯都部署在那里。? ? 采用雙向綁定（data-binding）：View 的變動(dòng)庞瘸，自動(dòng)反映在 ViewModel ，反之亦然赠叼。

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

盡量使用css3動(dòng)畫擦囊，開(kāi)啟硬件加速。適當(dāng)使用touch事件代替click事件嘴办。避免使用css3漸變陰影效果瞬场。 盡可能少的使用box-shadow與gradients。box-shadow與gradients往往都是頁(yè)面的性能殺手

談?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

?線程與進(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ū)別。