我的感想

最近事好多，心好累。
對於膽子小的人來講 ，什麼未知狀況都會懼怕，這感受真讓人討厭。

知識點

一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？

分爲4個步驟：
（1），當發送一個URL請求時，無論這個URL是Web頁面的URL仍是Web頁面上每一個資源的URL，瀏覽器都會開啓一個線程來處理這個請求，同時在遠程DNS服務器上啓動一個DNS查詢。這能使瀏覽器得到請求對應的IP地址。
（2）， 瀏覽器與遠程`Web`服務器經過`TCP`三次握手協商來創建一個`TCP/IP`鏈接。該握手包括一個同步報文，一個同步-應答報文和一個應答報文，這三個報文在 瀏覽器和服務器之間傳遞。該握手首先由客戶端嘗試創建起通訊，然後服務器應答並接受客戶端的請求，最後由客戶端發出該請求已經被接受的報文。
（3），一旦`TCP/IP`鏈接創建，瀏覽器會經過該鏈接向遠程服務器發送`HTTP`的`GET`請求。遠程服務器找到資源並使用HTTP響應返回該資源，值爲200的HTTP響應狀態表示一個正確的響應。
（4），此時，`Web`服務器提供資源服務，客戶端開始下載資源。

請求返回後，便進入了咱們關注的前端模塊
簡單來講，瀏覽器會解析HTML生成DOM Tree，其次會根據CSS生成CSS Rule Tree，而javascript又能夠根據DOM API操做DOM

HTTP狀態碼

100  Continue  繼續，通常在發送post請求時，已發送了http header以後服務端將返回此信息，表示確認，以後發送具體參數信息
200  OK   正常返回信息
201  Created  請求成功而且服務器建立了新的資源
202  Accepted  服務器已接受請求，但還沒有處理
301  Moved Permanently  請求的網頁已永久移動到新位置。
302 Found  臨時性重定向。
303 See Other  臨時性重定向，且老是使用 GET 請求新的 URI。
304  Not Modified  自從上次請求後，請求的網頁未修改過。
400 Bad Request  服務器沒法理解請求的格式，客戶端不該當嘗試再次使用相同的內容發起請求。
401 Unauthorized  請求未受權。
403 Forbidden  禁止訪問。
404 Not Found  找不到如何與 URI 相匹配的資源。
500 Internal Server Error  最多見的服務器端錯誤。
503 Service Unavailable 服務器端暫時沒法處理請求（多是過載或維護）。

JSONP：json+padding（內填充），顧名思義，就是把JSON填充到一個盒子裏

優勢是兼容性好，簡單易用，支持瀏覽器與服務器雙向通訊。缺點是隻支持GET請求。
原理是：動態插入script標籤，經過script標籤引入一個js文件，這個js文件載入成功後會執行咱們在url參數中指定的函數，而且會把咱們須要的json數據做爲參數傳入。

XML和JSON的區別？

(1).數據體積方面。
JSON相對於XML來說，數據的體積小，傳遞的速度更快些。
(2).數據交互方面。
JSON與JavaScript的交互更加方便，更容易解析處理，更好的數據交互。
(3).數據描述方面。
JSON對數據的描述性比XML較差。
(4).傳輸速度方面。
JSON的速度要遠遠快於XML。

webpack

模塊打包（HTML、Javascript、CSS以及各類靜態文件圖片、字體等）工具，支持amd，cmd
以commonJS的形式來書寫腳本，具備requireJs和browserify的功能
能夠將代碼切割成不一樣的chunk，實現按需加載，下降了初始化時間
webpack 使用異步 IO 並具備多級緩存。這使得 webpack 很快且在增量編譯上更加快

建立ajax過程

(1)建立XMLHttpRequest對象,也就是建立一個異步調用對象.
(2)建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息.
(3)設置響應HTTP請求狀態變化的函數.
(4)發送HTTP請求.
(5)獲取異步調用返回的數據.
(6)使用JavaScript和DOM實現局部刷新.

http https

默認HTTP的端口號爲80，HTTPS的端口號爲443。
由於網絡請求須要中間有不少的服務器路由器的轉發。中間的節點均可能篡改信息，而若是使用HTTPS，密鑰在你和終點站纔有。https之因此比http安全，是由於他利用ssl/tls協議傳輸。它包含證書，卸載，流量轉發，負載均衡，頁面適配，瀏覽器適配，refer傳遞等。保障了傳輸過程的安全性

對前端模塊化的認識

AMD 是 RequireJS 在推廣過程當中對模塊定義的規範化產出。
CMD 是 SeaJS 在推廣過程當中對模塊定義的規範化產出。
AMD 是提早執行，CMD 是延遲執行。
AMD推薦的風格經過返回一個對象作爲模塊對象，CommonJS的風格經過對module.exports或exports的屬性賦值來達到暴露模塊對象的目的。

你以爲前端工程的價值體如今哪

