最近事好多，心好累。
對(duì)于膽子小的人來(lái)說(shuō) ，什么未知情況都會(huì)害怕，這感覺(jué)真讓人討厭。

知識(shí)點(diǎn)

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

分為4個(gè)步驟： （1），當(dāng)發(fā)送一個(gè)URL請(qǐng)求時(shí)，不管這個(gè)URL是Web頁(yè)面的URL還是Web頁(yè)面上每個(gè)資源的URL，瀏覽器都會(huì)開(kāi)啟一個(gè)線程來(lái)處理這個(gè)請(qǐng)求，同時(shí)在遠(yuǎn)程DNS服務(wù)器上啟動(dòng)一個(gè)DNS查詢(xún)。這能使瀏覽器獲得請(qǐng)求對(duì)應(yīng)的IP地址。 （2）， 瀏覽器與遠(yuǎn)程`Web`服務(wù)器通過(guò)`TCP`三次握手協(xié)商來(lái)建立一個(gè)`TCP/IP`連接。該握手包括一個(gè)同步報(bào)文，一個(gè)同步-應(yīng)答報(bào)文和一個(gè)應(yīng)答報(bào)文，這三個(gè)報(bào)文在 瀏覽器和服務(wù)器之間傳遞。該握手首先由客戶(hù)端嘗試建立起通信，而后服務(wù)器應(yīng)答并接受客戶(hù)端的請(qǐng)求，最后由客戶(hù)端發(fā)出該請(qǐng)求已經(jīng)被接受的報(bào)文。 （3），一旦`TCP/IP`連接建立，瀏覽器會(huì)通過(guò)該連接向遠(yuǎn)程服務(wù)器發(fā)送`HTTP`的`GET`請(qǐng)求。遠(yuǎn)程服務(wù)器找到資源并使用HTTP響應(yīng)返回該資源，值為200的HTTP響應(yīng)狀態(tài)表示一個(gè)正確的響應(yīng)。 （4），此時(shí)，`Web`服務(wù)器提供資源服務(wù)，客戶(hù)端開(kāi)始下載資源。

請(qǐng)求返回后，便進(jìn)入了我們關(guān)注的前端模塊
簡(jiǎn)單來(lái)說(shuō)，瀏覽器會(huì)解析HTML生成DOM Tree，其次會(huì)根據(jù)CSS生成CSS Rule Tree，而javascript又可以根據(jù)DOM API操作DOM

HTTP狀態(tài)碼

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)求的格式，客戶(hù)端不應(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ù)）。

JSONP：json+padding（內(nèi)填充），顧名思義，就是把JSON填充到一個(gè)盒子里

優(yōu)點(diǎn)是兼容性好，簡(jiǎn)單易用，支持瀏覽器與服務(wù)器雙向通信。缺點(diǎn)是只支持GET請(qǐng)求。
原理是：動(dòng)態(tài)插入script標(biāo)簽，通過(guò)script標(biāo)簽引入一個(gè)js文件，這個(gè)js文件載入成功后會(huì)執(zhí)行我們?cè)趗rl參數(shù)中指定的函數(shù)，并且會(huì)把我們需要的json數(shù)據(jù)作為參數(shù)傳入。

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。

webpack

模塊打包（HTML、Javascript、CSS以及各種靜態(tài)文件圖片、字體等）工具，支持amd，cmd
以commonJS的形式來(lái)書(shū)寫(xiě)腳本，具有requireJs和browserify的功能
可以將代碼切割成不同的chunk，實(shí)現(xiàn)按需加載，降低了初始化時(shí)間
webpack 使用異步 IO 并具有多級(jí)緩存。這使得 webpack 很快且在增量編譯上更加快

創(chuàng)建ajax過(guò)程

(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)局部刷新.

http https

默認(rèn)HTTP的端口號(hào)為80，HTTPS的端口號(hào)為443。
因?yàn)榫W(wǎng)絡(luò)請(qǐng)求需要中間有很多的服務(wù)器路由器的轉(zhuǎn)發(fā)。中間的節(jié)點(diǎn)都可能篡改信息，而如果使用HTTPS，密鑰在你和終點(diǎn)站才有。https之所以比http安全，是因?yàn)樗胹sl/tls協(xié)議傳輸。它包含證書(shū)，卸載，流量轉(zhuǎn)發(fā)，負(fù)載均衡，頁(yè)面適配，瀏覽器適配，refer傳遞等。保障了傳輸過(guò)程的安全性

對(duì)前端模塊化的認(rèn)識(shí)

