摘要：執(zhí)行過程跟瀏覽器內(nèi)核相關(guān)，依靠引擎執(zhí)行。定義了屬性該屬性維持盒模型的組成方式。事件委托原理需要綁定事件的元素很多，且處理邏輯類似。元素都是動態(tài)創(chuàng)建，或頻繁增加，刪除，導(dǎo)致元素綁定事件過于復(fù)雜。

HTML5新增了哪些內(nèi)容或API，使用過哪些

語義，連通性，離線存儲，多媒體，2D/3D 繪圖和效果，性能集成，設(shè)備訪問 Device Access，樣式設(shè)計(jì)

HTML5修改的目標(biāo)：

將互聯(lián)網(wǎng)語義化

提供更好地支持各種媒體的嵌入

新增應(yīng)用程序接口API

HTML Geolocation - 地理位置

HTML Drag and Drop - 拖放

HTML Local Storage - (本地存儲)

HTML Application Cache - 應(yīng)用程序緩存

HTML Web Workers - Web Workers

HTML Canvas/WebGL - Canvas WebGL

HTML Audio/Video - Audio Video

元素與屬性

文件類型聲明:。

新的解析順序：不再基于SGML解析。

新增常用元素: section（寫文章的時候會經(jīng)常用到，w3school中說：文檔中的節(jié)（section、區(qū)段）。比如章節(jié)、頁眉、頁腳或文檔中的其他部分。）, video/audio, nav,aside, canvas, footer, header, mark（標(biāo)記高亮）新增標(biāo)簽MDN

input元素的新type： date, email, url

新的屬性： charset（用于meta）, async（用于script）

新的全域?qū)傩裕?b>contenteditable(元素是否可被用戶編輯), contextmenu(上下文菜單是指在用戶交互（例如右鍵點(diǎn)擊）時出現(xiàn)的菜單), draggable(用于標(biāo)識元素是否允許使用 拖放操作API 拖動), dropzone, hidden, spellcheck

input和textarea的區(qū)別

input

需要type值

value屬性指定初始值，maxlength屬性指定輸入最長的長度，size屬性指定顯示字符長度

寬高只能通過CSS樣式指定

textarea

使用標(biāo)簽對,且內(nèi)容在標(biāo)簽對中:內(nèi)容

使用row、col指定大小

區(qū)別：input單行文本框， textarea多行文本框

移動設(shè)備忽略將頁面中的數(shù)字識別為電話號碼的方法

設(shè)置mate

doctype的作用是什么

激活不同瀏覽器渲染模式

label的標(biāo)簽的作用是

屬性: for和accesskey

for的作用：為哪個控件服務(wù).
accesskey的作用：訪問這個控件的熱鍵.

作用：用戶界面中項(xiàng)目的標(biāo)題

png8、24的區(qū)別是

根本區(qū)別：存儲方式不同.
png8有1位的布爾透明通道（要么完全透明，要么完全不透明）
png24有8位（256階）的布爾透明通道（半透明）

特點(diǎn)：
png8和gif又一些相似之處，模式都是索引顏色，只支持像素級的純透明，不支持alpha透明。
"IE6 不支持PNG透明"，是指不支持PNG-24的透明，但是IE6支持PNG8的透明，就像支持gif的透明一樣。

請說下移動端常見的適配不同屏幕大小的方法

Rem布局

流式布局

Felx布局

移動端布局
移動端H5頁面適配問題研究
移動web適配利器-rem

html標(biāo)簽語義化的好處

利于SEO優(yōu)化。

在樣式丟失的時候，還可以比較好的呈現(xiàn)結(jié)構(gòu)。

更好的支持各種終端，例如無障礙閱讀和有聲小說等。

利于團(tuán)隊(duì)開發(fā)和維護(hù)，遵循W3C規(guī)范，減少代碼差異，提高效率。

頁面DOM節(jié)點(diǎn)太多，會出現(xiàn)什么問題？如何優(yōu)化？

問題：

頁面卡頓，幀率下降

優(yōu)化：

采用Virtual DOM， virtual-dom

