前端知識點

一、閉包:https://zhuanlan.zhihu.com/p/25407758
特殊的變量做用域而出現的閉包。閉包就是可以讀取其餘函數內部變量的函數。閉包能夠簡單理解成「定義在一個函數內部的函數「，在本質上，閉包是將函數內部和函數外部鏈接起來的橋樑。

 

二、懶加載：https://zhuanlan.zhihu.com/p/25455672 

     預加載：

 

 

三、講講輸入完網址按下回車，到看到網頁這個過程當中發生了什麼——（http://www.cnblogs.com/dojo-lzz/p/3983335.html）

 一、根據IP地址查找域名
 二、創建鏈接（創建TCP三次握手）
 三、構建網頁
 四、斷開鏈接

URL解析過程：

一、用戶輸入url，瀏覽器根據域名尋找IP地址

二、瀏覽器向服務器發送http請求，若是服務器返回301之類的重定向，瀏覽器根據相應投中的location再次發送請求

三、服務器端接受請求，處理請求生成html代碼（多是壓縮的），返回給瀏覽器

四、瀏覽器接受服務器的響應結果，若是有壓縮則先進行解壓處理，進行頁面解析渲染

渲染的步驟爲：

1.解析HTML

2.構建DOM樹

3.DOM樹和CSS樣式進行附着構造呈現樹

4.佈局

5.繪製

對於HTML瀏覽器有專門的html解析器來解析HTML，並在解析的過程當中構建DOM樹。

HTML解析完畢後，開始構建呈現樹RenderTree，這一步的主要工做在於將css樣式應用到DOM節點上。

呈現樹構造完成後瀏覽器便進行佈局處理，及計算每一個呈現樹節點的大小和位置信息。佈局是一個遞歸過程，從跟呈現節點開始，遞歸遍歷子節點，計算集合幾何信息。

佈局完成後，即是將呈現樹繪製出來顯示在屏幕上。對於每個呈現樹節點來講，主要繪製順序以下：背景顏色 -> 背景圖片 -> 邊框 -> 子呈現樹節點 -> 輪廓

 

四、談談你對CSS佈局的理解：

佈局模型有三類：

1）流動模型  flow（默認）

2）浮動模型  float

3）層模型  layer  

文檔流 ：指的是文本沿着從左到右的方向展開，就像流的形式

一、HTML的佈局機制就是用文檔模型的，即塊元素獨佔一塊

二、浮動就是脫離文本流，獨立於原來的網頁之上，浮動的內容就在文檔流空間上空獨立出來。

清除浮動問題  清除浮動式針對某個div自身設定的語法： clear : none | left | right | both

    none  :  默認值。容許兩邊均可以有浮動對象

    left   :  不容許左邊有浮動對象

    right  :  不容許右邊有浮動對象

    both  :  不容許有浮動對象

三、層模型 相似ps中的圖層，對某個圖層進行準確移動定位，層模型就能夠對div模塊進行準確的進行定位。

定位的類型分爲：

1）絕對定位 absolute    脫離文檔流

2) 相對定位   relative      不脫離文檔流

3）固定定位 fixed

4）不定位   static     （默認）

 

 

五、AMD 和 CMD 的區別有哪些？

AMD 是 RequireJS 在推廣過程當中對模塊定義的規範化產出。

Require.js  【 http://www.ruanyifeng.com/blog/2012/11/require_js.html】

（1）實現js文件的異步加載，避免網頁失去響應；

（2）管理模塊之間的依賴性，便於代碼的編寫和維護。

CMD 是 SeaJS 在推廣過程當中對模塊定義的規範化產出。
相似的還有 CommonJS Modules/2.0 規範，是 BravoJS 在推廣過程當中對模塊定義的規範化產出。

這些規範的目的都是爲了 JavaScript 的模塊化開發，特別是在瀏覽器端的。
目前這些規範的實現都能達成瀏覽器端模塊化開發的目的。

相同：皆爲異步

區別：

1. 對於依賴的模塊，AMD 是提早執行，CMD 是延遲執行。不過 RequireJS 從 2.0 開始，也改爲能夠延遲執行（根據寫法不一樣，處理方式不一樣）。CMD 推崇 as lazy as possible.

2. CMD 推崇依賴就近，AMD 推崇依賴前置。

3. AMD 的 API 默認是一個當多個用，CMD 的 API 嚴格區分，推崇職責單一。好比 AMD 裏，require 分全局 require 和局部 require，都叫 require。CMD 裏，沒有全局 require，而是根據模塊系統的完備性，提供 seajs.use 來實現模塊系統的加載啓動。CMD 裏，每一個 API 都簡單純粹。

什麼是模塊化：http://www.jianshu.com/p/9171c5496c8e

 

 

六、websocket