AMD 是 RequireJS 在推廣過(guò)程中對(duì)模塊定義的規(guī)范化產(chǎn)出。
CMD 是 SeaJS 在推廣過(guò)程中對(duì)模塊定義的規(guī)范化產(chǎn)出。
AMD 是提前執(zhí)行，CMD 是延遲執(zhí)行。
AMD推薦的風(fēng)格通過(guò)返回一個(gè)對(duì)象做為模塊對(duì)象，CommonJS的風(fēng)格通過(guò)對(duì)module.exports或exports的屬性賦值來(lái)達(dá)到暴露模塊對(duì)象的目的。

你覺(jué)得前端工程的價(jià)值體現(xiàn)在哪

為簡(jiǎn)化用戶(hù)使用提供技術(shù)支持（交互部分）
為多個(gè)瀏覽器兼容性提供支持
為提高用戶(hù)瀏覽速度（瀏覽器性能）提供支持
為跨平臺(tái)或者其他基于webkit或其他渲染引擎的應(yīng)用提供支持
為展示數(shù)據(jù)提供支持（數(shù)據(jù)接口）

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

• 代碼層面的優(yōu)化

  • 用hash-table來(lái)優(yōu)化查找

  • 少用全局變量

  • 用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能

  • 用setTimeout來(lái)避免頁(yè)面失去響應(yīng)

  • 緩存DOM節(jié)點(diǎn)查找的結(jié)果

  • 避免使用CSS Expression

  • 避免全局查詢(xún)

  • 避免使用with(with會(huì)創(chuàng)建自己的作用域，會(huì)增加作用域鏈長(zhǎng)度)

  • 多個(gè)變量聲明合并

  • 避免圖片和iFrame等的空Src。空Src會(huì)重新加載當(dāng)前頁(yè)面，影響速度和效率

  • 盡量避免寫(xiě)在HTML標(biāo)簽中寫(xiě)Style屬性

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

  • 盡量使用css3動(dòng)畫(huà)，開(kāi)啟硬件加速。

  • 適當(dāng)使用touch事件代替click事件。

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

  • 可以用transform: translateZ(0)來(lái)開(kāi)啟硬件加速。

  • 不濫用Float。Float在渲染時(shí)計(jì)算量比較大，盡量減少使用

  • 不濫用Web字體。Web字體需要下載，解析，重繪當(dāng)前頁(yè)面，盡量減少使用。

  • 合理使用requestAnimationFrame動(dòng)畫(huà)代替setTimeout

  • CSS中的屬性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video） - 會(huì)觸發(fā)GPU渲染，請(qǐng)合理使用。過(guò)渡使用會(huì)引發(fā)手機(jī)過(guò)耗電增加

  • PC端的在移動(dòng)端同樣適用

數(shù)據(jù)結(jié)構(gòu)

• 棧和隊(duì)列的區(qū)別?

  • 棧的插入和刪除操作都是在一端進(jìn)行的，而隊(duì)列的操作卻是在兩端進(jìn)行的。

  • 隊(duì)列先進(jìn)先出，棧先進(jìn)后出。

  • 棧只允許在表尾一端進(jìn)行插入和刪除，而隊(duì)列只允許在表尾一端進(jìn)行插入，在表頭一端進(jìn)行刪除

• 棧和堆的區(qū)別？

  • 棧區(qū)（stack）— 由編譯器自動(dòng)分配釋放 ，存放函數(shù)的參數(shù)值，局部變量的值等。

  • 堆區(qū)（heap） — 一般由程序員分配釋放， 若程序員不釋放，程序結(jié)束時(shí)可能由OS回收。

  • 堆（數(shù)據(jù)結(jié)構(gòu)）：堆可以被看成是一棵樹(shù)，如：堆排序；

  • 棧（數(shù)據(jù)結(jié)構(gòu)）：一種先進(jìn)后出的數(shù)據(jù)結(jié)構(gòu)。

ES6的了解

新增模板字符串（為JavaScript提供了簡(jiǎn)單的字符串插值功能）、箭頭函數(shù)（操作符左邊為輸入的參數(shù)，而右邊則是進(jìn)行的操作以及返回的值Inputs=>outputs。）、for-of（用來(lái)遍歷數(shù)據(jù)—例如數(shù)組中的值。）arguments對(duì)象可被不定參數(shù)和默認(rèn)參數(shù)完美代替。ES6將promise對(duì)象納入規(guī)范，提供了原生的Promise對(duì)象。增加了let和const命令，用來(lái)聲明變量。增加了塊級(jí)作用域。let命令實(shí)際上就增加了塊級(jí)作用域。ES6規(guī)定，var命令和function命令聲明的全局變量，屬于全局對(duì)象的屬性；let命令、const命令、class命令聲明的全局變量，不屬于全局對(duì)象的屬性。。還有就是引入module模塊的概念