爲簡化用戶使用提供技術支持（交互部分）
爲多個瀏覽器兼容性提供支持
爲提升用戶瀏覽速度（瀏覽器性能）提供支持
爲跨平臺或者其餘基於webkit或其餘渲染引擎的應用提供支持
爲展現數據提供支持（數據接口）

談談性能優化問題

代碼層面：避免使用css表達式，避免使用高級選擇器，通配選擇器。
緩存利用：緩存Ajax，使用CDN，使用外部js和css文件以便緩存，添加Expires頭，服務端配置Etag，減小DNS查找等
請求數量：合併樣式和腳本，使用css圖片精靈，初始首屏以外的圖片資源按需加載，靜態資源延遲加載。
請求帶寬：壓縮文件，開啓GZIP，

• 代碼層面的優化

  • 用hash-table來優化查找

  • 少用全局變量

  • 用innerHTML代替DOM操做，減小DOM操做次數，優化javascript性能

  • 用setTimeout來避免頁面失去響應

  • 緩存DOM節點查找的結果

  • 避免使用CSS Expression

  • 避免全局查詢

  • 避免使用with(with會建立本身的做用域，會增長做用域鏈長度)

  • 多個變量聲明合併

  • 避免圖片和iFrame等的空Src。空Src會從新加載當前頁面，影響速度和效率

  • 儘可能避免寫在HTML標籤中寫Style屬性

• 移動端性能優化

  • 儘可能使用css3動畫，開啓硬件加速。

  • 適當使用touch事件代替click事件。

  • 避免使用css3漸變陰影效果。

  • 能夠用transform: translateZ(0)來開啓硬件加速。

  • 不濫用Float。Float在渲染時計算量比較大，儘可能減小使用

  • 不濫用Web字體。Web字體須要下載，解析，重繪當前頁面，儘可能減小使用。

  • 合理使用requestAnimationFrame動畫代替setTimeout

  • CSS中的屬性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video） - 會觸發GPU渲染，請合理使用。過渡使用會引起手機過耗電增長

  • PC端的在移動端一樣適用

數據結構

• 棧和隊列的區別?

  • 棧的插入和刪除操做都是在一端進行的，而隊列的操做倒是在兩端進行的。

  • 隊列先進先出，棧先進後出。

  • 棧只容許在表尾一端進行插入和刪除，而隊列只容許在表尾一端進行插入，在表頭一端進行刪除

• 棧和堆的區別？

  • 棧區（stack）— 由編譯器自動分配釋放 ，存放函數的參數值，局部變量的值等。

  • 堆區（heap） — 通常由程序員分配釋放， 若程序員不釋放，程序結束時可能由OS回收。

  • 堆（數據結構）：堆能夠被當作是一棵樹，如：堆排序；

  • 棧（數據結構）：一種先進後出的數據結構。

ES6的瞭解

新增模板字符串（爲JavaScript提供了簡單的字符串插值功能）、箭頭函數（操做符左邊爲輸入的參數，而右邊則是進行的操做以及返回的值Inputs=>outputs。）、for-of（用來遍歷數據—例如數組中的值。）arguments對象可被不定參數和默認參數完美代替。ES6將promise對象歸入規範，提供了原生的Promise對象。增長了let和const命令，用來聲明變量。增長了塊級做用域。let命令實際上就增長了塊級做用域。ES6規定，var命令和function命令聲明的全局變量，屬於全局對象的屬性；let命令、const命令、class命令聲明的全局變量，不屬於全局對象的屬性。。還有就是引入module模塊的概念

js繼承

仍是看書吧

用過哪些設計模式？

仍是看書吧

• 工廠模式：
  主要好處就是能夠消除對象間的耦合，經過使用工程方法而不是new關鍵字。將全部實例化的代碼集中在一個位置防止代碼重複。

工廠模式解決了重複實例化的問題 ，但還有一個問題,那就是識別問題，由於根本沒法 搞清楚他們究竟是哪一個對象的實例。

• 構造函數模式
  使用構造函數的方法 ，即解決了重複實例化的問題 ，又解決了對象識別的問題，該模式與工廠模式的不一樣之處在於：

1.構造函數方法沒有顯示的建立對象 (new Object());
2.直接將屬性和方法賦值給 this 對象;
3.沒有 renturn 語句。

說說你對閉包的理解

使用閉包主要是爲了設計私有的方法和變量。閉包的優勢是能夠避免全局變量的污染，缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易形成內存泄露。在js中，函數即閉包，只有函數纔會產生做用域的概念
閉包有三個特性：
1.函數嵌套函數
2.函數內部能夠引用外部的參數和變量
3.參數和變量不會被垃圾回收機制回收

請你談談Cookie的弊端

Cookie數量和長度的限制
安全性問題
有些狀態不可能保存在客戶端

瀏覽器本地存儲

在較高版本的瀏覽器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage來取代globalStorage。
html5中的Web Storage包括了兩種存儲方式：sessionStorage和localStorage。
sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。所以sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。
而localStorage用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠不會過時的。

Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie須要前端開發者本身封裝setCookie，getCookie。