多次操作DOM，改為批量一次操作DOM

及時移走頁面不用的DOM

避免不必要的DIV嵌套

頁面的渲染過程

解析整個HTML，得到DOM樹和樣式樹

DOM樹和樣式樹，經(jīng)過渲染，得到一棵渲染樹

根據(jù)渲染樹，開始布局，計(jì)算各個節(jié)點(diǎn)寬度，位置，高度等。

然后開始繪制整個頁面并顯示

在渲染過程中如果使用GPU，還可以進(jìn)行GPU渲染

高性能DOM

一個網(wǎng)站，在頁面上承載最多的內(nèi)容就是DOM。而且無論是通過加載JS，加載Image，也都是通過HTML標(biāo)簽來實(shí)現(xiàn)的。

DOM性能優(yōu)化：

站點(diǎn)的網(wǎng)絡(luò)消耗

DOM初始化過程（瀏覽器）

DOM結(jié)構(gòu)以及動態(tài)操作（人為）

JS執(zhí)行過程（瀏覽器 - V8）

JS邏輯組織（人為）

站點(diǎn)的網(wǎng)絡(luò)消耗基本上沒法控制，復(fù)雜的網(wǎng)絡(luò)，在一個下行的終端實(shí)際上選擇不了會接觸什么樣的網(wǎng)絡(luò)環(huán)境。

DOM的初始化過程無法控制，瀏覽器內(nèi)部有DOM解析引擎，它的解析快慢改變不了。

DOM的操作以及動態(tài)操作，一個頁面的DOM結(jié)構(gòu)是在制作頁面的時候定義下來的，可以采用各種方式，比如：多層嵌套，底層嵌套，絕對定位，相對定位。
動態(tài)操作就是DOM在運(yùn)行到一定階段之后發(fā)生。

JS執(zhí)行過程跟瀏覽器內(nèi)核相關(guān)，依靠JS引擎執(zhí)行。它的執(zhí)行快慢無法改變，能夠優(yōu)化的是JS邏輯組織部分。

回流Reflow：對于DOM結(jié)構(gòu)的各個元素都有自己的盒子模型，這些都需要瀏覽器根據(jù)各個樣式（瀏覽器的默認(rèn)，開發(fā)人員定義的）來計(jì)算，并根據(jù)計(jì)算結(jié)果將元素放到它該出現(xiàn)的位置
重繪Repaint：當(dāng)各個盒子的位置，大小以及其它屬性，例如：顏色，字體大小等都確定下來后，瀏覽器于是便把這些元素都按照各自的特性繪制一遍，于是頁面的內(nèi)容出現(xiàn)了。

什么情況觸發(fā)回流或者重繪？
DOM元素的添加，修改（內(nèi)容），刪除（回流+重繪），僅修改DOM的元素的字體顏色（只有重繪，因此不需要調(diào)整布局），回流一定會觸發(fā)重繪，但是重繪不一定觸發(fā)回流

避免觸發(fā)回流和重繪，提高DOM的性能：
display的值會影響布局，從而影響整個頁面元素的位置發(fā)生變化，所以會更改DOM-Tree,需要重新render-Tree的結(jié)構(gòu)，先將元素從document中刪除，完成修改后再把元素放回原來的位置，如果需要創(chuàng)建多個DOM結(jié)構(gòu)，可以使用documentFragment創(chuàng)建完成后一次性添加到document

在前端開發(fā)中，頁面渲染指什么？

前端工程師手冊
維基百科HTML5
MDN-HTML5

左右布局：左邊定寬、右邊自適應(yīng)，不少于3種方法

absolute + padding

    
left
    
right

flex

    
left
    
right

float

    
left
    
right

CSS3用過哪些新特性

Selector

@font-face 字體

border-radius 圓角

box-shadow text-shadow 文本和框的陰影

Word-wrap 樣式

多列布局（multi-column layout）

  
 



// Column-count：表示布局幾列。
// Column-rule：表示列與列之間的間隔條的樣式
// Column-gap：表示列于列之間的間隔