js繼承

還是看書(shū)吧

用過(guò)哪些設(shè)計(jì)模式？

還是看書(shū)吧

• 工廠模式：
  主要好處就是可以消除對(duì)象間的耦合，通過(guò)使用工程方法而不是new關(guān)鍵字。將所有實(shí)例化的代碼集中在一個(gè)位置防止代碼重復(fù)。

工廠模式解決了重復(fù)實(shí)例化的問(wèn)題 ，但還有一個(gè)問(wèn)題,那就是識(shí)別問(wèn)題，因?yàn)楦緹o(wú)法 搞清楚他們到底是哪個(gè)對(duì)象的實(shí)例。

• 構(gòu)造函數(shù)模式
  使用構(gòu)造函數(shù)的方法 ，即解決了重復(fù)實(shí)例化的問(wèn)題 ，又解決了對(duì)象識(shí)別的問(wèn)題，該模式與工廠模式的不同之處在于：

1.構(gòu)造函數(shù)方法沒(méi)有顯示的創(chuàng)建對(duì)象 (new Object());
2.直接將屬性和方法賦值給 this 對(duì)象;
3.沒(méi)有 renturn 語(yǔ)句。

說(shuō)說(shuō)你對(duì)閉包的理解

使用閉包主要是為了設(shè)計(jì)私有的方法和變量。閉包的優(yōu)點(diǎn)是可以避免全局變量的污染，缺點(diǎn)是閉包會(huì)常駐內(nèi)存，會(huì)增大內(nèi)存使用量，使用不當(dāng)很容易造成內(nèi)存泄露。在js中，函數(shù)即閉包，只有函數(shù)才會(huì)產(chǎn)生作用域的概念
閉包有三個(gè)特性：
1.函數(shù)嵌套函數(shù)
2.函數(shù)內(nèi)部可以引用外部的參數(shù)和變量
3.參數(shù)和變量不會(huì)被垃圾回收機(jī)制回收

請(qǐng)你談?wù)凜ookie的弊端

Cookie數(shù)量和長(zhǎng)度的限制
安全性問(wèn)題
有些狀態(tài)不可能保存在客戶(hù)端

瀏覽器本地存儲(chǔ)

在較高版本的瀏覽器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage來(lái)取代globalStorage。
html5中的Web Storage包括了兩種存儲(chǔ)方式：sessionStorage和localStorage。
sessionStorage用于本地存儲(chǔ)一個(gè)會(huì)話（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁(yè)面才能訪問(wèn)并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷(xiāo)毀。因此sessionStorage不是一種持久化的本地存儲(chǔ)，僅僅是會(huì)話級(jí)別的存儲(chǔ)。
而localStorage用于持久化的本地存儲(chǔ)，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過(guò)期的。

Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開(kāi)發(fā)者自己封裝setCookie，getCookie。

cookie 和session 的區(qū)別：

1、cookie數(shù)據(jù)存放在客戶(hù)的瀏覽器上，session數(shù)據(jù)放在服務(wù)器上。
2、cookie不是很安全，別人可以分析存放在本地的COOKIE并進(jìn)行COOKIE欺騙

考慮到安全應(yīng)當(dāng)使用session。

3、session會(huì)在一定時(shí)間內(nèi)保存在服務(wù)器上。當(dāng)訪問(wèn)增多，會(huì)比較占用你服務(wù)器的性能

考慮到減輕服務(wù)器性能方面，應(yīng)當(dāng)使用COOKIE。

4、單個(gè)cookie保存的數(shù)據(jù)不能超過(guò)4K，很多瀏覽器都限制一個(gè)站點(diǎn)最多保存20個(gè)cookie。
5、所以個(gè)人建議：

將登陸信息等重要信息存放為SESSION 其他信息如果需要保留，可以放在COOKIE中

優(yōu)先級(jí)為:

!important > id > class > tag
important 比 內(nèi)聯(lián)優(yōu)先級(jí)高,但內(nèi)聯(lián)比 id 要高

說(shuō)說(shuō)你對(duì)語(yǔ)義化的理解？

1，去掉或者丟失樣式的時(shí)候能夠讓頁(yè)面呈現(xiàn)出清晰的結(jié)構(gòu)

2，有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲(chóng)抓取更多的有效信息：爬蟲(chóng)依賴(lài)于標(biāo)簽來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重；

3，方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動(dòng)設(shè)備）以意義的方式來(lái)渲染網(wǎng)頁(yè)；