cookie 和session 的區別：

一、cookie數據存放在客戶的瀏覽器上，session數據放在服務器上。
二、cookie不是很安全，別人能夠分析存放在本地的COOKIE並進行COOKIE欺騙

考慮到安全應當使用session。

三、session會在必定時間內保存在服務器上。當訪問增多，會比較佔用你服務器的性能

考慮到減輕服務器性能方面，應當使用COOKIE。

四、單個cookie保存的數據不能超過4K，不少瀏覽器都限制一個站點最多保存20個cookie。
五、因此我的建議：

將登錄信息等重要信息存放爲SESSION
其餘信息若是須要保留，能夠放在COOKIE中

優先級爲:

!important > id > class > tag
important 比 內聯優先級高,但內聯比 id 要高

說說你對語義化的理解？

1，去掉或者丟失樣式的時候可以讓頁面呈現出清晰的結構

2，有利於SEO：和搜索引擎創建良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重；

3，方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；

4，便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，能夠減小差別化。

常見兼容性問題？

png24位的圖片在iE6瀏覽器上出現背景，解決方案是作成PNG8.也能夠引用一段腳本處理.

瀏覽器默認的margin和padding不一樣。解決方案是加一個全局的*{margin:0;padding:0;}來統一。

IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin狀況下，在ie6顯示margin比設置的大。

浮動ie產生的雙倍距離（IE6雙邊距問題：在IE6下，若是對元素設置了浮動，同時又設置了margin-left或margin-right，margin值會加倍。）

box{ float:left; width:10px; margin:0 0 0 100px;}

這種狀況之下IE會產生20px的距離，解決方案是在float的標籤樣式控制中加入
_display:inline;將其轉化爲行內屬性。(_這個符號只有ie6會識別)

漸進識別的方式，從整體中逐漸排除局部。

首先，巧妙的使用「9」這一標記，將IE遊覽器從全部狀況中分離出來。

接着，再次使用「+」將IE8和IE七、IE6分離開來，這樣IE8已經獨立識別。

css

.bb{

   background-color:#f1ee18;/*全部識別*/

  .background-color:#00deff\9; /*IE六、七、8識別*/

  +background-color:#a200ff;/*IE六、7識別*/

  _background-color:#1e0bd1;/*IE6識別*/

  }

怪異模式問題：漏寫DTD聲明，Firefox仍然會按照標準模式來解析網頁，但在IE中會觸發
怪異模式。爲避免怪異模式給咱們帶來沒必要要的麻煩，最好養成書寫DTD聲明的好習慣。如今
可使用html5推薦的寫法：<doctype html>
上下margin重合問題
ie和ff都存在，相鄰的兩個div的margin-left和margin-right不會重合，可是margin-top和margin-bottom卻會發生重合。

解決方法，養成良好的代碼編寫習慣，同時採用margin-top或者同時採用margin-bottom。

DOM操做——怎樣添加、移除、移動、複製、建立和查找節點。

1）建立新節點

createDocumentFragment()    //建立一個DOM片斷

  createElement()   //建立一個具體的元素

  createTextNode()   //建立一個文本節點

2）添加、移除、替換、插入

appendChild()

  removeChild()

  replaceChild()

  insertBefore() //並無insertAfter()

3）查找

getElementsByTagName()    //經過標籤名稱

  getElementsByName()    //經過元素的Name屬性的值(IE容錯能力較強，
  會獲得一個數組，其中包括id等於name值的)

  getElementById()    //經過元素Id，惟一性

如何實現瀏覽器內多個標籤頁之間的通訊?

調用localstorge、cookies等本地存儲方式

null和undefined的區別？

null是一個表示"無"的對象，轉爲數值時爲0；undefined是一個表示"無"的原始值，轉爲數值時爲NaN。
當聲明的變量還未被初始化時，變量的默認值爲undefined。
null用來表示還沒有存在的對象，經常使用來表示函數企圖返回一個不存在的對象。
undefined表示"缺乏值"，就是此處應該有一個值，可是尚未定義。典型用法是：
（1）變量被聲明瞭，但沒有賦值時，就等於undefined。
（2) 調用函數時，應該提供的參數沒有提供，該參數等於undefined。
（3）對象沒有賦值的屬性，該屬性的值爲undefined。
（4）函數沒有返回值時，默認返回undefined。
null表示"沒有對象"，即該處不該該有值。典型用法是：
（1） 做爲函數的參數，表示該函數的參數不是對象。
（2） 做爲對象原型鏈的終點。

new操做符具體幹了什麼呢?

一、建立一個空對象，而且 this 變量引用該對象，同時還繼承了該函數的原型。
二、屬性和方法被加入到 this 引用的對象中。
三、新建立的對象由 this 所引用，而且最後隱式的返回 this 。

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

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

defer和async、動態建立DOM方式（建立script，插入到DOM中，加載完畢後callBack）、按需異步載入js