个人感想
最近事好多，心好累。
對于膽子小的人來說 ，什么未知情況都會害怕，這感覺真讓人討厭。
知識點
一個頁面從輸入 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 的區別：
1、cookie數據存放在客戶的瀏覽器上，session數據放在服務器上。
2、cookie不是很安全，別人可以分析存放在本地的COOKIE并進行COOKIE欺騙
3、session會在一定時間內保存在服務器上。當訪問增多，會比較占用你服務器的性能
考慮到減輕服務器性能方面，應當使用COOKIE。4、單個cookie保存的數據不能超過4K，很多瀏覽器都限制一個站點最多保存20個cookie。
5、所以個人建議：
優先級為:
!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和IE7、IE6分離開來，這樣IE8已經獨立識別。
css
.bb{background-color:#f1ee18;/*所有識別*/.background-color:#00deff\9; /*IE6、7、8識別*/+background-color:#a200ff;/*IE6、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操作符具體干了什么呢?
1、創建一個空對象，并且 this 變量引用該對象，同時還繼承了該函數的原型。
2、屬性和方法被加入到 this 引用的對象中。
3、新創建的對象由 this 所引用，并且最后隱式的返回 this 。
js延遲加載的方式有哪些？
defer和async、動態創建DOM方式（創建script，插入到DOM中，加載完畢后callBack）、按需異步載入js
總結
- 上一篇： .NET Core R2安装教程及Hel
- 下一篇： 图解字符串的朴素模式匹配算法