4，便于團(tuán)隊(duì)開(kāi)發(fā)和維護(hù)，語(yǔ)義化更具可讀性，是下一步吧網(wǎng)頁(yè)的重要?jiǎng)酉?#xff0c;遵循W3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個(gè)標(biāo)準(zhǔn)，可以減少差異化。

常見(jiàn)兼容性問(wèn)題？

png24位的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8.也可以引用一段腳本處理.

瀏覽器默認(rèn)的margin和padding不同。解決方案是加一個(gè)全局的*{margin:0;padding:0;}來(lái)統(tǒng)一。

IE6雙邊距bug:塊屬性標(biāo)簽float后，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的大。

浮動(dòng)ie產(chǎn)生的雙倍距離（IE6雙邊距問(wèn)題：在IE6下，如果對(duì)元素設(shè)置了浮動(dòng)，同時(shí)又設(shè)置了margin-left或margin-right，margin值會(huì)加倍。）

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

這種情況之下IE會(huì)產(chǎn)生20px的距離，解決方案是在float的標(biāo)簽樣式控制中加入
_display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(_這個(gè)符號(hào)只有ie6會(huì)識(shí)別)

漸進(jìn)識(shí)別的方式，從總體中逐漸排除局部。

首先，巧妙的使用“9”這一標(biāo)記，將IE游覽器從所有情況中分離出來(lái)。

接著，再次使用“+”將IE8和IE7、IE6分離開(kāi)來(lái)，這樣IE8已經(jīng)獨(dú)立識(shí)別。

css

.bb{background-color:#f1ee18;/*所有識(shí)別*/.background-color:#00deff\9; /*IE6、7、8識(shí)別*/+background-color:#a200ff;/*IE6、7識(shí)別*/_background-color:#1e0bd1;/*IE6識(shí)別*/}

怪異模式問(wèn)題：漏寫(xiě)DTD聲明，Firefox仍然會(huì)按照標(biāo)準(zhǔn)模式來(lái)解析網(wǎng)頁(yè)，但在IE中會(huì)觸發(fā)
怪異模式。為避免怪異模式給我們帶來(lái)不必要的麻煩，最好養(yǎng)成書(shū)寫(xiě)DTD聲明的好習(xí)慣。現(xiàn)在
可以使用html5推薦的寫(xiě)法：<doctype html>
上下margin重合問(wèn)題
ie和ff都存在，相鄰的兩個(gè)div的margin-left和margin-right不會(huì)重合，但是margin-top和margin-bottom卻會(huì)發(fā)生重合。

解決方法，養(yǎng)成良好的代碼編寫(xiě)習(xí)慣，同時(shí)采用margin-top或者同時(shí)采用margin-bottom。

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() //并沒(méi)有insertAfter()

3）查找

getElementsByTagName() //通過(guò)標(biāo)簽名稱(chēng)getElementsByName() //通過(guò)元素的Name屬性的值(IE容錯(cuò)能力較強(qiáng)，會(huì)得到一個(gè)數(shù)組，其中包括id等于name值的)getElementById() //通過(guò)元素Id，唯一性

如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信?

調(diào)用localstorge、cookies等本地存儲(chǔ)方式

null和undefined的區(qū)別？

null是一個(gè)表示"無(wú)"的對(duì)象，轉(zhuǎn)為數(shù)值時(shí)為0；undefined是一個(gè)表示"無(wú)"的原始值，轉(zhuǎn)為數(shù)值時(shí)為NaN。
當(dāng)聲明的變量還未被初始化時(shí)，變量的默認(rèn)值為undefined。
null用來(lái)表示尚未存在的對(duì)象，常用來(lái)表示函數(shù)企圖返回一個(gè)不存在的對(duì)象。
undefined表示"缺少值"，就是此處應(yīng)該有一個(gè)值，但是還沒(méi)有定義。典型用法是：
（1）變量被聲明了，但沒(méi)有賦值時(shí)，就等于undefined。
（2) 調(diào)用函數(shù)時(shí)，應(yīng)該提供的參數(shù)沒(méi)有提供，該參數(shù)等于undefined。
（3）對(duì)象沒(méi)有賦值的屬性，該屬性的值為undefined。
（4）函數(shù)沒(méi)有返回值時(shí)，默認(rèn)返回undefined。
null表示"沒(méi)有對(duì)象"，即該處不應(yīng)該有值。典型用法是：
（1） 作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對(duì)象。
（2） 作為對(duì)象原型鏈的終點(diǎn)。

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

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

defer和async、動(dòng)態(tài)創(chuàng)建DOM方式（創(chuàng)建script，插入到DOM中，加載完畢后callBack）、按需異步載入js

總結(jié)

以上是生活随笔為你收集整理的个人感想的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。