WebSocket API是下一代客戶端-服務器的異步通訊方法。該通訊取代了單個的TCP套接字，使用ws或wss協議，可用於任意的客戶端和服務器程序。WebSocket目前由W3C進行標準化。WebSocket已經受到Firefox 四、Chrome 四、Opera 10.70以及Safari 5等瀏覽器的支持。

WebSocket API最偉大之處在於服務器和客戶端能夠在給定的時間範圍內的任意時刻，相互推送信息。WebSocket並不限於以Ajax(或XHR)方式通訊，由於Ajax技術須要客戶端發起請求，而WebSocket服務器和客戶端能夠彼此相互推送信息；XHR受到域的限制，而WebSocket容許跨域通訊。

Ajax技術很聰明的一點是沒有設計要使用的方式。WebSocket爲指定目標建立，用於雙向推送消息。

認識HTML5的WebSocket - 立偉 - 博客園

http://www.cnblogs.com/wei2yi/archive/2011/03/23/1992830.html

 

七、如何加快HTML頁面加載速度 /性能優化
1. 頁面減肥： 雪碧圖
a. 頁面的肥瘦是影響加載速度最重要的因素。 
b. 刪除沒必要要的空格、註釋。 
c. 將inline的script和css移到外部文件。 
d. 可使用HTML Tidy來給HTML減肥，還可使用一些壓縮工具來給JavaScript減肥。 

2. 減小文件數量： 
a. 減小頁面上引用的文件數量能夠減小HTTP鏈接數。 
b. 許多JavaScript、CSS文件能夠合併最好合並，人家財幫子都把本身的JavaScript. functions和Prototype.js合併到一個base.js文件裏去了。 

3. 減小域名查詢： 
a. DNS查詢和解析域名也是消耗時間的，因此要減小對外部JavaScript、CSS、圖片等資源的引用，不一樣域名的使用越少越好。 

4. 緩存重用數據： 
a. 對重複使用的數據進行緩存。 

5. 優化頁面元素加載順序： 
a. 首先加載頁面最初顯示的內容和與之相關的JavaScript和CSS，而後加載HTML相關的東西，像什麼不是最初顯示相關的圖片、flash、視頻等很肥的資源就最後加載。 

6. 減小inline JavaScript的數量： 
a. 瀏覽器parser會假設inline JavaScript會改變頁面結構，因此使用inline JavaScript開銷較大。 
b. 不要使用document.write()這種輸出內容的方法，使用現代W3C DOM方法來爲現代瀏覽器處理頁面內容。 

7. 使用現代CSS和合法的標籤： 
a. 使用現代CSS來減小標籤和圖像，例如使用現代CSS+文字徹底能夠替代一些只有文字的圖片。 
b. 使用合法的標籤避免瀏覽器解析HTML時作「error correction」等操做，還能夠被HTML Tidy來給HTML減肥。 

8. Chunk your content： 
a. 不要使用嵌套table，而使用非嵌套table或者div。將基於大塊嵌套的table的layout分解成多個小table，這樣就不須要等到整個頁面（或大table）內容所有加載完才顯示。 

9. 指定圖像和table的大小： 
a. 若是瀏覽器能夠當即決定圖像或table的大小，那麼它就能夠立刻顯示頁面而不要從新作一些佈局安排的工做。 
b. 這不只加快了頁面的顯示，也預防了頁面完成加載後佈局的一些不當的改變。 
c. image使用height和width。 

 

八、單頁面應用

所謂單頁應用，指的是在一個頁面上集成多種功能，甚至整個系統就只有一個頁面，全部的業務功能都是它的子模塊，經過特定的方式掛接到主界面上。它是AJAX技術的進一步昇華，把AJAX的無刷新機制發揮到極致，所以能造就與桌面程序媲美的流暢用戶體驗。

ExtJS能夠稱爲第一代單頁應用框架的典型，它封裝了各類UI組件，用戶主要使用JavaScript來完成整個前端部分，甚至包括佈局。隨着功能逐漸增長，ExtJS的體積也逐漸增大，即便用於內部系統的開發，有時候也顯得笨重了，更不用說開發以上這類運行在互聯網上的系統。

jQuery因爲偏重DOM操做，它的插件體系又比較鬆散，因此比ExtJS這個體系更適合開發在公網運行的單頁系統，整個解決方案會相對比較輕量、靈活。

從單頁應用的特色來看，它比頁面型網站更加依賴於JavaScript，而因爲頁面的單頁化，各類子功能的JavaScript代碼彙集到了同一個做用域，因此代碼的隔離、模塊化變得很重要。

說白就是無刷新，整個webapp就一個html文件，裏面的各個功能頁面是javascript經過hash,或者history api來進行路由，並經過ajax拉取數據來實現響應功能。由於整個webapp就一個html，因此叫單頁面！

在HTML5中，能夠經過History API實現以下處理便可：
1. 在A頁面 經過發AJAX請求 請求頁面中的B數據。
2. 在頁面A中經過JS裝載相應的信息到相應的位置來。
3. 經過History API在不刷新頁面的狀況下在瀏覽器的地址欄中從頁面A的URL地址切換到頁面B的URL地址。  