transform 轉(zhuǎn)換

2D 轉(zhuǎn)換
rotate 旋轉(zhuǎn)，圖片轉(zhuǎn)個90或180度 
translate 位置移動
scale, skew, matrix 等
3D 轉(zhuǎn)換
rotate(XYZ) 根據(jù)x,y,z軸旋轉(zhuǎn)
translate(XYZ), scale(XYZ)  
perspective 透視, 景深，這個很多3D效果都要設(shè)置一下，不然3D還是會”2D”的效果

transition: 過渡，好多簡單的動畫，移個位置，變個長短.

animation: 動畫，3D可以調(diào)用硬件渲染。

@media 媒體查詢，適用于一些響應(yīng)式布局中

flex: flex布局，cssreference

word-wrap, background-size, background-origin, border-image, box-sizing, calc, linear-gradient, radial-gradient

will-change: 改善渲染性能,使用CSS3 will-change提高頁面滾動、動畫等渲染性能

BFC、IFC

盒模型布局的CSS渲染模式

BFC：Black Formatting Context,塊級格式上下文。 BFC表現(xiàn)原則：內(nèi)部子元素再怎么折騰，都不會影響外部的元素，自成一方天地.
深入理解BFC

BFC形成（一條或多條都可以形成BFC）:

float 的值不為 none

position 的值不為 static 或 relative

display屬性為inline-boxs、table-cells、table-captions的不是塊盒的塊容器(除非這個值已經(jīng)被傳播到視口),

overflow不為visible的塊盒才會為它的內(nèi)容創(chuàng)建新的BFC。

body元素

IFC：Inline Formatting Context, 直譯"內(nèi)聯(lián)格式化上下文"，理解成行內(nèi)盒子模型. 高度由其包含行內(nèi)元素中最高的實(shí)際高度計(jì)算而來（不受到豎直方向的padding/margin影響)

對柵格的理解

基礎(chǔ)就是float 和 width:百分比

以規(guī)則的網(wǎng)格陣列來規(guī)范網(wǎng)頁中的版面布局以及信息分布。

盒子模型 加了box-sizing 之后怎樣

IE5.x 以及Quirks(怪異)模式的IE6，IE7中，border和padding都包含在width和height中。

標(biāo)準(zhǔn)瀏覽器中width和height僅僅包含content, 不包含border和padding。

CSS3定義了box-sizing屬性：box-sizing: content-box | border-box | inherit;
content-box: 該屬性維持CSS2.1盒模型的組成方式。border-box：該屬性將重新定義CSS2.1盒模型組成模式(與IE6解析相同)

樣式權(quán)重的排序

!important > id > class > tag[name=val] > tag

display有哪些屬性值，有什么作用？

none：元素不會顯示，而且改變元素現(xiàn)實(shí)的空間也不會保留

inline：將元素顯示為內(nèi)聯(lián)元素，元素前后沒有換行符

block:將元素顯示為塊級元素，元素前后會帶有換行符

inline-block：行內(nèi)塊元素

list-item：此元素會作為列表顯示

table: 會作為會計(jì)表格來顯示(類似table),表格前后帶有換行符.

inherit: 應(yīng)該從父級繼承display屬性的值

box: 彈性盒子模型(CSS3新增)

flex： flex布局(CSS3新增)

grid: 柵格盒模型值(CSS3新增)

MDN-display

1像素邊框問題

原因：由于移動端一般都會設(shè)置視口(屏幕寬度為設(shè)備寬度),width=device-width,initial-scale=1，而有些屏幕是2倍屏，導(dǎo)致在移動端上設(shè)置1px就是看上去的2px

解決方法：

通過transform將寬度縮小一半，transform:scaleY(0.5)

通過@media媒體查詢，查詢當(dāng)前設(shè)置的屏幕倍率，統(tǒng)一設(shè)置transform 移動端(手機(jī))1像素邊框真正實(shí)現(xiàn)

模仿淘寶的設(shè)置，將屏幕寬度為設(shè)計(jì)師的設(shè)計(jì)尺寸(一般為750)。

