前端開發涉及技術
1. 基礎技術
HTTP、HTML、CSS、Javascript
2. 編程能力
數據結構和算法
正則表達式
3. 擴展技術
Node.js、前端框架、前端工程、數據可視化
HTTP協議
HTTP是互聯網上應用最爲廣泛的一種網絡技術，也是瀏覽器和服務器通信時採用的協議。在展示頁面時，瀏覽器向服務端發起一個HTTP請求，以獲得相應的網站數據，然後在客戶端展示相應內容。
與HTTP協議緊密相關的還有HTTPS協議，它通過SSL和HTTP協議構建可進行加密傳輸、身份認證的網絡協議，能防止數據在傳輸過程中被劫持或篡改。
HTTP header字段包括通用頭、請求頭、響應頭、實體頭4個部分，每個header字段由一個字段名、冒號、和字段值3部分組成。字段名是大小寫無關的。字段值前可以添加任意數量的空格符，header字段可以被擴展爲多行，在每行開始處，使用至少一個空格或製表符。通過header字段包含請求和響應消息都支持的header字段：Cache-Control、Connection、Date、Pragma、Transfer-Encoding、Upgrade、Via。
一個URL地址，用於描述一個網絡上的資源，而HTTP中的GET、POST、PUT、DELETE就對應着對這個資源的查、改、增、刪4個操作。
常用的保持會話狀態的方式
cookie是保存在瀏覽器終端內存或磁盤上的一小塊數據，只能保存字符串類型，所有的cookie信息都會隨着瀏覽器的請求而發送。cookie分爲：持久cookie，數據保存在磁盤中；會話cookie，數據保存在內存中，瀏覽器關閉後將被清除。儘管幾乎所有瀏覽器都支持cookie，但瀏覽器對單域下cookie的個數和每個key的長度都有限制。
session是一種服務器端的機制，服務器使用一種類似散列表的結構來保存信息，客戶端需要接收、記憶和回送session的會話標誌號，session通常使藉助客戶端存儲的cookie來記錄會話標識。
GET參數是URL中的普通參數，GET方式是明文傳輸，其傳送的數據量一般會有限制，每種瀏覽器支持的最大長度會略有不同。
要實現保持用戶狀態，服務器在客戶端第一次訪問時會自動創建一個session來存儲客戶端的信息，同時生成一個唯一的key發送給客戶端，如果客戶端沒有禁用cookie，服務器會在客戶端cookie中寫入一個key的值，用戶保存用戶信息，之後的每一次訪問都會攜帶cookie給後端，服務器可以根據這個值判斷用戶的唯一性；如果用戶禁用了cookie，則需要將驗證信息寫入URL中，所有的請求也需要攜帶這個參數，相對cookie來說要麻煩一點，因爲頁面上所有的鏈接和請求都必須攜帶該參數，否則客戶端會丟失會話狀態。
<!DOCTYPE>聲明必須是HTML文檔的第一行，位於標籤之前。它不是HTML標籤，而是指示Web瀏覽器關於頁面使用哪個HTML版本進行編寫的指令。在HTML4.01中有3種<!DOCTYPE>聲明，在HTML5中只有一種：<!DOCTYPE html>
CSS的基本佈局模型有：Float Model（浮動模型）、Flow Model（流動模型）、Layer Model（層模型）
流動模型
默認情況下，頁面的HTML元素就是按照流動模型佈局網頁內容的，具體特徵如下：
· 塊級元素都會在所處的包含元素內自上而下按順序垂直延伸分佈，並且在默認狀態下，塊狀元素的寬度都是100%，也就是每一個塊狀元素佔據一行的空間。常見的塊狀元素有div、p、li、h1、table、ul、hr等。
· 流動模式下，內聯元素都會在所處的包含元素內從左到右水平分佈顯示。常見的內聯元素有span、img、a、input、button、textarea
· 前面的元素會影響後面元素展示的位置，同時父元素也會影響子元素的展示位置。
浮動元素
任何元素在默認情況下都不是浮動的，可以設置float：left或float：right，此時元素會在父元素內浮動展示。這種情況下可以避免塊狀元素獨佔一行的情況，但唯一的缺點是父元素的高度無法根據內容的大小自適應高度。因爲設置float之後元素時脫離當前文檔流的。
層佈局模型
每個圖層都能夠精確定位操作，在網頁上局部使用層佈局還是很方便的。層模型有3中形式，其中absolute和fixed可以使元素脫離文檔流。
HTML元素想要定義寬度和高度，必須具有塊狀元素的屬性，將內聯元素設定爲塊狀元素的方法就是設定其display屬性。常見的將內聯元素定義爲塊狀元素的屬性有block、inline-block、table、inline-table等。
delete
delete運算符可以刪除對象的屬性，它的操作數應當是一個屬性訪問表達式。
1. delete只是斷開屬性和對象的聯繫，而不會去操作對象中的屬性。
2. delete運算符只能刪除自身屬性，不能刪除繼承屬性（要刪除繼承屬性必須從定義這個屬性的原型對象刪除它，而且這會影響到所有繼承自這個原型的對象）。當delete表達式刪除成功或沒有任何副作用時，它會返回true。
正則表達式
Javascript提供了6個方法用於正則表達式，其中兩個是正則對象的方法，4個是字符串對象的方法。
·RegExp.prototype.test()
·RegExp.prototype.exec()
·String.prototype.match()
·String.prototype.search()
·String.prototype.replace()
·String.prototype.split()
Node.js是2009年開始興起的服務端Javascript技術，它構建於V8引擎之上，採用事件驅動、非阻塞I/O模型，具有輕量、高性能等特點，適合用於面向分佈式網絡的應用程序。其中Node.js的包管理工具npm已經是這個世界上最大的包管理服務。
Node.js給Javascript帶來了很大的生態層面的變化，不僅僅是讓Javascript能夠進入服務端領域，同樣給前端開發者帶來非常多可用的工具。如果採用Node.js進行服務端開發，因爲前後端均爲Javascript，可以極大降低技術棧切換帶來的開銷。藉助Javascript生態和Node.js自身的特性，Node.js非常適合用來完成產品的應用層開發。
module.exports和exports的關係
module和exports都是一個模塊文件的上下文。模塊文件的代碼真正被執行時是被包裝過的。
例如：
(function (exports,require,module,__filename,__dirname) {
console.log("hello world!");
})module和exports都是模塊被執行時的參數，其中exports是module的屬性，默認情況下是一個空對象。當require一個模塊時，實際上得到的是該模塊的exports屬性。
給模塊添加屬性時使用exports.key=value即可，但如果想將exports整個覆蓋，通過exports={key:value}的方法行不通，其原因是exports實際是以參數的形式傳遞進來的。Javascript在參數傳遞時，如果是對象，傳遞的是引用。exports={key:value}則是覆蓋引用，這時exports不再指向module.exports。當需要將一個模塊作爲類或者整個覆蓋時，需要通過module.exports={key:value}來進行。
Node.js在執行require(id)時是怎樣找到一個模塊的
Node.js中的require(id)執行分爲3中情況：引入內建模塊、引入文件模塊、引入一個包。通過id可以分析得到該模塊是一個內建模塊、文件模塊還是包。當是一個內建模塊時，直接從內存中加載。當id是相對路徑或絕對路徑時，模塊被認爲是一個文件模塊，通過文件查找可以定位到文件的路徑。
當id既不是內建模塊也不是文件模塊，則被認爲是一個包。這個包可能通過npm安裝第三方模塊。包的加載方式爲，從當前路徑下尋找node_modules目錄中是否存在該包。如果沒有，向上一級目錄進行查找。直到根目錄下的node_modules。這個規則可以通過module.paths得到。
能否使用require(‘.json’)的方式加載大量JSON文件
Nodejs推崇非阻塞I/O,但是require一個模塊時卻是同步調用的，這回帶來性能上的開銷，但並不是每次require都很耗時，因爲在require成功後會緩存起來，再次加載時直接從緩存讀取，並沒有額外開銷。當通過.json方式加載文件時固然方便，但大量使用時會導致這些數據被緩存。大量數據會駐存在內存中，導致GC頻繁和內存泄露。
Nodejs的異步I/O是如何進行的
Node.js的異步I/O通過實踐循環的方式實現。其中異步I/O又分爲磁盤I/O和網絡I/O。在磁盤I/O的調用中，當發起異步調用後，會將異步操作回送進libuv提供的隊列中，然後返回。當磁盤I/O執行完成之後，會形成一個事件，事件循環的過程中發現該事件後，會將其消費。消費過程就是將得到的數據和傳入的回調函數執行。
網絡I/O和磁盤I/O的差異在於它不需要線程池來進行處理。而是咋每次事件循環的過程中通過IOCP/epoll/kqueue/event ports來獲取網絡I/O的事件隊列。
前端框架解決Web應用開發的兩個關鍵問題：
如何寫高可複用，易維護的前端組件
如何管理前端應用中的數據
框架和類庫的區別在於：框架對於要面對的問題提出了完整的解決方案，而類庫只解決特定的部分問題。
jQuery提供了一套操作DOM的類庫，同時也解決了組件的問題。它有以下特點：
它的一切都是基於DOM操作的。
數據和DOM直接的關聯變化，需要開發者手動編寫命令式的代碼來實現。
React比jQuery更進一步，增加了對組件開發的支持。它的思路是：無論是頁面還是組件，都理解成組件。組件聲明一個render方法來決定根據當前的數據渲染出什麼樣的HTML。組件數據發生改變時，由框架再次調用render方法來刷新頁面。相比較而已其特點是：
概念高度精簡，總的來看只有組件這一概念
完全封裝了底層的DOM操作和真實綁定的工作。
基於jQuery的組件開發和基於React的組件開發的異同
· jQuery組件開發需要通過封裝類似原生DOM的API，而React可以關注於抽象的組件封裝，組件包含了數據初始化、組件渲染、組件掛載等關鍵的鉤子。
· jQuery是通過手動定位來實現組件的改變的，代碼是命令式的。React通過聲明一個方法來表示如何根據數據渲染HTML。代碼是聲明式的。
· jQuery的組件無法很好的解決嵌套問題。React組件的全部DOM操作、聲明週期都由框架一併控制，已由框架解決組件的嵌套問題。
前端工程化
代碼規範、分支管理、模塊管理、自動化測試、構建、部署
保證瀏覽器加載到修改後的版本
使用HTTP頭信息，指定瀏覽器不得緩存（或者指定一個較短的緩存時間）
Cache-Control：no-cache、no-store、must-revalidate
Pragma：no-cache
Expires：0
但是這樣一來，瀏覽器每次訪問都要下載相關文件，會增加帶寬消耗，也不利於性能。更常見的解決方案是，爲每個靜態文件的URL附加一個版本號或哈希作爲查詢字符串。文件每更新一次，就更新一下版本號。
Web應用安全
Web安全主要分爲客戶端腳本安全和服務器端應用安全。客戶端腳本安全主要包括瀏覽器安全、跨站腳本攻擊、跨站點請求僞造、點擊劫持，還有HTML5安全。而注入攻擊、文件上傳漏洞、認證與會話管理、訪問控制、加密算法與隨機數、Web框架安全、應用層拒絕服務攻擊、PHP安全、Web Server配置安全一般歸爲服務器端安全。瀏覽器安全主要涉及同源策略、沙箱等知識。
OAuth認證授權協議的主要流程
OAuth認證和授權的過程涉及的三方包括：
服務商用戶使用服務的提供方，一般用來存儲消息、照片、視頻、聯繫人、文件等。
用戶服務商的用戶。
第三方通常是網站，該網站想要訪問用戶存儲再服務商那裏的信息。比如某個提供照片打印服務的網站，用戶想在這裏打印自己存在服務商那裏的網絡相冊。在認證過程之前，第三方需要先向服務商申請第三方服務的唯一標識。
OAuth認證和授權的過程如下：
1. 用戶訪問第三方網站，想對存放在服務商那裏的某些資源進行操作
2. 第三方網站向服務商請求一個臨時令牌
3. 服務商驗證第三方網站的身份後，授予一個臨時令牌。
4. 第三方網站獲得臨時令牌後，將用戶導向服務商的授權頁面請求用戶授權，然後這個過程中將臨時令牌和第三方網站的返回地址發送給服務商。
5. 用戶在服務商的授權頁面上輸入自己的用戶名和密碼，授權第三方網站訪問相應的資源
6. 授權成功後，服務商將用戶導向第三方網站的返回地址
7. 第三方網站根據臨時令牌從服務商那裏獲取訪問令牌
8. 服務商根據令牌和用戶的授權情況授予第三方網站訪問令牌。
9. 第三方網站使用獲取到的訪問令牌訪問存放在服務商這裏的對應資源。
URL跳轉漏洞是什麼？哪些危害
URL跳轉一般有以下幾種實現方式：
1. META標籤內跳轉
2. Javascript跳轉
3. HTTP頭跳轉
通過以GET或POST方式接收將要跳轉的URL，然後通過上面的幾種方式跳轉到目標URL。一方面，由於用戶的輸入會進入Meta、Javascript、HTTP頭，所以都可能發生相應上下文的漏洞，如XSS等。同時，即使只是對於URL跳轉本身功能方面存在一個缺陷，因爲會將用戶瀏覽器從可信的站點導向不可信站點，如果跳轉的時候帶有敏感數據，一樣可能將敏感數據泄露給不可信的第三方。
惡意用戶完全可以借用URL跳轉漏洞來欺騙安全意識低的用戶，從而實現“中獎”之類的欺詐，這對於一些有在線業務的企業危害較大。同時，藉助URL跳轉，也可以突破常見的基於“白名單方式”的一些安全限制，如傳統IM裏對於URL的傳播會進行安全校驗，但是對於大公司的域名及URL將直接允許通過並顯示爲可信的URL，而一旦該URL裏包含一些跳轉漏洞則將可能導致安全限制被繞過。
如果引入一些資源的限制是依賴於“白名單”方式，同樣可能被繞過導致安全風險，譬如常見的一些應用運行允許引入可信站點如youku.com的視頻，限制方式往往是檢查URL是否是youku.com,如果youku.com內含有一個URL跳轉漏洞，將導致最終引入的資源屬於不可信的第三方資源或者惡意站點，最終導致安全問題。