【轉(zhuǎn)載】CSDN - 張林blog
http://blog.csdn.net/XIAOZHUXMEN/article/category/6206651
這個博客幾篇總結(jié)也不錯。
修改增加了一些問題，并添加了一些與知識點(diǎn)相關(guān)的文章鏈接，是一些個人覺得比較容易看懂的文章，方便理解，如阮一峰的博客中一些文章。
position的值， relative和absolute分別是相對于誰進(jìn)行定位的？
absolute:生成絕對定位的元素， 相對于最近一級的 定位不是 static 的父元素來進(jìn)行定位。fixed（老IE不支持）生成絕對定位的元素，通常相對于瀏覽器窗口或 frame 進(jìn)行定位。relative生成相對定位的元素，相對于其在普通流中的位置進(jìn)行定位。static默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中sticky生成粘性定位的元素，容器的位置根據(jù)正常文檔流計算得出
如何解決跨域問題
JSONP：
原理是：動態(tài)插入script標(biāo)簽，通過script標(biāo)簽引入一個js文件，這個js文件載入成功后會執(zhí)行我們在url參數(shù)中指定的函數(shù)，并且會把我們需要的json數(shù)據(jù)作為參數(shù)傳入。
由于同源策略的限制，XmlHttpRequest只允許請求當(dāng)前源（域名、協(xié)議、端口）的資源，為了實(shí)現(xiàn)跨域請求，可以通過script標(biāo)簽實(shí)現(xiàn)跨域請求，然后在服務(wù)端輸出JSON數(shù)據(jù)并執(zhí)行回調(diào)函數(shù)，從而解決了跨域的數(shù)據(jù)請求。
優(yōu)點(diǎn)是兼容性好，簡單易用，支持瀏覽器與服務(wù)器雙向通信。缺點(diǎn)是只支持GET請求。
CORS
跨域資源共享 CORS 詳解
服務(wù)器端對于CORS的支持，主要就是通過設(shè)置Access-Control-Allow-Origin來進(jìn)行的。如果瀏覽器檢測到相應(yīng)的設(shè)置，就可以允許Ajax進(jìn)行跨域的訪問。
通過修改document.domain來跨子域
將子域和主域的document.domain設(shè)為同一個主域.前提條件：這兩個域名必須屬于同一個基礎(chǔ)域名!而且所用的協(xié)議，端口都要一致，否則無法利用document.domain進(jìn)行跨域
主域相同的使用document.domain
使用window.name來進(jìn)行跨域
window對象有個name屬性，該屬性有個特征：即在一個窗口(window)的生命周期內(nèi),窗口載入的所有的頁面都是共享一個window.name的，每個頁面對window.name都有讀寫的權(quán)限，window.name是持久存在一個窗口載入過的所有頁面中的
使用HTML5中新引進(jìn)的window.postMessage方法來跨域傳送數(shù)據(jù)
還有flash、在服務(wù)器上設(shè)置代理頁面等跨域方式。個人認(rèn)為window.name的方法既不復(fù)雜，也能兼容到幾乎所有瀏覽器，這真是極好的一種跨域方法。
談?wù)勀銓ebpack的看法
WebPack 是一個模塊打包工具，你可以使用WebPack管理你的模塊依賴，并編繹輸出模塊們所需的靜態(tài)文件。它能夠很好地管理、打包Web開發(fā)中所用到的HTML、[JavaScript](http://lib.csdn.net/base/javascript "JavaScript知識庫")、CSS以及各種靜態(tài)文件（圖片、字體等），讓開發(fā)過程更加高效。對于不同類型的資源，webpack有對應(yīng)的模塊加載器。webpack模塊打包器會分析模塊間的依賴關(guān)系，最后 生成了優(yōu)化且合并后的靜態(tài)資源。
webpack的兩大特色：
1.code splitting（可以自動完成）
2.loader 可以處理各種類型的靜態(tài)文件，并且支持串聯(lián)操作
webpack 是以commonJS的形式來書寫腳本滴，但對 AMD/CMD 的支持也很全面，方便舊項(xiàng)目進(jìn)行代碼遷移。
webpack具有requireJs和browserify的功能，但仍有很多自己的新特性：
對 CommonJS 、 AMD 、ES6的語法做了兼容
對js、css、圖片等資源文件都支持打包
串聯(lián)式模塊加載器以及插件機(jī)制，讓其具有更好的靈活性和擴(kuò)展性，例如提供對CoffeeScript、ES6的支持
有獨(dú)立的配置文件webpack.config.js
可以將代碼切割成不同的chunk，實(shí)現(xiàn)按需加載，降低了初始化時間
支持 SourceUrls 和 SourceMaps，易于調(diào)試
具有強(qiáng)大的Plugin接口，大多是內(nèi)部插件，使用起來比較靈活
webpack 使用異步 IO 并具有多級緩存。這使得 webpack 很快且在增量編譯上更加快
說說TCP傳輸?shù)娜挝帐炙拇螕]手策略
為了準(zhǔn)確無誤地把數(shù)據(jù)送達(dá)目標(biāo)處，TCP協(xié)議采用了三次握手策略。用TCP協(xié)議把數(shù)據(jù)包送出去后，TCP不會對傳送 后的情況置之不理，它一定會向?qū)Ψ酱_認(rèn)是否成功送達(dá)。握手過程中使用了TCP的標(biāo)志：SYN和ACK。
發(fā)送端首先發(fā)送一個帶SYN標(biāo)志的數(shù)據(jù)包給對方。接收端收到后，回傳一個帶有SYN/ACK標(biāo)志的數(shù)據(jù)包以示傳達(dá)確認(rèn)信息。
最后，發(fā)送端再回傳一個帶ACK標(biāo)志的數(shù)據(jù)包，代表“握手”結(jié)束。
若在握手過程中某個階段莫名中斷，TCP協(xié)議會再次以相同的順序發(fā)送相同的數(shù)據(jù)包。
斷開一個TCP連接則需要“四次揮手”：
第一次揮手：主動關(guān)閉方發(fā)送一個
FIN，用來關(guān)閉主動方到被動關(guān)閉方的數(shù)據(jù)傳送，也就是主動關(guān)閉方告訴被動關(guān)閉方：我已經(jīng)不 會再給你發(fā)數(shù)據(jù)了(當(dāng)然，在fin包之前發(fā)送出去的數(shù)據(jù)，如果沒有收到對應(yīng)的ack確認(rèn)報文，主動關(guān)閉方依然會重發(fā)這些數(shù)據(jù))，但是，此時主動關(guān)閉方還可 以接受數(shù)據(jù)。第二次揮手：被動關(guān)閉方收到
FIN包后，發(fā)送一個ACK給對方，確認(rèn)序號為收到序號+1（與SYN相同，一個FIN占用一個序號）。第三次揮手：被動關(guān)閉方發(fā)送一個
FIN，用來關(guān)閉被動關(guān)閉方到主動關(guān)閉方的數(shù)據(jù)傳送，也就是告訴主動關(guān)閉方，我的數(shù)據(jù)也發(fā)送完了，不會再給你發(fā)數(shù)據(jù)了。第四次揮手：主動關(guān)閉方收到
FIN后，發(fā)送一個ACK給被動關(guān)閉方，確認(rèn)序號為收到序號+1，至此，完成四次揮手。
TCP和UDP的區(qū)別
TCP（Transmission Control Protocol，傳輸控制協(xié)議）是基于連接的協(xié)議，也就是說，在正式收發(fā)數(shù)據(jù)前，必須和對方建立可靠的連接。一個TCP連接必須要經(jīng)過三次“對話”才能建立起來
UDP（User Data Protocol，用戶數(shù)據(jù)報協(xié)議）是與TCP相對應(yīng)的協(xié)議。它是面向非連接的協(xié)議，它不與對方建立連接，而是直接就把數(shù)據(jù)包發(fā)送過去！
UDP適用于一次只傳送少量數(shù)據(jù)、對可靠性要求不高的應(yīng)用環(huán)境。
說說你對作用域鏈的理解
作用域鏈的作用是保證執(zhí)行環(huán)境里有權(quán)訪問的變量和函數(shù)是有序的，作用域鏈的變量只能向上訪問，變量訪問到window對象即被終止，作用域鏈向下訪問變量是不被允許的。
創(chuàng)建ajax過程
(1)創(chuàng)建XMLHttpRequest對象,也就是創(chuàng)建一個異步調(diào)用對象.
(2)創(chuàng)建一個新的HTTP請求,并指定該HTTP請求的方法、URL及驗(yàn)證信息.
(3)設(shè)置響應(yīng)HTTP請求狀態(tài)變化的函數(shù).
(4)發(fā)送HTTP請求.
(5)獲取異步調(diào)用返回的數(shù)據(jù).
(6)使用JavaScript和DOM實(shí)現(xiàn)局部刷新.
漸進(jìn)增強(qiáng)和優(yōu)雅降級
漸進(jìn)增強(qiáng) ：針對低版本瀏覽器進(jìn)行構(gòu)建頁面，保證最基本的功能，然后再針對高級瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)。
優(yōu)雅降級 ：一開始就構(gòu)建完整的功能，然后再針對低版本瀏覽器進(jìn)行兼容。
常見web安全及防護(hù)原理
sql注入原理
就是通過把SQL命令插入到Web表單遞交或輸入域名或頁面請求的查詢字符串，最終達(dá)到欺騙服務(wù)器執(zhí)行惡意的SQL命令。
總的來說有以下幾點(diǎn)：
1.永遠(yuǎn)不要信任用戶的輸入，要對用戶的輸入進(jìn)行校驗(yàn)，可以通過正則表達(dá)式，或限制長度，對單引號和雙"-"進(jìn)行轉(zhuǎn)換等。
2.永遠(yuǎn)不要使用動態(tài)拼裝SQL，可以使用參數(shù)化的SQL或者直接使用存儲過程進(jìn)行數(shù)據(jù)查詢存取。
3.永遠(yuǎn)不要使用管理員權(quán)限的數(shù)據(jù)庫連接，為每個應(yīng)用使用單獨(dú)的權(quán)限有限的數(shù)據(jù)庫連接。
4.不要把機(jī)密信息明文存放，請加密或者h(yuǎn)ash掉密碼和敏感的信息。
XSS原理及防范
Xss(cross-site scripting)攻擊指的是攻擊者往Web頁面里插入惡意 html標(biāo)簽或者javascript代碼。比如：攻擊者在論壇中放一個
看似安全的鏈接，騙取用戶點(diǎn)擊后，竊取cookie中的用戶私密信息；或者攻擊者在論壇中加一個惡意表單，
當(dāng)用戶提交表單的時候，卻把信息傳送到攻擊者的服務(wù)器中，而不是用戶原本以為的信任站點(diǎn)。
XSS防范方法：
1，代碼里對用戶輸入的地方和變量都需要仔細(xì)檢查長度和對”<”,”>”,”;”,”’”等字符做過濾；其次任何內(nèi)容寫到頁面之前都必須加以encode，避免不小心把html tag 弄出來。這一個層面做好，至少可以堵住超過一半的XSS 攻擊。
2，避免直接在cookie 中泄露用戶隱私，例如email、密碼等等。
3，通過使cookie 和系統(tǒng)ip 綁定來降低cookie 泄露后的危險。這樣攻擊者得到的cookie 沒有實(shí)際價值，不可能拿來重放。
如果網(wǎng)站不需要再瀏覽器端對cookie 進(jìn)行操作，可以在Set-Cookie 末尾加上HttpOnly 來防止javascript 代碼直接獲取cookie 。
盡量采用POST 而非GET 提交表單
XSS與CSRF有什么區(qū)別嗎？
XSS是獲取信息，不需要提前知道其他用戶頁面的代碼和數(shù)據(jù)包。CSRF是代替用戶完成指定的動作，需要知道其他用戶頁面的代碼和數(shù)據(jù)包。
要完成一次CSRF攻擊，受害者必須依次完成兩個步驟：
1,登錄受信任網(wǎng)站A，并在本地生成Cookie。
2,在不登出A的情況下，訪問危險網(wǎng)站B。
CSRF的防御
服務(wù)端的
CSRF方式方法很多樣，但總的思想都是一致的，就是在客戶端頁面增加偽隨機(jī)數(shù)。通過驗(yàn)證碼的方法
HTTP和HTTPS
HTTP協(xié)議通常承載于TCP協(xié)議之上，在HTTP和TCP之間添加一個安全協(xié)議層（SSL或TSL），這個時候，就成了我們常說的HTTPS。
默認(rèn)HTTP的端口號為80，HTTPS的端口號為443。
為什么HTTPS安全
因?yàn)榫W(wǎng)絡(luò)請求需要中間有很多的服務(wù)器路由器的轉(zhuǎn)發(fā)。中間的節(jié)點(diǎn)都可能篡改信息，而如果使用HTTPS，密鑰在你和終點(diǎn)站才有。https之所以比http安全，是因?yàn)樗?code>ssl/tls協(xié)議傳輸。它包含證書，卸載，流量轉(zhuǎn)發(fā)，負(fù)載均衡，頁面適配，瀏覽器適配，refer傳遞等。保障了傳輸過程的安全性
對前端模塊化的認(rèn)識
Javascript垃圾回收方法
標(biāo)記清除（mark and sweep）
這是JavaScript最常見的垃圾回收方式，當(dāng)變量進(jìn)入執(zhí)行環(huán)境的時候，比如函數(shù)中聲明一個變量，垃圾回收器將其標(biāo)記為“進(jìn)入環(huán)境”，當(dāng)變量離開環(huán)境的時候（函數(shù)執(zhí)行結(jié)束）將其標(biāo)記為“離開環(huán)境”。
垃圾回收器會在運(yùn)行的時候給存儲在內(nèi)存中的所有變量加上標(biāo)記，然后去掉環(huán)境中的變量以及被環(huán)境中變量所引用的變量（閉包），在這些完成之后仍存在標(biāo)記的就是要刪除的變量了
引用計數(shù)(reference counting)
在低版本IE中經(jīng)常會出現(xiàn)內(nèi)存泄露，很多時候就是因?yàn)槠洳捎靡糜嫈?shù)方式進(jìn)行垃圾回收。引用計數(shù)的策略是跟蹤記錄每個值被使用的次數(shù)，當(dāng)聲明了一個 變量并將一個引用類型賦值給該變量的時候這個值的引用次數(shù)就加1，如果該變量的值變成了另外一個，則這個值得引用次數(shù)減1，當(dāng)這個值的引用次數(shù)變?yōu)?的時 候，說明沒有變量在使用，這個值沒法被訪問了，因此可以將其占用的空間回收，這樣垃圾回收器會在運(yùn)行的時候清理掉引用次數(shù)為0的值占用的空間。
在IE中雖然JavaScript對象通過標(biāo)記清除的方式進(jìn)行垃圾回收，但BOM與DOM對象卻是通過引用計數(shù)回收垃圾的，
也就是說只要涉及BOM及DOM就會出現(xiàn)循環(huán)引用問題。
你覺得前端工程的價值體現(xiàn)在哪
為簡化用戶使用提供技術(shù)支持（交互部分）
為多個瀏覽器兼容性提供支持
為提高用戶瀏覽速度（瀏覽器性能）提供支持
為跨平臺或者其他基于webkit或其他渲染引擎的應(yīng)用提供支持
為展示數(shù)據(jù)提供支持（數(shù)據(jù)接口）
談?wù)勑阅軆?yōu)化問題
代碼層面：避免使用css表達(dá)式，避免使用高級選擇器，通配選擇器。
緩存利用：緩存Ajax，使用CDN，使用外部js和css文件以便緩存，添加Expires頭，服務(wù)端配置Etag，減少DNS查找等
請求數(shù)量：合并樣式和腳本，使用css圖片精靈，初始首屏之外的圖片資源按需加載，靜態(tài)資源延遲加載。
請求帶寬：壓縮文件，開啟GZIP，
代碼層面的優(yōu)化
用
hash-table來優(yōu)化查找少用全局變量
用
innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能用
setTimeout來避免頁面失去響應(yīng)緩存DOM節(jié)點(diǎn)查找的結(jié)果
避免使用CSS Expression
避免全局查詢
避免使用with(with會創(chuàng)建自己的作用域，會增加作用域鏈長度)
多個變量聲明合并
避免圖片和iFrame等的空Src。空Src會重新加載當(dāng)前頁面，影響速度和效率
盡量避免寫在HTML標(biāo)簽中寫Style屬性
移動端性能優(yōu)化
- 盡量使用css3動畫，開啟硬件加速。
- 適當(dāng)使用
touch事件代替click事件。 - 避免使用
css3漸變陰影效果。 - 可以用
transform: translateZ(0)來開啟硬件加速。 - 不濫用Float。Float在渲染時計算量比較大，盡量減少使用
- 不濫用Web字體。Web字體需要下載，解析，重繪當(dāng)前頁面，盡量減少使用。
- 合理使用requestAnimationFrame動畫代替setTimeout
- CSS中的屬性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）會觸發(fā)GPU渲染，請合理使用。過渡使用會引發(fā)手機(jī)過耗電增加
- PC端的在移動端同樣適用
相關(guān)閱讀：如何做到一秒渲染一個移動頁面
什么是Etag？
當(dāng)發(fā)送一個服務(wù)器請求時，瀏覽器首先會進(jìn)行緩存過期判斷。瀏覽器根據(jù)緩存過期時間判斷緩存文件是否過期。
情景一：若沒有過期，則不向服務(wù)器發(fā)送請求，直接使用緩存中的結(jié)果，此時我們在瀏覽器控制臺中可以看到 200 OK(from cache) ，此時的情況就是完全使用緩存，瀏覽器和服務(wù)器沒有任何交互的。
情景二：若已過期，則向服務(wù)器發(fā)送請求，此時請求中會帶上①中設(shè)置的文件修改時間，和Etag
然后，進(jìn)行資源更新判斷。服務(wù)器根據(jù)瀏覽器傳過來的文件修改時間，判斷自瀏覽器上一次請求之后，文件是不是沒有被修改過；根據(jù)Etag，判斷文件內(nèi)容自上一次請求之后，有沒有發(fā)生變化
情形一：若兩種判斷的結(jié)論都是文件沒有被修改過，則服務(wù)器就不給瀏覽器發(fā)index.html的內(nèi)容了，直接告訴它，文件沒有被修改過，你用你那邊的緩存吧—— 304 Not Modified，此時瀏覽器就會從本地緩存中獲取index.html的內(nèi)容。此時的情況叫協(xié)議緩存，瀏覽器和服務(wù)器之間有一次請求交互。
情形二：若修改時間和文件內(nèi)容判斷有任意一個沒有通過，則服務(wù)器會受理此次請求，之后的操作同①
① 只有g(shù)et請求會被緩存，post請求不會
Expires和Cache-Control
Expires要求客戶端和服務(wù)端的時鐘嚴(yán)格同步。HTTP1.1引入Cache-Control來克服Expires頭的限制。如果max-age和Expires同時出現(xiàn)，則max-age有更高的優(yōu)先級。
Cache-Control: no-cache, private, max-age=0
ETag: "6e1e-55dd65da481c0-gzip"
Expires: Thu, 15 Apr 2014 20:00:00 GMT
Pragma: private
Last-Modified:Mon, 13 Nov 2017 05:15:59 GMT
ETag應(yīng)用:
Etag由服務(wù)器端生成，客戶端通過If-Match或者說If-None-Match這個條件判斷請求來驗(yàn)證資源是否修改。常見的是使用If-None-Match。請求一個文件的流程可能如下：
====第一次請求===
1.客戶端發(fā)起 HTTP GET 請求一個文件；
2.服務(wù)器處理請求，返回文件內(nèi)容和一堆Header，當(dāng)然包括Etag(例如"2e681a-6-5d044840")(假設(shè)服務(wù)器支持Etag生成和已經(jīng)開啟了Etag).狀態(tài)碼200
====第二次請求===
客戶端發(fā)起 HTTP GET 請求一個文件，注意這個時候客戶端同時發(fā)送一個If-None-Match頭，這個頭的內(nèi)容就是第一次請求時服務(wù)器返回的Etag：2e681a-6-5d0448402.服務(wù)器判斷發(fā)送過來的Etag和計算出來的Etag匹配，因此If-None-Match為False，不返回200，返回304，客戶端繼續(xù)使用本地緩存；流程很簡單，問題是，如果服務(wù)器又設(shè)置了Cache-Control:max-age和Expires呢，怎么辦
答案: 同時使用，也就是說在完全匹配If-Modified-Since和If-None-Match，即檢查完Last-Modified和Etag之后，服務(wù)器才能返回304.(不要陷入到底使用誰的問題怪圈)
為什么使用Etag請求頭?
Etag 主要為了解決 Last-Modified 無法解決的一些問題。
棧和隊(duì)列的區(qū)別?
隊(duì)列先進(jìn)先出，棧先進(jìn)后出。
棧只允許在表尾一端進(jìn)行插入和刪除，而隊(duì)列只允許在表尾一端進(jìn)行插入，在表頭一端進(jìn)行刪除
快速 排序的思想并實(shí)現(xiàn)一個快排？
“快速排序”的思想很簡單，整個排序過程只需要三步：
（1）在數(shù)據(jù)集之中，找一個基準(zhǔn)點(diǎn)
（2）建立兩個數(shù)組，分別存儲左邊和右邊的數(shù)組
（3）利用遞歸進(jìn)行下次比較
<script type="text/javascript">
function quickSort(arr){
if(arr.length<=1){
return arr;//如果數(shù)組只有一個數(shù)，就直接返回；
}
var num = Math.floor(arr.length/2);//找到中間數(shù)的索引值，如果是浮點(diǎn)數(shù)，則向下取整
var numValue = arr.splice(num,1);//找到中間數(shù)的值
var left = [];
var right = [];
for(var i=0;i<arr.length;i++){
if(arr[i]<numValue){
left.push(arr[i]);//基準(zhǔn)點(diǎn)的左邊的數(shù)傳到左邊數(shù)組
}
else{
right.push(arr[i]);//基準(zhǔn)點(diǎn)的右邊的數(shù)傳到右邊數(shù)組
}
}
return quickSort(left).concat([numValue],quickSort(right));//遞歸不斷重復(fù)比較
}
alert(quickSort([32,45,37,16,2,87]));//彈出“2,16,32,37,45,87”
</script>
ES6的了解
新增模板字符串（為JavaScript提供了簡單的字符串插值功能）、箭頭函數(shù)（操作符左邊為輸入的參數(shù)，而右邊則是進(jìn)行的操作以及返回的值Inputs=>outputs。）、for-of（用來遍歷數(shù)據(jù)—例如數(shù)組中的值。）arguments對象可被不定參數(shù)和默認(rèn)參數(shù)完美代替。ES6將promise對象納入規(guī)范，提供了原生的Promise對象。增加了let和const命令，用來聲明變量。增加了塊級作用域。let命令實(shí)際上就增加了塊級作用域。ES6規(guī)定，var命令和function命令聲明的全局變量，屬于全局對象的屬性；let命令、const命令、class命令聲明的全局變量，不屬于全局對象的屬性。。還有就是引入module模塊的概念
js繼承方式及其優(yōu)缺點(diǎn)
原型鏈繼承的缺點(diǎn)
一是字面量重寫原型會中斷關(guān)系，使用引用類型的原型，并且子類型還無法給超類型傳遞參數(shù)。
借用構(gòu)造函數(shù)（類式繼承）
借用構(gòu)造函數(shù)雖然解決了剛才兩種問題，但沒有原型，則復(fù)用無從談起。所以我們需要原型鏈+借用構(gòu)造函數(shù)的模式，這種模式稱為組合繼承
組合式繼承
組合式繼承是比較常用的一種繼承方法，其背后的思路是 使用原型鏈實(shí)現(xiàn)對原型屬性和方法的繼承，而通過借用構(gòu)造函數(shù)來實(shí)現(xiàn)對實(shí)例屬性的繼承。這樣，既通過在原型上定義方法實(shí)現(xiàn)了函數(shù)復(fù)用，又保證每個實(shí)例都有它自己的屬性。
關(guān)于Http 2.0 你知道多少？
HTTP/2引入了“服務(wù)端推（server push）”的概念，它允許服務(wù)端在客戶端需要數(shù)據(jù)之前就主動地將數(shù)據(jù)發(fā)送到客戶端緩存中，從而提高性能。
HTTP/2提供更多的加密支持
HTTP/2使用多路技術(shù)，允許多個消息在一個連接上同時交差。
它增加了頭壓縮（header compression），因此即使非常小的請求，其請求和響應(yīng)的header都只會占用很小比例的帶寬。
defer和async
defer并行加載js文件，會按照頁面上script標(biāo)簽的順序執(zhí)行
async并行加載js文件，下載完成立即執(zhí)行，不會按照頁面上script標(biāo)簽的順序執(zhí)行
談?wù)劯雍颓宄?/h4>
浮動的框可以向左或向右移動，直到他的外邊緣碰到包含框或另一個浮動框的邊框?yàn)橹埂Ｓ捎诟涌虿辉谖臋n的普通流中，所以文檔的普通流的塊框表現(xiàn)得就像浮動框不存在一樣。浮動的塊框會漂浮在文檔普通流的塊框上。
如何評價AngularJS和BackboneJS
backbone具有依賴性，依賴underscore.js。Backbone + Underscore + jQuery(or Zepto) 就比一個[AngularJS](http://lib.csdn.net/base/angularjs) 多出了2 次HTTP請求.
Backbone的Model沒有與UI視圖數(shù)據(jù)綁定，而是需要在View中自行操作DOM來更新或讀取UI數(shù)據(jù)。AngularJS與此相反，Model直接與UI視圖綁定，Model與UI視圖的關(guān)系，通過directive封裝，AngularJS內(nèi)置的通用directive，就能實(shí)現(xiàn)大部分操作了，也就是說，基本不必關(guān)心Model與UI視圖的關(guān)系，直接操作Model就行了，UI視圖自動更新。
AngularJS的directive，你輸入特定數(shù)據(jù)，他就能輸出相應(yīng)UI視圖。是一個比較完善的前端MVW框架，包含模板，數(shù)據(jù)雙向綁定，路由，模塊化，服務(wù)，依賴注入等所有功能，模板功能強(qiáng)大豐富，并且是聲明式的，自帶了豐富的 Angular 指令。
用過哪些設(shè)計模式？
工廠模式：
主要好處就是可以消除對象間的耦合，通過使用工程方法而不是new關(guān)鍵字。將所有實(shí)例化的代碼集中在一個位置防止代碼重復(fù)。
工廠模式解決了重復(fù)實(shí)例化的問題 ，但還有一個問題,那就是識別問題，因?yàn)楦緹o法 搞清楚他們到底是哪個對象的實(shí)例。
function createObject(name,age,profession){//集中實(shí)例化的函數(shù)var obj = new Object();
obj.name = name;
obj.age = age;
obj.profession = profession;
obj.move = function () {
return this.name + ' at ' + this.age + ' engaged in ' + this.profession;
};
return obj;
}
var test1 = createObject('trigkit4',22,'programmer');//第一個實(shí)例var test2 = createObject('mike',25,'engineer');//第二個實(shí)例
構(gòu)造函數(shù)模式
使用構(gòu)造函數(shù)的方法 ，即解決了重復(fù)實(shí)例化的問題 ，又解決了對象識別的問題，該模式與工廠模式的不同之處在于：
1.構(gòu)造函數(shù)方法沒有顯示的創(chuàng)建對象 (new Object());
2.直接將屬性和方法賦值給 this 對象;
3.沒有 renturn 語句。
說說你對閉包的理解
使用閉包主要是為了設(shè)計私有的方法和變量。閉包的優(yōu)點(diǎn)是可以避免全局變量的污染，缺點(diǎn)是閉包會常駐內(nèi)存，會增大內(nèi)存使用量，使用不當(dāng)很容易造成內(nèi)存泄露。在js中，函數(shù)即閉包，只有函數(shù)才會產(chǎn)生作用域的概念
閉包有三個特性：
1.函數(shù)嵌套函數(shù)
2.函數(shù)內(nèi)部可以引用外部的參數(shù)和變量
3.參數(shù)和變量不會被垃圾回收機(jī)制回收
請你談?wù)凜ookie的弊端
cookie雖然在持久保存客戶端數(shù)據(jù)提供了方便，分擔(dān)了服務(wù)器存儲的負(fù)擔(dān)，但還是有很多局限性的。
第一：每個特定的域名下最多生成20個cookie
1.IE6或更低版本最多20個cookie
2.IE7和之后的版本最后可以有50個cookie。
3.Firefox最多50個cookie
4.chrome和Safari沒有做硬性限制
IE和Opera 會清理近期最少使用的cookie，Firefox會隨機(jī)清理cookie。
cookie的最大大約為4096字節(jié)，為了兼容性，一般不能超過4095字節(jié)。
IE 提供了一種存儲可以持久化用戶數(shù)據(jù)，叫做userdata，從IE5.0就開始支持。每個數(shù)據(jù)最多128K，每個域名下最多1M。這個持久化數(shù)據(jù)放在緩存中，如果緩存沒有清理，那么會一直存在。
優(yōu)點(diǎn)：極高的擴(kuò)展性和可用性
1.通過良好的編程，控制保存在cookie中的session對象的大小。
2.通過加密和安全傳輸技術(shù)（SSL），減少cookie被破解的可能性。
3.只在cookie中存放不敏感數(shù)據(jù)，即使被盜也不會有重大損失。
4.控制cookie的生命期，使之不會永遠(yuǎn)有效。偷盜者很可能拿到一個過期的cookie。
缺點(diǎn)：
1.Cookie數(shù)量和長度的限制。每個domain最多只能有20條cookie，每個cookie長度不能超過4KB，否則會被截掉.
2.安全性問題。如果cookie被人攔截了，那人就可以取得所有的session信息。即使加密也與事無補(bǔ)，因?yàn)閿r截者并不需要知道cookie的意義，他只要原樣轉(zhuǎn)發(fā)cookie就可以達(dá)到目的了。
3.有些狀態(tài)不可能保存在客戶端。例如，為了防止重復(fù)提交表單，我們需要在服務(wù)器端保存一個計數(shù)器。如果我們把這個計數(shù)器保存在客戶端，那么它起不到任何作用。
瀏覽器本地存儲
在較高版本的瀏覽器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage來取代globalStorage。
html5中的Web Storage包括了兩種存儲方式：sessionStorage和localStorage。
sessionStorage用于本地存儲一個會話（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個會話中的頁面才能訪問并且當(dāng)會話結(jié)束后數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。
而localStorage用于持久化的本地存儲，除非主動刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會過期的。
web storage和cookie的區(qū)別
Web Storage的概念和cookie相似，區(qū)別是它是為了更大容量存儲設(shè)計的。Cookie的大小是受限的，并且每次你請求一個新的頁面的時候Cookie都會被發(fā)送過去，這樣無形中浪費(fèi)了帶寬，另外cookie還需要指定作用域，不可以跨域調(diào)用。
除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發(fā)者自己封裝setCookie，getCookie。
但是cookie也是不可以或缺的：cookie的作用是與服務(wù)器進(jìn)行交互，作為HTTP規(guī)范的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲”數(shù)據(jù)而生
瀏覽器的支持除了IE７及以下不支持外，其他標(biāo)準(zhǔn)瀏覽器都完全支持(ie及FF需在web服務(wù)器里運(yùn)行)，值得一提的是IE總是辦好事，例如IE7、IE6中的userData其實(shí)就是javascript本地存儲的解決方案。通過簡單的代碼封裝可以統(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會在一定時間內(nèi)保存在服務(wù)器上。當(dāng)訪問增多，會比較占用你服務(wù)器的性能
考慮到減輕服務(wù)器性能方面，應(yīng)當(dāng)使用COOKIE。
4、單個cookie保存的數(shù)據(jù)不能超過4K，很多瀏覽器都限制一個站點(diǎn)最多保存20個cookie。
5、所以個人建議：
將登陸信息等重要信息存放為SESSION
其他信息如果需要保留，可以放在COOKIE中
CSS中link 和@import的區(qū)別是？
(1) link屬于HTML標(biāo)簽，而@import是CSS提供的;
(2) 頁面被加載的時，link會同時被加載，而@import被引用的CSS會等到引用它的CSS文件被加載完再加載;
(3) import只在IE5以上才能識別，而link是HTML標(biāo)簽，無兼容問題;
(4) link方式的樣式的權(quán)重 高于@import的權(quán)重.
position:absolute和float屬性的異同
共同點(diǎn)：對內(nèi)聯(lián)元素設(shè)置
float和absolute屬性，可以讓元素脫離文檔流，并且可以設(shè)置其寬高。不同點(diǎn)：
float仍會占據(jù)位置，absolute會覆蓋文檔流中的其他元素。
介紹一下box-sizing屬性？
box-sizing屬性主要用來控制元素的盒模型的解析模式。默認(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ī)范對盒模型解析，一旦修改了元素的邊框或內(nèi)距，就會影響元素的盒子尺寸，就不得不重新計算元素的盒子尺寸，從而影響整個頁面的布局。
CSS 選擇符有哪些？哪些屬性可以繼承？優(yōu)先級算法
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）
優(yōu)先級為:
!important > id > class > tag
important 比 內(nèi)聯(lián)優(yōu)先級高,但內(nèi)聯(lián)比 id 要高
CSS3新增偽類舉例：
p:first-of-type 選擇屬于其父元素的首個 <p> 元素的每個 <p> 元素。
p:last-of-type 選擇屬于其父元素的最后 <p> 元素的每個 <p> 元素。
p:only-of-type 選擇屬于其父元素唯一的 <p> 元素的每個 <p> 元素。
p:only-child 選擇屬于其父元素的唯一子元素的每個 <p> 元素。
p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個 <p> 元素。
:enabled :disabled 控制表單控件的禁用狀態(tài)。
:checked 單選框或復(fù)選框被選中。
CSS3有哪些新特性？
CSS3實(shí)現(xiàn)圓角（border-radius），陰影（box-shadow），
對文字加特效（text-shadow、），線性漸變（gradient），
旋轉(zhuǎn)（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);
//旋轉(zhuǎn),縮放,定位,傾斜
多背景 rgba
在CSS3中唯一引入的偽元素是::selection.
媒體查詢，多欄布局
border-image
CSS3中新增了一種盒模型計算方式：box-sizing。盒模型默認(rèn)的值是content-box, 新增的值是padding-box和border-box，幾種盒模型計算元素寬高的區(qū)別如下：
content-box（默認(rèn)）
布局所占寬度Width：
Width = width + padding-left + padding-right + border-left + border-right
布局所占高度Height:
Height = height + padding-top + padding-bottom + border-top + border-bottom
padding-box
布局所占寬度Width：
Width = width(包含padding-left + padding-right) + border-top + border-bottom
布局所占高度Height:
Height = height(包含padding-top + padding-bottom) + border-top + border-bottom
border-box
布局所占寬度Width：
Width = width(包含padding-left + padding-right + border-left + border-right)
布局所占高度Height:
Height = height(包含padding-top + padding-bottom + border-top + border-bottom)
說說你對語義化的理解？
1，去掉或者丟失樣式的時候能夠讓頁面呈現(xiàn)出清晰的結(jié)構(gòu)
2，有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標(biāo)簽來確定上下文和各個關(guān)鍵字的權(quán)重；
3，方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動設(shè)備）以意義的方式來渲染網(wǎng)頁；
4，便于團(tuán)隊(duì)開發(fā)和維護(hù)，語義化更具可讀性，是下一步吧網(wǎng)頁的重要動向，遵循W3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個標(biāo)準(zhǔn)，可以減少差異化。
Doctype作用? 嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義?
1）、<!DOCTYPE> 聲明位于文檔中的最前面，處于 <html> 標(biāo)簽之前。告知瀏覽器以何種模式來渲染文檔。
2）、嚴(yán)格模式的排版和 JS 運(yùn)作模式是 以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。
3）、在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點(diǎn)無法工作。
4）、DOCTYPE不存在或格式不正確會導(dǎo)致文檔以混雜模式呈現(xiàn)。
你知道多少種Doctype文檔類型？
該標(biāo)簽可聲明三種 DTD 類型，分別表示嚴(yán)格版本、過渡版本以及基于框架的 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)頁，而 Quirks
（包容）模式（也就是松散呈現(xiàn)模式或者兼容模式）用于呈現(xiàn)為傳統(tǒng)瀏覽器而設(shè)計的網(wǎng)頁。
HTML與XHTML——二者有什么區(qū)別
1.所有的標(biāo)記都必須要有一個相應(yīng)的結(jié)束標(biāo)記
2.所有標(biāo)簽的元素和屬性的名字都必須使用小寫
3.所有的XML標(biāo)記都必須合理嵌套
4.所有的屬性必須用引號""括起來
5.把所有<和&特殊符號用編碼表示
6.給所有屬性賦一個值
7.不要在注釋內(nèi)容中使“--”
8.圖片必須有說明文字
常見兼容性問題？
png24位的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8.也可以引用一段腳本處理.
瀏覽器默認(rèn)的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統(tǒng)一。
IE6雙邊距bug:塊屬性標(biāo)簽float后，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的大。
浮動ie產(chǎn)生的雙倍距離（IE6雙邊距問題：在IE6下，如果對元素設(shè)置了浮動，同時又設(shè)置了margin-left或margin-right，margin值會加倍。）
box{ float:left; width:10px; margin:0 0 0 100px;}
這種情況之下IE會產(chǎn)生20px的距離，解決方案是在float的標(biāo)簽樣式控制中加入
display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(這個符號只有ie6會識別)
漸進(jìn)識別的方式，從總體中逐漸排除局部。
首先，巧妙的使用“\9”這一標(biāo)記，將IE游覽器從所有情況中分離出來。
接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經(jīng)獨(dú)立識別。
css
.bb{
background-color:#f1ee18;/*所有識別*/
.background-color:#00deff\9; /*IE6、7、8識別*/
+background-color:#a200ff;/*IE6、7識別*/
_background-color:#1e0bd1;/*IE6識別*/
}
怪異模式問題：漏寫DTD聲明，F(xiàn)irefox仍然會按照標(biāo)準(zhǔn)模式來解析網(wǎng)頁，但在IE中會觸發(fā)
怪異模式。為避免怪異模式給我們帶來不必要的麻煩，最好養(yǎng)成書寫DTD聲明的好習(xí)慣。現(xiàn)在
可以使用html5推薦的寫法：<doctype html>
上下margin重合問題
ie和ff都存在，相鄰的兩個div的margin-left和margin-right不會重合，但是margin-top和margin-bottom卻會發(fā)生重合。
解決方法，養(yǎng)成良好的代碼編寫習(xí)慣，同時采用margin-top或者同時采用margin-bottom。
解釋下浮動和它的工作原理？清除浮動的技巧
浮動元素脫離文檔流，不占據(jù)空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。
1.使用空標(biāo)簽清除浮動。
這種方法是在所有浮動標(biāo)簽后面添加一個空標(biāo)簽 定義css clear:both. 弊端就是增加了無意義標(biāo)簽。
2.使用overflow。
給包含浮動元素的父標(biāo)簽添加css屬性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
3.使用after偽對象清除浮動。
該方法只適用于非IE瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點(diǎn)。一、該方法中必須為需要清除浮動元素的偽對象中設(shè)置 height:0，否則該元素會比實(shí)際高出若干像素；
浮動元素引起的問題和解決辦法？
浮動元素引起的問題：
（1）父元素的高度無法被撐開，影響與父元素同級的元素
（2）與浮動元素同級的非浮動元素（內(nèi)聯(lián)元素）會跟隨其后
（3）若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結(jié)構(gòu)
解決方法：
使用CSS中的clear:both;屬性來清除元素的浮動可解決2、3問題，對于問題1，添加如下樣式，給父元素添加clearfix樣式：
.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{display: inline-block;} /* for IE/Mac */
清除浮動的幾種方法：
1，額外標(biāo)簽法，<div style="clear:both;"></div>（缺點(diǎn)：不過這個辦法會增加額外的標(biāo)簽使HTML結(jié)構(gòu)看起來不夠簡潔。）
2，使用after偽類
#parent:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}
3,浮動外部元素
4,設(shè)置overflow為hidden或者auto
DOM操作——怎樣添加、移除、移動、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)。
-
創(chuàng)建新節(jié)點(diǎn)
createDocumentFragment() //創(chuàng)建一個DOM片段 createElement() //創(chuàng)建一個具體的元素 createTextNode() //創(chuàng)建一個文本節(jié)點(diǎn) -
添加、移除、替換、插入
appendChild() removeChild() replaceChild() insertBefore() //并沒有insertAfter() -
查找
getElementsByTagName() //通過標(biāo)簽名稱 getElementsByName() //通過元素的Name屬性的值(IE容錯能力較強(qiáng)， 會得到一個數(shù)組，其中包括id等于name值的) getElementById() //通過元素Id，唯一性
html5有哪些新特性、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5？
HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲，多任務(wù)等功能的增加。
拖拽釋放(Drag and drop) API
語義化更好的內(nèi)容標(biāo)簽（header,nav,footer,aside,article,section）
音頻、視頻API(audio,video)
畫布(Canvas) API
地理(Geolocation) API
本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；
sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除
表單控件，calendar、date、time、email、url、search
新的技術(shù)webworker, websocket, Geolocation
移除的元素
純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u；
對可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes；
如何實(shí)現(xiàn)瀏覽器內(nèi)多個標(biāo)簽頁之間的通信?
調(diào)用localstorge、cookies等本地存儲方式
null和undefined的區(qū)別？
null是一個表示”無”的對象，轉(zhuǎn)為數(shù)值時為0；undefined是一個表示”無”的原始值，轉(zhuǎn)為數(shù)值時為NaN。
當(dāng)聲明的變量還未被初始化時，變量的默認(rèn)值為undefined。
null用來表示尚未存在的對象，常用來表示函數(shù)企圖返回一個不存在的對象。
undefined表示”缺少值”，就是此處應(yīng)該有一個值，但是還沒有定義。典型用法是：
（1）變量被聲明了，但沒有賦值時，就等于undefined。
（2) 調(diào)用函數(shù)時，應(yīng)該提供的參數(shù)沒有提供，該參數(shù)等于undefined。
（3）對象沒有賦值的屬性，該屬性的值為undefined。
（4）函數(shù)沒有返回值時，默認(rèn)返回undefined。
null表示”沒有對象”，即該處不應(yīng)該有值。典型用法是：
（1） 作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對象。
（2） 作為對象原型鏈的終點(diǎn)。
new操作符具體干了什么呢?
1、創(chuàng)建一個空對象，并且 this 變量引用該對象，同時還繼承了該函數(shù)的原型。
2、屬性和方法被加入到 this 引用的對象中。
3、新創(chuàng)建的對象由 this 所引用，并且最后隱式的返回 this 。
var obj = {};
obj.proto = Base.prototype;
Base.call(obj);
js延遲加載的方式有哪些？
defer和async、動態(tài)創(chuàng)建DOM方式（創(chuàng)建script，插入到DOM中，加載完畢后callBack）、按需異步載入js
call() 和 apply() 的區(qū)別和作用？
作用：動態(tài)改變某個類的某個方法的運(yùn)行環(huán)境（執(zhí)行上下文）。
哪些操作會造成內(nèi)存泄漏？
內(nèi)存泄漏指任何對象在您不再擁有或需要它之后仍然存在。
垃圾回收器定期掃描對象，并計算引用了每個對象的其他對象的數(shù)量。如果一個對象的引用數(shù)量為 0（沒有其他對象引用過該對象），或?qū)υ搶ο蟮奈┮灰檬茄h(huán)的，那么該對象的內(nèi)存即可回收。
setTimeout 的第一個參數(shù)使用字符串而非函數(shù)的話，會引發(fā)內(nèi)存泄漏。
閉包、控制臺日志、循環(huán)（在兩個對象彼此引用且彼此保留時，就會產(chǎn)生一個循環(huán)）
列舉IE 與其他瀏覽器不一樣的特性？
IE支持
currentStyle，F(xiàn)Irefox使用getComputStyleIE 使用
innerText，F(xiàn)irefox使用textContent濾鏡方面：IE:
filter:alpha(opacity= num)；Firefox：-moz-opacity:num事件方面：IE：
attachEvent：火狐是addEventListener鼠標(biāo)位置：IE是
event.clientX；火狐是event.pageXIE使用
event.srcElement；Firefox使用event.targetIE中消除list的原點(diǎn)僅需margin:0即可達(dá)到最終效果；FIrefox需要設(shè)置
margin:0;padding:0以及l(fā)ist-style:noneCSS圓角：ie7以下不支持圓角
WEB應(yīng)用從服務(wù)器主動推送Data到客戶端有那些方式？
Javascript數(shù)據(jù)推送
基于
WebSocket的推送方案SSE（Server-Send Event）：服務(wù)器推送數(shù)據(jù)新方式
一個頁面從輸入 URL 到頁面加載顯示完成，這個過程中都發(fā)生了什么？
分為4個步驟：
（1），當(dāng)發(fā)送一個URL請求時，不管這個URL是Web頁面的URL還是Web頁面上每個資源的URL，瀏覽器都會開啟一個線程來處理這個請求，同時在遠(yuǎn)程DNS服務(wù)器上啟動一個DNS查詢。這能使瀏覽器獲得請求對應(yīng)的IP地址。
（2）， 瀏覽器與遠(yuǎn)程Web服務(wù)器通過TCP三次握手協(xié)商來建立一個TCP/IP連接。該握手包括一個同步報文，一個同步-應(yīng)答報文和一個應(yīng)答報文，這三個報文在 瀏覽器和服務(wù)器之間傳遞。該握手首先由客戶端嘗試建立起通信，而后服務(wù)器應(yīng)答并接受客戶端的請求，最后由客戶端發(fā)出該請求已經(jīng)被接受的報文。
（3），一旦TCP/IP連接建立，瀏覽器會通過該連接向遠(yuǎn)程服務(wù)器發(fā)送HTTP的GET請求。遠(yuǎn)程服務(wù)器找到資源并使用HTTP響應(yīng)返回該資源，值為200的HTTP響應(yīng)狀態(tài)表示一個正確的響應(yīng)。
（4），此時，Web服務(wù)器提供資源服務(wù)，客戶端開始下載資源。
請求返回后，便進(jìn)入了我們關(guān)注的前端模塊，簡單來說，瀏覽器會解析HTML生成DOM Tree，其次會根據(jù)CSS生成CSS Rule Tree，而javascript又可以根據(jù)DOM API操作DOM
javascript對象的幾種創(chuàng)建方式
1，工廠模式
2，構(gòu)造函數(shù)模式
3，原型模式
4，混合構(gòu)造函數(shù)和原型模式
5，動態(tài)原型模式
6，寄生構(gòu)造函數(shù)模式
7，穩(wěn)妥構(gòu)造函數(shù)模式
Javascript 面向?qū)ο缶幊蹋ㄒ唬悍庋b
javascript繼承的6種方法
1，原型鏈繼承
2，借用構(gòu)造函數(shù)繼承
3，組合繼承(原型+借用構(gòu)造)
4，原型式繼承
5，寄生式繼承
6，寄生組合式繼承
Javascript面向?qū)ο缶幊蹋ǘ簶?gòu)造函數(shù)的繼承
Javascript面向?qū)ο缶幊蹋ㄈ悍菢?gòu)造函數(shù)的繼承
創(chuàng)建ajax的過程
創(chuàng)建
XMLHttpRequest對象,也就是創(chuàng)建一個異步調(diào)用對象.創(chuàng)建一個新的
HTTP請求,并指定該HTTP請求的方法、URL及驗(yàn)證信息.設(shè)置響應(yīng)
HTTP請求狀態(tài)變化的函數(shù).發(fā)送
HTTP請求.獲取異步調(diào)用返回的數(shù)據(jù).
使用JavaScript和DOM實(shí)現(xiàn)局部刷新.
var xmlHttp = new XMLHttpRequest();
xmlHttp.open('GET','demo.php','true');
xmlHttp.send()
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState === 4 & xmlHttp.status === 200){
}
}
詳情：JavaScript學(xué)習(xí)總結(jié)（七）Ajax和Http狀態(tài)字
異步加載和延遲加載
1.異步加載的方案： 動態(tài)插入script標(biāo)簽
2.通過ajax去獲取js代碼，然后通過eval執(zhí)行
3.script標(biāo)簽上添加defer或者async屬性
4.創(chuàng)建并插入iframe，讓它異步執(zhí)行js
5.延遲加載：有些 js 代碼并不是頁面初始化的時候就立刻需要的，而稍后的某些情況才需要的。
IE各版本和chrome可以并行下載多少個資源
IE6 兩個并發(fā)，iE7升級之后的6個并發(fā)，之后版本也是6個，F(xiàn)irefox，chrome也是6個
請解釋一下 JavaScript 的同源策略。
概念:同源策略是客戶端腳本（尤其是Javascript）的重要的安全度量標(biāo)準(zhǔn)。它最早出自Netscape Navigator2.0，其目的是防止某個文檔或腳本從多個不同源裝載。
這里的同源策略指的是：協(xié)議，域名，端口相同，同源策略是一種安全協(xié)議。
指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。
為什么要有同源限制？
我們舉例說明：比如一個黑客程序，他利用Iframe把真正的銀行登錄頁面嵌到他的頁面上，當(dāng)你使用真實(shí)的用戶名，密碼登錄時，他的頁面就可以通過Javascript讀取到你的表單中input中的內(nèi)容，這樣用戶名，密碼就輕松到手了。
缺點(diǎn)：
現(xiàn)在網(wǎng)站的JS 都會進(jìn)行壓縮，一些文件用了嚴(yán)格模式，而另一些沒有。這時這些本來是嚴(yán)格模式的文件，被 merge 后，這個串就到了文件的中間，不僅沒有指示嚴(yán)格模式，反而在壓縮后浪費(fèi)了字節(jié)。
事件、IE與火狐的事件機(jī)制有什么區(qū)別？ 如何阻止冒泡？
我們在網(wǎng)頁中的某個操作（有的操作對應(yīng)多個事件）。例如：當(dāng)我們點(diǎn)擊一個按鈕就會產(chǎn)生一個事件。是可以被 JavaScript 偵測到的行為。
事件處理機(jī)制：IE是事件冒泡、firefox同時支持兩種事件模型，也就是：捕獲型事件和冒泡型事件。；
ev.stopPropagation();注意老版本IE的方法ev.cancelBubble = true;
ajax的缺點(diǎn)和在IE下的問題？
ajax的缺點(diǎn)：
1、ajax不支持瀏覽器back按鈕。
2、安全問題 AJAX暴露了與服務(wù)器交互的細(xì)節(jié)。
3、對搜索引擎的支持比較弱。
4、破壞了程序的異常機(jī)制。
5、不容易調(diào)試。
IE緩存問題：
在IE瀏覽器下，如果請求的方法是GET，并且請求的URL不變，那么這個請求的結(jié)果就會被緩存。解決這個問題的辦法可以通過實(shí)時改變請求的URL，只要URL改變，就不會被緩存，可以通過在URL末尾添加上隨機(jī)的時間戳參數(shù)
't'= + new Date().getTime()
或者
open('GET','demo.php?rand=+Math.random()',true);
Ajax請求的頁面歷史記錄狀態(tài)問題
可以通過錨點(diǎn)來記錄狀態(tài)，location.hash。讓瀏覽器記錄Ajax請求時頁面狀態(tài)的變化。
還可以通過HTML5的history.pushState，來實(shí)現(xiàn)瀏覽器地址欄的無刷新改變
談?wù)勀銓χ貥?gòu)的理解
網(wǎng)站重構(gòu)：在不改變外部行為的前提下，簡化結(jié)構(gòu)、添加可讀性，而在網(wǎng)站前端保持一致的行為。也就是說是在不改變UI的情況下，對網(wǎng)站進(jìn)行優(yōu)化，
在擴(kuò)展的同時保持一致的UI。
對于傳統(tǒng)的網(wǎng)站來說重構(gòu)通常是：
表格(table)布局改為DIV+CSS
使網(wǎng)站前端兼容于現(xiàn)代瀏覽器(針對于不合規(guī)范的CSS、如對IE6有效的)
對于移動平臺的優(yōu)化
針對于SEO進(jìn)行優(yōu)化
深層次的網(wǎng)站重構(gòu)應(yīng)該考慮的方面
減少代碼間的耦合
讓代碼保持彈性
嚴(yán)格按規(guī)范編寫代碼
設(shè)計可擴(kuò)展的API
代替舊有的框架、語言(如VB)
增強(qiáng)用戶體驗(yàn)
通常來說對于速度的優(yōu)化也包含在重構(gòu)中
壓縮JS、CSS、image等前端資源(通常是由服務(wù)器來解決)
程序的性能優(yōu)化(如數(shù)據(jù)讀寫)
采用CDN來加速資源加載
對于JS DOM的優(yōu)化
HTTP服務(wù)器的文件緩存
HTTP狀態(tài)碼
100 Continue 繼續(xù)，一般在發(fā)送post請求時，已發(fā)送了http header之后服務(wù)端將返回此信息，表示確認(rèn)，之后發(fā)送具體參數(shù)信息
200 OK 正常返回信息
201 Created 請求成功并且服務(wù)器創(chuàng)建了新的資源
202 Accepted 服務(wù)器已接受請求，但尚未處理
301 Moved Permanently 請求的網(wǎng)頁已永久移動到新位置。
302 Found 臨時性重定向。
303 See Other 臨時性重定向，且總是使用 GET 請求新的 URI。
304 Not Modified 自從上次請求后，請求的網(wǎng)頁未修改過。
400 Bad Request 服務(wù)器無法理解請求的格式，客戶端不應(yīng)當(dāng)嘗試再次使用相同的內(nèi)容發(fā)起請求。
401 Unauthorized 請求未授權(quán)。
403 Forbidden 禁止訪問。
404 Not Found 找不到如何與 URI 相匹配的資源。
500 Internal Server Error 最常見的服務(wù)器端錯誤。
503 Service Unavailable 服務(wù)器端暫時無法處理請求（可能是過載或維護(hù)）。
說說你對Promise的理解
Promise 有四種狀態(tài)：
1.pending: 初始狀態(tài), 非 fulfilled 或 rejected.
2.fulfilled: 成功的操作.
3.rejected: 失敗的操作.
4.settled: Promise已被fulfilled或rejected，且不是pending
另外， fulfilled 與 rejected 一起合稱 settled。
Promise 對象用來進(jìn)行延遲(deferred) 和異步(asynchronous ) 計算。
Promise 的構(gòu)造函數(shù)
構(gòu)造一個 Promise，最基本的用法如下：
var promise = new Promise(function(resolve, reject) {
if (...) { // succeed
resolve(result);
} else { // fails
reject(Error(errMessage));
}
});
Promise 實(shí)例擁有 then 方法（具有 then 方法的對象，通常被稱為 thenable）。它的使用方法如下：
promise.then(onFulfilled, onRejected)
接收兩個函數(shù)作為參數(shù)，一個在 fulfilled 的時候被調(diào)用，一個在 rejected 的時候被調(diào)用，接收參數(shù)就是 future，onFulfilled對應(yīng) resolve, onRejected 對應(yīng) reject。
[ JS 進(jìn)階 ] 異步編程 promise模式 的簡單實(shí)現(xiàn)
說說你對前端架構(gòu)師的理解
負(fù)責(zé)前端團(tuán)隊(duì)的管理及與其他團(tuán)隊(duì)的協(xié)調(diào)工作，提升團(tuán)隊(duì)成員能力和整體效率；
帶領(lǐng)團(tuán)隊(duì)完成研發(fā)工具及平臺前端部分的設(shè)計、研發(fā)和維護(hù)；
帶領(lǐng)團(tuán)隊(duì)進(jìn)行前端領(lǐng)域前沿技術(shù)研究及新技術(shù)調(diào)研，保證團(tuán)隊(duì)的技術(shù)領(lǐng)先
負(fù)責(zé)前端開發(fā)規(guī)范制定、功能模塊化設(shè)計、公共組件搭建等工作，并組織培訓(xùn)。
實(shí)現(xiàn)一個函數(shù)clone，可以對JavaScript中的5種主要的數(shù)據(jù)類型（包括Number、String、Object、Array、Boolean）進(jìn)行值復(fù)制
Object.prototype.clone = function(){
var o = this.constructor === Array ? [] : {};
for(var e in this){
o[e] = typeof this[e] === "object" ? this[e].clone() : this[e];
}
return o;
}
嚴(yán)格模式的限制
嚴(yán)格模式主要有以下限制：
變量必須聲明后再使用
函數(shù)的參數(shù)不能有同名屬性，否則報錯
不能使用with語句
不能對只讀屬性賦值，否則報錯
不能使用前綴0表示八進(jìn)制數(shù)，否則報錯
不能刪除不可刪除的屬性，否則報錯
不能刪除變量delete prop，會報錯，只能刪除屬性delete global[prop]
eval不會在它的外層作用域引入變量
eval和arguments不能被重新賦值
arguments不會自動反映函數(shù)參數(shù)的變化
不能使用arguments.callee
不能使用arguments.caller
禁止this指向全局對象
不能使用fn.caller和fn.arguments獲取函數(shù)調(diào)用的堆棧
增加了保留字（比如protected、static和interface）
設(shè)置”嚴(yán)格模式”的目的，主要有以下幾個：
消除
Javascript語法的一些不合理、不嚴(yán)謹(jǐn)之處，減少一些怪異行為;消除代碼運(yùn)行的一些不安全之處，保證代碼運(yùn)行的安全；
提高編譯器效率，增加運(yùn)行速度；
為未來新版本的
Javascript做好鋪墊。
Javascript 嚴(yán)格模式詳解 - 阮一峰
如何刪除一個cookie
document.cookie = 'key='+ encodeURIComponent('value') + ';expires = ' + new Date(0)
<strong>，<em>和<b>，<i>標(biāo)簽
<strong> 標(biāo)簽和 <em> 標(biāo)簽一樣，用于強(qiáng)調(diào)文本，但它強(qiáng)調(diào)的程度更強(qiáng)一些。
em 是 斜體強(qiáng)調(diào)標(biāo)簽，更強(qiáng)烈強(qiáng)調(diào)，表示內(nèi)容的強(qiáng)調(diào)點(diǎn)。相當(dāng)于html元素中的 <i>...</i>;
< b > < i >是視覺要素，分別表示無意義的加粗，無意義的斜體。
em 和 strong 是表達(dá)要素(phrase elements)。
說說你對AMD和Commonjs的理解
可以參考Javascript模塊化編程（二）：AMD規(guī)范
CommonJS是服務(wù)器端模塊的規(guī)范，Node.js采用了這個規(guī)范。CommonJS規(guī)范加載模塊是同步的，也就是說，只有加載完成，才能執(zhí)行后面的操作。AMD規(guī)范則是非同步加載模塊，允許指定回調(diào)函數(shù)。
AMD推薦的風(fēng)格通過返回一個對象做為模塊對象，CommonJS的風(fēng)格通過對module.exports或exports的屬性賦值來達(dá)到暴露模塊對象的目的。
document.write()的用法
document.write()方法可以用在兩個方面：頁面載入過程中用實(shí)時腳本創(chuàng)建頁面內(nèi)容，以及用延時腳本創(chuàng)建本窗口或新窗口的內(nèi)容。
document.write只能重繪整個頁面。innerHTML可以重繪頁面的一部分
編寫一個方法 求一個字符串的字節(jié)長度
假設(shè)：一個英文字符占用一個字節(jié)，一個中文字符占用兩個字節(jié)
function GetBytes(str){
var len = str.length;
var bytes = len;
for(var i=0; i<len; i++){
if (str.charCodeAt(i) > 255) bytes++;
}
return bytes;
}
alert(GetBytes("你好,as"));
git fetch和git pull的區(qū)別
git pull：相當(dāng)于是從遠(yuǎn)程獲取最新版本并merge到本地
git fetch：相當(dāng)于是從遠(yuǎn)程獲取最新版本到本地，不會自動merge
說說你對MVC和MVVM的理解
MVC
View 傳送指令到 Controller
Controller 完成業(yè)務(wù)邏輯后，要求 Model 改變狀態(tài)
Model 將新的數(shù)據(jù)發(fā)送到 View，用戶得到反饋
所有通信都是單向的。
MVVM
Angular它采用雙向綁定（data-binding）：View的變動，自動反映在 ViewModel，反之亦然。
組成部分Model、View、ViewModel
View：UI界面
ViewModel：它是View的抽象，負(fù)責(zé)View與Model之間信息轉(zhuǎn)換，將View的Command傳送到Model；
Model：數(shù)據(jù)訪問層
什么是事件代理
事件代理（Event Delegation），又稱之為事件委托。是 JavaScript 中常用綁定事件的常用技巧。顧名思義，“事件代理”即是把原本需要綁定的事件委托給父元素，讓父元素?fù)?dān)當(dāng)事件監(jiān)聽的職務(wù)。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好處是可以提高性能。
網(wǎng)絡(luò)分層里七層模型是哪七層
應(yīng)用層：應(yīng)用層、表示層、會話層（從上往下）（
HTTP、FTP、SMTP、DNS）傳輸層（
TCP和UDP）網(wǎng)絡(luò)層（
IP）物理和數(shù)據(jù)鏈路層（以太網(wǎng)）
每一層的作用如下：
-物理層：通過媒介傳輸比特,確定機(jī)械及電氣規(guī)范（比特Bit）
-數(shù)據(jù)鏈路層：將比特組裝成幀和點(diǎn)到點(diǎn)的傳遞（幀F(xiàn)rame）
-網(wǎng)絡(luò)層：負(fù)責(zé)數(shù)據(jù)包從源到宿的傳遞和網(wǎng)際互連（包PackeT）
-傳輸層：提供端到端的可靠報文傳遞和錯誤恢復(fù)（段Segment）
-會話層：建立、管理和終止會話（會話協(xié)議數(shù)據(jù)單元SPDU）
-表示層：對數(shù)據(jù)進(jìn)行翻譯、加密和壓縮（表示協(xié)議數(shù)據(jù)單元PPDU）
-應(yīng)用層：允許訪問OSI環(huán)境的手段（應(yīng)用協(xié)議數(shù)據(jù)單元APDU）
各種協(xié)議
ICMP協(xié)議： 因特網(wǎng)控制報文協(xié)議。它是TCP/IP協(xié)議族的一個子協(xié)議，用于在IP主機(jī)、路由器之間傳遞控制消息。
TFTP協(xié)議： 是TCP/IP協(xié)議族中的一個用來在客戶機(jī)與服務(wù)器之間進(jìn)行簡單文件傳輸?shù)膮f(xié)議，提供不復(fù)雜、開銷不大的文件傳輸服務(wù)。
HTTP協(xié)議： 超文本傳輸協(xié)議，是一個屬于應(yīng)用層的面向?qū)ο蟮膮f(xié)議，由于其簡捷、快速的方式，適用于分布式超媒體信息系統(tǒng)。
DHCP協(xié)議： 動態(tài)主機(jī)配置協(xié)議，是一種讓系統(tǒng)得以連接到網(wǎng)絡(luò)上，并獲取所需要的配置參數(shù)手段。
講講304緩存的原理
服務(wù)器首先產(chǎn)生ETag，服務(wù)器可在稍后使用它來判斷頁面是否已經(jīng)被修改。本質(zhì)上，客戶端通過將該記號傳回服務(wù)器要求服務(wù)器驗(yàn)證其（客戶端）緩存。
304是HTTP狀態(tài)碼，服務(wù)器用來標(biāo)識這個文件沒修改，不返回內(nèi)容，瀏覽器在接收到個狀態(tài)碼后，會使用瀏覽器已緩存的文件
客戶端請求一個頁面（A）。 服務(wù)器返回頁面A，并在給A加上一個ETag。 客戶端展現(xiàn)該頁面，并將頁面連同ETag一起緩存。 客戶再次請求頁面A，并將上次請求時服務(wù)器返回的ETag一起傳遞給服務(wù)器。 服務(wù)器檢查該ETag，并判斷出該頁面自上次客戶端請求之后還未被修改，直接返回響應(yīng)304（未修改——Not Modified）和一個空的響應(yīng)體。
angularjs中provider，factory，service的區(qū)別和用法
service
第一次被注入時實(shí)例化，只實(shí)例化一次，整個應(yīng)用的生命周期中是個單例模式，可以用來在controller之間傳遞數(shù)據(jù)
factory
返回一個對象，可能這是你喜歡的方式，使用call的方式實(shí)例化，其他的和service一樣
provider
這是唯一能注入到config的service，這樣定義的service在你開始注入之前就已經(jīng)實(shí)例化，開發(fā)共享的模塊的時候常常使用它，能夠在使用之前進(jìn)行配置，比如你可能需要配置你的服務(wù)端的url
參考
Vue與Angular的區(qū)別
- vue僅僅是mvvm中的view層，只是一個如jquery般的工具庫，而不是框架，而angular而是mvvm框架。
- vue的雙向邦定是基于ES5 中的 getter/setter來實(shí)現(xiàn)的，而angular而是由自己實(shí)現(xiàn)一套模版編譯規(guī)則，需要進(jìn)行所謂的“臟”檢查，vue則不需要。因此，vue在性能上更高效，但是代價是對于ie9以下的瀏覽器無法支持。
參考前端框架Vue、angular、React的優(yōu)點(diǎn)和缺點(diǎn) / Vue對比其他框架
瀏覽器的渲染
下面是渲染引擎在取得內(nèi)容之后的基本流程：
解析html以構(gòu)建dom樹 -> 構(gòu)建render樹 -> 布局render樹 -> 繪制render樹
瀏覽器的渲染過程:
1，瀏覽器解析html源碼，然后創(chuàng)建一個 DOM樹。
在DOM樹中，每一個HTML標(biāo)簽都有一個對應(yīng)的節(jié)點(diǎn)，并且每一個文本也都會有一個對應(yīng)的文本節(jié)點(diǎn)。
DOM樹的根節(jié)點(diǎn)就是 documentElement，對應(yīng)的是html標(biāo)簽。
DOM 樹的構(gòu)建過程是一個深度遍歷過程：當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)都構(gòu)建好后才會去構(gòu)建當(dāng)前節(jié)點(diǎn)的下一個兄弟節(jié)點(diǎn)。
2，瀏覽器解析CSS代碼，計算出最終的樣式數(shù)據(jù)。
對CSS代碼中非法的語法她會直接忽略掉。
解析CSS的時候會按照如下順序來定義優(yōu)先級：瀏覽器默認(rèn)設(shè)置，用戶設(shè)置，外鏈樣式，內(nèi)聯(lián)樣式，html中的style。
3，構(gòu)建出DOM樹，并且計算出樣式數(shù)據(jù)后，下一步就是構(gòu)建一個 渲染樹（rendering tree）。
渲染樹和DOM樹有點(diǎn)像，但是是有區(qū)別的。DOM樹完全和html標(biāo)簽一一對應(yīng)，但是渲染樹會忽略掉不需要渲染的元素，比如head、display:none的元素等。
而且一大段文本中的每一個行在渲染樹中都是獨(dú)立的一個節(jié)點(diǎn)。
渲染樹中的每一個節(jié)點(diǎn)都存儲有對應(yīng)的css屬性。
4，一旦渲染樹創(chuàng)建好了，瀏覽器就可以根據(jù)渲染樹直接把頁面繪制到屏幕上。
單頁面路由的幾種實(shí)現(xiàn)原理
眾所周知單頁面網(wǎng)站的路徑跳轉(zhuǎn)全是通過js來控制的，下面咱們來講講
第一種：url完全不動型
這一種的情況是url完全不動，即你的頁面怎么改變，怎么跳轉(zhuǎn)url都不會改變
這種情況的原理 就是純ajax拿到頁面后替換原頁面中的元素，
第二種：帶hash(#)型
這種類型的優(yōu)點(diǎn)就是刷新頁面，頁面也不會丟。
實(shí)現(xiàn)原理：
小明說：如果window有一個事件能讓我監(jiān)聽url的變化，那我就能實(shí)先路由，
可以根據(jù)url的變化，來通過ajax請求參數(shù)來渲染頁面，
一個url對應(yīng)一個頁面，也不會重復(fù)，多好了。
通過監(jiān)聽 hash（#）的變化來執(zhí)行js代碼 從而實(shí)現(xiàn) 頁面的改變
核心代碼：
window.addEventListener(‘hashchange‘,function(){
self.urlChange()
})
就是通過這個原理 只要#改變了 就能觸發(fā)這個事件，這也是很多單頁面網(wǎng)站的url中都也 （#）的原因
第三種：無hash（#）型
這種類型是通過html5的最新history api來實(shí)現(xiàn)的 能正常的回退前進(jìn) 很好
url是這樣的 www.xxx.com/a/b/c/d 和普通的url一樣，但是也有缺點(diǎn) ，就是一刷新頁面 頁面就會丟，
因?yàn)?只要刷新 這個url（www.xxx.com/a/b/c/d）就會請求服務(wù)器，然而服務(wù)器上根本沒有這個資源，所以就會報404，解決方案就 配置一下服務(wù)器端（可以百度一下）
實(shí)現(xiàn)原理：
history.pushState、history.replaceState、history.state、window.onpopstate事件
第一步：history.pushState(null,null,"/abc"); 改變url
第二步：執(zhí)行一個函數(shù)（這個函數(shù)里有改變頁面的代碼）
github地址
多頁和單頁模式區(qū)別
自我介紹：
除了基本個人信息以外，面試官更想聽的是你與眾不同的地方和你的優(yōu)勢。
面試官下午好，我叫周群輝，2010年畢業(yè)于湖南第一師范學(xué)院，計算機(jī)科學(xué)與技術(shù)專業(yè)，熟悉的編程語言有javascript，android，php，有豐富的軟件項(xiàng)目開發(fā)經(jīng)驗(yàn)，例如：給樂科技三個上架App，順手付App，順手付App改造，順手付收銀臺，順手付錢包，順豐彩。能獨(dú)立完成軟件項(xiàng)目開發(fā)，前端主要使用的框架是angular，研究過Vue和React，平時會學(xué)習(xí)一些相關(guān)技術(shù)如Typescript，Java 數(shù)據(jù)庫，豐富自己的技術(shù)水平.
2.項(xiàng)目介紹
3.如何看待前端開發(fā)？
知識點(diǎn)太多。
除了最基礎(chǔ)的HTML標(biāo)簽及各種屬性，CSS的各種屬性和兼容性以及各類布局、效果等，JS的語言基礎(chǔ)和包括作用域、閉包、原型、this等。
還要能熟悉各類常用的JS框架和類庫、CSS框架。
還有各類開發(fā)工具如gulp、webpack、grunt、babel、less等。
以及ES6/7、TypeScript、promise、性能優(yōu)化、調(diào)試、測試、錯誤處理等等。
要學(xué)和記憶的東西都很多。突破方法我覺得首先是基礎(chǔ)，基礎(chǔ)學(xué)好就沒太大的問題；其次是多寫多練，積累經(jīng)驗(yàn)并把做的過程中遇到的問題和解決方法總結(jié)記錄；再次是學(xué)習(xí)知名框架的實(shí)現(xiàn)原理，看他們的源代碼。前端發(fā)展太快，不斷有新的框架和思想被提出，特別對于新手來說會有一些心理壓力，同時過快的節(jié)奏讓新手學(xué)起來比較吃力，這一點(diǎn)是前端相對其他技術(shù)來說的一個難點(diǎn)。
這一點(diǎn)我覺得所有新框架的出來都是循序漸近的，把基礎(chǔ)牢牢地打扎實(shí)，把原理吃透，例如angular，如果把數(shù)據(jù)雙向綁定和依賴注入原理搞明白，其他新出相關(guān)框架學(xué)習(xí)使用都不是總是。然后要對前端有學(xué)習(xí)的熱情，愿意去探索和使用新技術(shù)，多上github去看看這些技術(shù)有些什么issues，了解不足同時也是學(xué)習(xí)。前端開發(fā)是由易到難的，入門容易，可是越到后面越是不容易深入進(jìn)去。我個人是把前端開發(fā)分為初級、中級、高級、專家四個等級，到專家級別，那就不僅僅是前端開發(fā)各方面吃透，而是連底層實(shí)現(xiàn)原理，比如V8引擎如何工作，渲染引擎如何工作，不同內(nèi)核瀏覽器的渲染引擎又有什么差異，不是從效果角度來看，而是能從底層差異進(jìn)行了解。從敲入網(wǎng)址到網(wǎng)頁呈現(xiàn)出來，這其中發(fā)生的所有事都能明白，并且期間的很多技術(shù)細(xì)節(jié)都能深入了解。所以這是前端的一個難點(diǎn)。
我覺得只要用心、努力，我們都會越來越接近或成為高手的，這也需要不斷地積累和謙誠的態(tài)度。
4.平時是如何學(xué)習(xí)前端開發(fā)的？
5.未來三到五年的規(guī)劃是怎樣的？
