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

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

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

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

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

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

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

HTML Geolocation - 地理位置

HTML Drag and Drop - 拖放

HTML Local Storage - (本地存儲(chǔ))

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

HTML Web Workers - Web Workers

HTML Canvas/WebGL - Canvas WebGL

HTML Audio/Video - Audio Video

元素與屬性

文件類型聲明:。

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

新增常用元素: section（寫文章的時(shí)候會(huì)經(jīng)常用到，w3school中說(shuō)：文檔中的節(jié)（section、區(qū)段）。比如章節(jié)、頁(yè)眉、頁(yè)腳或文檔中的其他部分。）, 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)擊）時(shí)出現(xiàn)的菜單), draggable(用于標(biāo)識(shí)元素是否允許使用 拖放操作API 拖動(dòng)), dropzone, hidden, spellcheck

input和textarea的區(qū)別

input

需要type值

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

寬高只能通過(guò)CSS樣式指定

textarea

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

使用row、col指定大小

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

移動(dòng)設(shè)備忽略將頁(yè)面中的數(shù)字識(shí)別為電話號(hào)碼的方法

設(shè)置mate

doctype的作用是什么

激活不同瀏覽器渲染模式

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

屬性: for和accesskey

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

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

png8、24的區(qū)別是

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

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

請(qǐng)說(shuō)下移動(dòng)端常見(jiàn)的適配不同屏幕大小的方法

Rem布局

流式布局

Felx布局

移動(dòng)端布局
移動(dòng)端H5頁(yè)面適配問(wèn)題研究
移動(dòng)web適配利器-rem

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

利于SEO優(yōu)化。

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

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

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

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

問(wèn)題：

頁(yè)面卡頓，幀率下降

優(yōu)化：

采用Virtual DOM， virtual-dom

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

及時(shí)移走頁(yè)面不用的DOM

避免不必要的DIV嵌套

頁(yè)面的渲染過(guò)程

解析整個(gè)HTML，得到DOM樹(shù)和樣式樹(shù)

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

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

然后開(kāi)始繪制整個(gè)頁(yè)面并顯示

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

高性能DOM

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

DOM性能優(yōu)化：

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

DOM初始化過(guò)程（瀏覽器）

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

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

JS邏輯組織（人為）

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

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

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

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

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

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

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

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

前端工程師手冊(cè)
維基百科HTML5
MDN-HTML5

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

absolute + padding

    
left
    
right

flex

    
left
    
right

float

    
left
    
right

CSS3用過(guò)哪些新特性

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)個(gè)90或180度 
translate 位置移動(dòng)
scale, skew, matrix 等
3D 轉(zhuǎn)換
rotate(XYZ) 根據(jù)x,y,z軸旋轉(zhuǎn)
translate(XYZ), scale(XYZ)  
perspective 透視, 景深，這個(gè)很多3D效果都要設(shè)置一下，不然3D還是會(huì)”2D”的效果

transition: 過(guò)渡，好多簡(jiǎn)單的動(dòng)畫，移個(gè)位置，變個(gè)長(zhǎng)短.

animation: 動(dòng)畫，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提高頁(yè)面滾動(dòng)、動(dòng)畫等渲染性能

BFC、IFC

盒模型布局的CSS渲染模式

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

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

float 的值不為 none

position 的值不為 static 或 relative

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

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

body元素

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

對(duì)柵格的理解

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

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

盒子模型 加了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：元素不會(huì)顯示，而且改變?cè)噩F(xiàn)實(shí)的空間也不會(huì)保留

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

block:將元素顯示為塊級(jí)元素，元素前后會(huì)帶有換行符

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

list-item：此元素會(huì)作為列表顯示

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

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

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

flex： flex布局(CSS3新增)

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

MDN-display

1像素邊框問(wèn)題

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

解決方法：

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

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

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