1. history.pushState(data, title [, url])：往歷史記錄堆棧頂部添加一條記錄；data會在onpopstate事件觸發時做爲參數傳遞過去；title爲頁面標題，當前全部瀏覽器都會 忽略此參數；url爲頁面地址，可選，缺省爲當前頁地址。

2. history.replaceState(data, title [, url]) ：更改當前的歷史記錄，參數同上。

3. history.state：用於存儲以上方法的data數據，不一樣瀏覽器的讀寫權限不同。

4. popstate事件：當用戶單擊瀏覽器的後退或者前進按鈕時觸發該事件。在事件處理函數中讀取觸發事件的事件對象的state屬性值，該屬性值即爲執行pushState方法時所使用的第一個參數值，其中保存了在向瀏覽器歷史記錄中添加記錄同步保存的對象

 

 

九、Hybrid技術應當如何應用？http://www.cnblogs.com/yexiaochai/p/4921635.html

Hybrid的交互無非是Native調用前端頁面的JS方法，或者前端頁面經過JS調用Native提供的接口，二者交互的橋樑皆Webview：

十、你最愛的前端框架是什麼，爲何？

 

十一、微信JS-SDK 

 音頻錄製、https://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

 

十二、git/svn指令：http://www.cnblogs.com/cspku/articles/Git_cmds.html

 

1三、經常使用開發工具

編輯器：sublime

調試：瀏覽器開發者工具/fiddler/微信開發者工具

自動化：gulp/webpack

圖片處理：photoshop /AI

版本控制：SVN/GIT

原型設計：Axure

 

 

1五、web安全性

 

16 HTPP/HTTPS

 

1七、性能監測 

chrome 開發者工具

• Elements:查找網頁源代碼HTML中的任一元素,手動修改任一元素的屬性和樣式且能實時在瀏覽器裏面獲得反饋。
• Console:記錄開發者開發過程當中的日誌信息，且能夠做爲與JS進行交互的命令行Shell。
• Sources:斷點調試JS。
• Network:從發起網頁頁面請求Request後分析HTTP請求後獲得的各個請求資源信息（包括狀態、資源類型、大小、所用時間等），能夠根據這個進行網絡性能優化。
• Timeline:記錄並分析在網站的生命週期內所發生的各種事件，以此能夠提升網頁的運行時間的性能。
• Profiles:若是你須要Timeline所能提供的更多信息時，能夠嘗試一下Profiles,好比記錄JS CPU執行時間細節、顯示JS對象和相關的DOM節點的內存消耗、記錄內存的分配細節。
• Application:記錄網站加載的全部資源信息，包括存儲數據（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、緩存數據、字體、圖片、腳本、樣式表等。
• Security:判斷當前網頁是否安全。
• Audits:對當前網頁進行網絡利用狀況、網頁性能方面的診斷，並給出一些優化建議。好比列出全部沒有用到的CSS文件等。

 

 1八、CDN怎麼用

 

 

 1九、MVC與MVVM的區別: http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html
以backbone爲列子：

1.用戶能夠向 View 發送指令（DOM 事件），再由 View 直接要求 Model 改變狀態。

2. 用戶也能夠直接向 Controller 發送指令（改變 URL 觸發 hashChange 事件），再由 Controller 發送給 View。

3. Controller 很是薄，只起到路由的做用，而 View 很是厚，業務邏輯都部署在 View。因此，Backbone 索性取消了 Controller，只保留一個 Router（路由器） 。

mvvm:雙向數據綁定：https://segmentfault.com/a/1190000006599500
以vue爲例子： vue.js 則是採用數據劫持的方式，經過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應的監聽回調。
要實現mvvm的雙向綁定，就必需要實現如下幾點：
一、實現一個數據監聽器Observer，可以對數據對象的全部屬性進行監聽，若有變更可拿到最新值並通知訂閱者
二、實現一個指令解析器Compile，對每一個元素節點的指令進行掃描和解析，根據指令模板替換數據，以及綁定相應的更新函數
三、實現一個Watcher，做爲鏈接Observer和Compile的橋樑，可以訂閱並收到每一個屬性變更的通知，執行指令綁定的相應回調函數，從而更新視圖
四、mvvm入口函數，整合以上三者

 

20.自適應解決方案：http://caibaojian.com/mobile-responsive-example.html

• 固定一個某些寬度，使用一個模式，加上少量的媒體查詢方案
• 使用flexbox解決方案
• 使用百分比加媒體查詢
• 使用rem

 

21.js原生事件 http://www.jb51.net/article/64303.htm

 

22:動畫卡頓：60fps ，小於後即會出現卡頓 ，3D加速 translatez(0),translate3D(0,0,0),,http://blog.bingo929.com/transform-translate3d-translatez-transition-gpu-hardware-acceleration.html