動態(tài)設(shè)置content

(function(e){if(!e["_med"])e["_med"]={};var t=e["_med"];t.cookie=function(e,t,a){if(t!==undefined){a=a||{};if(typeof a.expires==="number"){var o=a.expires,l=a.expires=new Date;l.setTime(+l+o*864e5)}return document.cookie=[e,"=",String(t),a.expires?"; expires="+a.expires.toUTCString():"",a.path?"; path="+a.path:"",a.domain?"; domain="+a.domain:"",a.secure?"; secure":""].join("")}var r=e?undefined:{};var i=document.cookie?document.cookie.split("; "):[];for(var n=0,s=i.length;n


（水平）居中有哪些實(shí)現(xiàn)方式


margin
margin



text-align
text-align


position+transform

  
transform



flex

  
flex



table+margin

  
table + margin
    




移動端的常見問題

點(diǎn)透事件 zepto的tap事件的點(diǎn)透問題的幾種解決方案

長時間按住頁面出現(xiàn)閃退問題
旋轉(zhuǎn)屏幕時，字體調(diào)整問題
上下拉動滾動條時卡頓，慢的問題

長時間按住頁面出現(xiàn)閃退問題
element {
  -webkit-touch-callout: none;
}
上下拉動滾動條時卡頓，慢的問題
body {
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}
旋轉(zhuǎn)時字體大小調(diào)整
/* 旋轉(zhuǎn)屏幕時，字體大小調(diào)整的問題 */
html, body, p, div {
    -webkit-text-size-adjust:100%;
}
忽略頁面中的電話號碼

資料
深入了解 CSS3 新特性
HTML5常見問題
JavaScript
跨域解決方式
JSONP,domain, window.name,ifrome，反向代理(nginx)
什么是閉包？閉包有什么作用？
閉包：函數(shù)里面套函數(shù)，外層函數(shù)無法訪問里面函數(shù)中的變量，里面函數(shù)可以訪問外層函數(shù)中的私有變量。
作用：防止全局變量
如何實(shí)現(xiàn)瀏覽器內(nèi)多個標(biāo)簽之間的通信
localStorage,cookie
HTML5的存儲方式有哪些？有何區(qū)別？
存儲方式：localStorage,sessionStorage
區(qū)別：存儲時間不一樣，localStorage本地永久存儲，sessionStroage頁面關(guān)閉，ctrl+f5存儲的值清空(f5刷新值存在).
內(nèi)存溢出

請求數(shù)據(jù)過大
死循環(huán)
引用對象，使用完不釋放
全局變量過多

表現(xiàn)：

意外的全局變量
被遺忘的計(jì)時器或回調(diào)函數(shù)
脫離 DOM 的引用
閉包

4類 JavaScript 內(nèi)存泄漏及如何避免
圖片懶加載
原理：訪問一個頁面的時候，把img或者background相關(guān)屬性的加載默認(rèn)圖（或者其它節(jié)約資源的圖片），當(dāng)圖片在可可視區(qū)域內(nèi)時，才設(shè)置圖片的真正路徑.
優(yōu)點(diǎn)：減輕服務(wù)器的壓力，用戶體驗(yàn)好（加載好的頁面更快呈現(xiàn)在用戶面前）
function elementInViewport(el) {
    var rect = el.getBoundingClientRect()
    
    // For invisible element.
    if (rect.top + rect.bottom + rect.left + rect.right + rect.height + rect.width === 0) {
      return false;
    }
    
    return (
       rect.top   >= 0
    // Pre load.
    && rect.top   <= ((window.innerHeight || document.documentElement.clientHeight) + 100)
    && rect.left  >= 0
    // Hide carousel except the first image. Do not add equal sign.
    && rect.left  < (window.innerWidth || document.documentElement.clientWidth)
    )
}
實(shí)現(xiàn)頁面加載進(jìn)度條
實(shí)現(xiàn)插件：PACE

AJAX （監(jiān)控所有AJAX請求）
Elements （檢查頁面上的特定元素存在）
Document （document 的 readyState 事件）
Event Lag （檢查正在執(zhí)行JavaScript的事件循環(huán)）

事件委托
利用事件冒泡和e.target來確定事件和元素。在jQuery中有$.delegate方法去代理事件。
事件委托原理：

需要綁定事件的元素很多，且處理邏輯類似。
元素都是動態(tài)創(chuàng)建，或頻繁增加，刪除，導(dǎo)致元素綁定事件過于復(fù)雜。

// https://github.com/zenorocha/delegate/blob/master/src/delegate.js

const delegate = (element, selector, type, callback) => {
  element.addEventListener(type, (e) => {
    let target = e.path.find(ele => ele.matches(selector))
    if (target) {
      callback.call(element, e);
    }
  });
};
實(shí)現(xiàn) extend 函數(shù)
淺拷貝使用ES6的Object.assign()
深拷貝：zepto extend
直接克隆一個Nested Object的簡便方法：
var origin = {a: "a"}
var copy = JSON.parse(JSON.stringify(origin));
為什么會有跨域的問題以及解決方式
前端解決跨域問題的8種方案, HTTP訪問控制（CORS）,瀏覽器的同源策略
產(chǎn)生原因：

處于安全考慮，瀏覽器會限制從腳本內(nèi)發(fā)起的跨域HTTP請求。 例如，XMLHttpRequset和Fetch都需要遵循同源策略
同源策略限制從一個源加載的文檔或腳本如何與來自另一個源的資源進(jìn)行交互。 這是一個用于隔離潛在惡意文件的關(guān)鍵的安全機(jī)制。

解決方式：

JSONP(JSON with Padding): 利用加載 JS 文件不需要遵循同源策略的原理。
CORS(Cross-Origin Resource Sharing): 在服務(wù)器端返回允許跨域訪問的頭。
WebSockt：利用 WebSocket 不需要遵循同源策略的原理。

JSONP原理、postMessage原理
can-anyone-explain-what-jsonp-is-in-layman-terms
JSONP 原理：加載一個 script，并執(zhí)行一段回調(diào) JS ，因?yàn)榧虞d JS 不需要遵循同源策略。

無法發(fā)送特定的頭部
只能是GET請求
無法發(fā)送 body

postMessage 文檔
動畫：setTimeout何時執(zhí)行，requestAnimationFrame的優(yōu)點(diǎn)
setTimeout 何時執(zhí)行:
tasks-microtasks-queues-and-schedules
requestAnimationFrame的優(yōu)點(diǎn)
【MDN】requestAnimationFrame
window.requestAnimationFrame() 方法告知瀏覽器執(zhí)行動畫，并請求瀏覽器調(diào)用指定的函數(shù)在下一次重繪之前更新動畫。該方法將在重繪之前調(diào)用的回調(diào)作為參數(shù)。
優(yōu)點(diǎn)：

在瀏覽器重繪前調(diào)用，保證瀏覽器渲染效率和性能
可以精準(zhǔn)地控制動畫的每一幀

主要在游戲，動畫方面使用。用這個方法可以保持較高幀頻率和效率。 比如一個60幀率的動畫，requestAnimationFrame一般會以16ms的間隔調(diào)用一次
手寫parseInt的實(shí)現(xiàn)：要求簡單一些，把字符串型的數(shù)字轉(zhuǎn)化為真正的數(shù)字即可，但不能使用JS原生的字符串轉(zhuǎn)數(shù)字的API，比如Number()
const parseInt = str => str - 0;
const parseInt = str => str / 1;
const parseInt = str => str * 1;
const parseInt = str => +str;
復(fù)雜寫法：
const parseInt = str => {
  let n = 0;
  let i = 1;
  str.split("").reverse().map(s => {
    n += i * (s.charCodeAt(0) - 48);
    i *= 10;
  });
  return n;
}
編寫分頁器組件的時候，點(diǎn)擊“下一頁”怎樣能確保還有數(shù)據(jù)可以加載（請求數(shù)據(jù)不會為空）？
服務(wù)器需要返回總數(shù)，當(dāng)前偏移量，根據(jù)總數(shù)和偏移量判斷是否是最后一頁。
ES6新增了哪些特性
ECMAScript 6 入門
require.js的實(shí)現(xiàn)原理（如果使用過webpack，進(jìn)一步會問，兩者打包的異同及優(yōu)缺點(diǎn)）
requireJS實(shí)現(xiàn)原理研究
相同點(diǎn)：都以模塊化方式組織代碼
不同點(diǎn)：

requirejs 只能加載JS文件
webpack 可以打包JS，CSS，甚至是圖片

promise的實(shí)現(xiàn)原理，進(jìn)一步會問async、await是否使用過
使用框架 ( vue / react 等)帶來好處( 相對jQuery )

MVVC架構(gòu)，數(shù)據(jù)驅(qū)動視圖，數(shù)據(jù)綁定，減少DOM操作。
組件化組織頁面，效率更高，維護(hù)更簡便。

Virtual Dom 帶來性能上的提升
路由控制，單頁應(yīng)用更為簡便

vue雙向數(shù)據(jù)綁定的實(shí)現(xiàn)
實(shí)現(xiàn)雙向數(shù)據(jù)綁定的關(guān)鍵是Observer. 即用戶改變了數(shù)據(jù)，框架如何知曉，并及時更新視圖。
vue2.17源碼學(xué)習(xí)
Observer實(shí)現(xiàn)包括：
參考：observer
Object.defineProperty
var obj = {}
Object.defineProperty(obj, "key", {
  enumerable: true,
  set(x) {
    console.log(`set key: ${x}`);
    obj.__ob__  = obj.__ob__ || {};
    obj.__ob__.key = x;
  },
  get() {
    return obj.__ob__.key;
  }
})
obj.key = "value";
/**
 * 輸出：
 * set key: value
 */
Proxy
var ele = {
  data: null
};
var handler = {
  get: function(target, key) {
    if (typeof target[key] === "object" && target[key] !== null) {
      return new Proxy(target[key], handler)
    } else {
      return target[key];
    }
  },
  set: function(target, key, value) {
    console.log("set " + key)
    target[key] = value;
    return value;
 }
}
ele = new Proxy(ele, handler);
ele.data = {a: "a", b: {bb: "bb"}}
ele.data.a = "aa";
ele.data.b.bb = "bb1";
ele.data.c = "cc";
/*
 * 輸出：
 * set data
 * set a
 * set bb
 * set c
 */
其他的數(shù)據(jù)操作，如：數(shù)組的push等，只需要在原生上加Hook就行了
var arr = [];
var __push = Array.prototype.push;

Array.prototype.push = function (...items) {
  console.log(`push: ${items}`);
  return __push.apply(this, items);
}

arr.push("value")
/**
 * 輸出：
 * push: value
 */
從視圖反向把數(shù)據(jù)流過來，稍微簡單些，只需要記錄對應(yīng)的key值，然后在輸入框觸發(fā)change, keypress事件的時候，更新對應(yīng)key的數(shù)據(jù)即可。
單頁應(yīng)用，如何實(shí)現(xiàn)其路由功能
Hash
// https://github.com/zhoukekestar/modules/blob/master/src/views/views.js
window.addEventListener("hashchange", () => {
  // 隱藏其他頁面
  Array.from(document.querySelectorAll(".page")).map(page => {
    page.style.display = "none";
  });
  // 根據(jù)hash值顯示對應(yīng)的頁面
  document.querySelector(location.hash).style.display = "block";
});
使用HASH實(shí)現(xiàn)的簡單路由 測試：在線測試
History
// https://github.com/zhoukekestar/modules/blob/master/src/loadpage/loadpage.js
// push 頁面
history.pushState("", "", url);
// pop 頁面
window.onpopstate = (e) => {
};
使用History實(shí)現(xiàn)的簡單路由,在線測試
項(xiàng)目中使用過哪些優(yōu)化方法

頁面靜態(tài)化，（Pug在靜態(tài)編譯后部署）

CDN加速, 多地緩存

前端渲染 (Data + View) / 后端渲染( SSR, SEO 等), 視具體情況選擇，如：
前端渲染，適合大流量的場景
后端渲染，適合SEO優(yōu)化，用戶體驗(yàn)提升等場景


縮減域名，以減少DNS解析時間，（可采用進(jìn)行優(yōu)化）
如果遇到域名解析的問題，可嘗試HTTPDNS方案

Combo服務(wù)器合并CSS，JS請求, 減少第一屏網(wǎng)絡(luò)請求。（如果采用HTTP2.0方案，資源合并可省略）
異步加載非核心業(yè)務(wù)和邏輯資源

資源和請求緩存，可參考緩存的答案
Cache-Control/Expires 前端緩存
Last-Modified/Etag 服務(wù)器端緩存，304

如果是和Native混合開發(fā)的，還可以使用Native緩存
DNS就近解析應(yīng)用服務(wù)器，需要和CDN配合使用

資料
網(wǎng)絡(luò)
靜態(tài)資源或者接口等如何做緩存優(yōu)化


redis/memcache做數(shù)據(jù)緩存
SQL 查詢做緩存
指定 Cache-Control/Expires 緩存時間
Last-Modified/Etag 緩存 ( 304 ) 方案
網(wǎng)關(guān)服務(wù)器做緩存，需要更新時，再回源到應(yīng)用服務(wù)器
CDN多機(jī)房，多網(wǎng)關(guān)緩存

輸入一個URL，Enter之后發(fā)生了什么
具體步驟:

把URL地址通過DNS解析為具體的服務(wù)器主機(jī)
瀏覽器封裝HTTP請求 (window.navigator.userAgent)
瀏覽器創(chuàng)建與服務(wù)器的TCP連接
瀏覽器發(fā)出HTTP請求
服務(wù)器收到請求后交給相應(yīng)的進(jìn)程處理
服務(wù)器把處理后的結(jié)果發(fā)送給瀏覽器
瀏覽器生成渲染樹和DOM樹渲染頁面
瀏覽器處理頁面中嵌入的資源和異步請求



瀏覽器解析URL，如：https://www.google.co.jp/?gfe_rd=cr&ei=NPJtWZTXJabEXoKjqOAP&gws_rd=ssl包括
協(xié)議：`http`,`https`等
域名：`www.google.co.jp`
資源路徑：`/`
參數(shù)查詢：`gfe_rd=cr`,關(guān)鍵詞`cr`


DNS
瀏覽器DNS緩存
HOSTS查詢
DNS服務(wù)器查詢
ARP查詢

TCP握手，TLS握手

HTTP(s),(或SPDY，或HTTP2.0)
Header
Domain
Body


Gateway/Nginx,網(wǎng)關(guān)和負(fù)載均衡服務(wù)器
查詢本地緩存
請求上游應(yīng)用服務(wù)器


瀏覽器解析HTML，并請求資源
CSS    
JS    
圖片

生成DOM-Tree,結(jié)合CSS進(jìn)行渲染

更為完整詳細(xì)：what-happens-when-zh_CN
前端的安全
前端的安全問題有哪些，如何解決

sql注入
shell注入
xss
csrf
對數(shù)據(jù)加密
對關(guān)鍵字進(jìn)行處理

sql注入
前端js防止SQL注入
思路：發(fā)現(xiàn)SQL注入位置(URL地址和Input輸入框)，判斷服務(wù)器類型和后臺數(shù)據(jù)庫類型.
解決方法：
URL地址防注入
// 過濾URL非法SQL字符
var sUrl = location.search.toLowerCase();
var sQuery = sUrl.substring(sUrl.indexOf("=") + 1); // 獲取查詢參數(shù)key
// SQL關(guān)鍵字
reg = /select|update|delete|truncate|join|union|exec|insert|drop|count|"|"|;|>|<|%/i;
if (reg.test(sQuery)) {
  console.log("輸入非法字符");
  location.href = sUrl.replace(sQuery, ""); // 重新跳轉(zhuǎn)
}
輸入文本框防注入
// 防止SQL注入
function AntiSqlValid(context) {
  reg = /select|update|delete|truncate|join|union|exec|insert|drop|count|"|"|;|>|<|%/i;
  if (reg.test(context.value)) {
    // 提示信息，其它操作
  }
  return;
} 
shell注入
代碼注入
常見的Shell注入資源有system()，StartProcess()，java.lang.Runtime.exec()，System.Diagnostics.Process.Start()以及類似的應(yīng)用程序接口
在請求地址上置換用戶提交的許多其他單字。
處理特殊字符：$,;,|,&&,||,>,<
XSS
英語：Cross-site scripting，通常簡稱為：XSS
網(wǎng)站應(yīng)用程序的安全漏洞攻擊，是代碼注入的一種.
造成的結(jié)果：可能得到更高的權(quán)限（如執(zhí)行一些操作）、私密網(wǎng)頁內(nèi)容、會話和cookie等各種內(nèi)容。
檢測方法
測試網(wǎng)站是否有正確處理特殊字符

>
=">
">



涉及到的知識：HTTP,Cookie,Ajax等。
XSS原理：
XSS：JavaScript代碼
DDOS
Server Limit DOS: HTTP頭超長，導(dǎo)致域名無法訪問。

獲取Cookie中的信息
破壞正常的頁面結(jié)構(gòu)，插入惡意內(nèi)容

XSS類型：


反射型
發(fā)出請求時，XSS代碼出現(xiàn)在URL中，作為輸入提交到服務(wù)器端，服務(wù)器端解析后響應(yīng)，XSS代碼隨響應(yīng)內(nèi)容一起傳回給瀏覽器,最后瀏覽器解析執(zhí)行XSS代碼。該過程像一次反射，稱之為：反射型XSS



存儲型
存儲型XSS和放射型XSS的差別僅在于，提交的代碼會存儲在服務(wù)器端（數(shù)據(jù)庫，內(nèi)存，文件系統(tǒng)等），下次請求目標(biāo)頁面時不用再提交XSS代碼



響應(yīng)頭：
// express框架
res.set("X-XSS-Protection", 0) // 默認(rèn)是瀏覽器攔截，設(shè)置為0之后，XSS代碼就生效
XSS預(yù)防措施：


編碼
對用戶輸入的數(shù)據(jù)進(jìn)行HTML Entity編碼


過濾
移除用戶上傳的DOM屬性，如onerror，與事件相關(guān)等
移除用戶上傳的Style節(jié)點(diǎn)，Script節(jié)點(diǎn)，Iframe節(jié)點(diǎn)等


校正
避免直接對HTML Entity解碼
使用DOM Parse轉(zhuǎn)換，校正不配對的DOM標(biāo)簽



跨站腳本
csrf
中文名稱：跨站請求偽造，也被稱為：one click attack/session riding，縮寫為：CSRF/XSRF。
理解成：攻擊者盜用了你的身份，以你的名義發(fā)送惡意請求.
CSRF攻擊是源于WEB的隱式身份驗(yàn)證機(jī)制。WEB的身份驗(yàn)證機(jī)制雖然可以保證一個請求是來自于某個用戶的瀏覽器，但卻無法保證該請求是用戶發(fā)送的。 
CSRF的前端防御：
在每次POST，GET請求時，添加X-CSRFToken請求頭。

用戶操作限制，比如驗(yàn)證碼；
請求來源限制，比如限制HTTP Referer才能完成操作；
token驗(yàn)證機(jī)制，比如請求數(shù)據(jù)字段中添加一個token，響應(yīng)請求時校驗(yàn)其有效性；

前后端分離架構(gòu)下CSRF防護(hù)機(jī)制
npm
暫時指定代理
// npm install mongoose --registry 內(nèi)網(wǎng)ip
npm install mongoose --registry http://172.18.0.199
永久指定代理
// npm config set registry 內(nèi)網(wǎng)ip
npm config set registry "http://172.18.0.199"
使用nrm動態(tài)切換代理
npm install -g nrm
測試代理最快
nrm test