動(dòng)態(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
    




移動(dòng)端的常見(jiàn)問(wèn)題

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

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

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

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

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

表現(xiàn)：

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

4類 JavaScript 內(nèi)存泄漏及如何避免
圖片懶加載
原理：訪問(wèn)一個(gè)頁(yè)面的時(shí)候，把img或者background相關(guān)屬性的加載默認(rèn)圖（或者其它節(jié)約資源的圖片），當(dāng)圖片在可可視區(qū)域內(nèi)時(shí)，才設(shè)置圖片的真正路徑.
優(yōu)點(diǎn)：減輕服務(wù)器的壓力，用戶體驗(yàn)好（加載好的頁(yè)面更快呈現(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)頁(yè)面加載進(jìn)度條
實(shí)現(xiàn)插件：PACE

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

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

需要綁定事件的元素很多，且處理邏輯類似。
元素都是動(dòng)態(tài)創(chuàng)建，或頻繁增加，刪除，導(dǎo)致元素綁定事件過(guò)于復(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
直接克隆一個(gè)Nested Object的簡(jiǎn)便方法：
var origin = {a: "a"}
var copy = JSON.parse(JSON.stringify(origin));
為什么會(huì)有跨域的問(wèn)題以及解決方式
前端解決跨域問(wèn)題的8種方案, HTTP訪問(wèn)控制（CORS）,瀏覽器的同源策略
產(chǎn)生原因：

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

解決方式：

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

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

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

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

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

主要在游戲，動(dòng)畫方面使用。用這個(gè)方法可以保持較高幀頻率和效率。 比如一個(gè)60幀率的動(dòng)畫，requestAnimationFrame一般會(huì)以16ms的間隔調(diào)用一次
手寫parseInt的實(shí)現(xiàn)：要求簡(jiǎ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;
}
編寫分頁(yè)器組件的時(shí)候，點(diǎn)擊“下一頁(yè)”怎樣能確保還有數(shù)據(jù)可以加載（請(qǐng)求數(shù)據(jù)不會(huì)為空）？
服務(wù)器需要返回總數(shù)，當(dāng)前偏移量，根據(jù)總數(shù)和偏移量判斷是否是最后一頁(yè)。
ES6新增了哪些特性
ECMAScript 6 入門
require.js的實(shí)現(xiàn)原理（如果使用過(guò)webpack，進(jìn)一步會(huì)問(wèn)，兩者打包的異同及優(yōu)缺點(diǎn)）
requireJS實(shí)現(xiàn)原理研究
相同點(diǎn)：都以模塊化方式組織代碼
不同點(diǎn)：

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

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

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

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

vue雙向數(shù)據(jù)綁定的實(shí)現(xiàn)
實(shí)現(xiàn)雙向數(shù)據(jù)綁定的關(guān)鍵是Observer. 即用戶改變了數(shù)據(jù)，框架如何知曉，并及時(shí)更新視圖。
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ù)流過(guò)來(lái)，稍微簡(jiǎn)單些，只需要記錄對(duì)應(yīng)的key值，然后在輸入框觸發(fā)change, keypress事件的時(shí)候，更新對(duì)應(yīng)key的數(shù)據(jù)即可。
單頁(yè)應(yīng)用，如何實(shí)現(xiàn)其路由功能
Hash
// https://github.com/zhoukekestar/modules/blob/master/src/views/views.js
window.addEventListener("hashchange", () => {
  // 隱藏其他頁(yè)面
  Array.from(document.querySelectorAll(".page")).map(page => {
    page.style.display = "none";
  });
  // 根據(jù)hash值顯示對(duì)應(yīng)的頁(yè)面
  document.querySelector(location.hash).style.display = "block";
});
使用HASH實(shí)現(xiàn)的簡(jiǎn)單路由 測(cè)試：在線測(cè)試
History
// https://github.com/zhoukekestar/modules/blob/master/src/loadpage/loadpage.js
// push 頁(yè)面
history.pushState("", "", url);
// pop 頁(yè)面
window.onpopstate = (e) => {
};
使用History實(shí)現(xiàn)的簡(jiǎn)單路由,在線測(cè)試
項(xiàng)目中使用過(guò)哪些優(yōu)化方法

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

CDN加速, 多地緩存

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


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

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

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

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

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


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

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

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



瀏覽器解析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ù)器
查詢本地緩存
請(qǐng)求上游應(yīng)用服務(wù)器


瀏覽器解析HTML，并請(qǐng)求資源
CSS    
JS    
圖片

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

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

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

sql注入
前端js防止SQL注入
思路：發(fā)現(xiàn)SQL注入位置(URL地址和Input輸入框)，判斷服務(wù)器類型和后臺(tái)數(shù)據(jù)庫(kù)類型.
解決方法：
URL地址防注入
// 過(guò)濾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注入
代碼注入
常見(jiàn)的Shell注入資源有system()，StartProcess()，java.lang.Runtime.exec()，System.Diagnostics.Process.Start()以及類似的應(yīng)用程序接口
在請(qǐng)求地址上置換用戶提交的許多其他單字。
處理特殊字符：$,;,|,&&,||,>,<
XSS
英語(yǔ)：Cross-site scripting，通常簡(jiǎn)稱為：XSS
網(wǎng)站應(yīng)用程序的安全漏洞攻擊，是代碼注入的一種.
造成的結(jié)果：可能得到更高的權(quán)限（如執(zhí)行一些操作）、私密網(wǎng)頁(yè)內(nèi)容、會(huì)話和cookie等各種內(nèi)容。
檢測(cè)方法
測(cè)試網(wǎng)站是否有正確處理特殊字符

>
=">
">



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

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

XSS類型：


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



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



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


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


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


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



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

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

前后端分離架構(gòu)下CSRF防護(hù)機(jī)制
npm
暫時(shí)指定代理
// 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動(dòng)態(tài)切換代理
npm install -g nrm
測(cè)試代理最快
nrm test