前端技術細節（不斷更新中）

阿新 • • 發佈：2019-01-12

前端的知識點比較碎，所以需要不斷的學習鞏固。

1，reflow和repaint：迴流和重繪。
迴流：renderTree 重建。
重繪：外觀樣式風格進行更新。（color更改）
頁面在第一次載入時候必須進行了迴流操作，有迴流一定伴隨重繪，但是重繪不一定迴流。
減少迴流和重繪，也就是減少對renderTree的操作：
合併多次多DOM的修改

2.瀏覽器對頁面的呈現流程基本如下：
1）瀏覽器把獲取到的html程式碼解析成一個DOM樹，每個tag都是樹上的一個節點，根節點就是document物件，包括（display：none，和js動態建立的節點）
2）瀏覽器把所有樣式解析成樣式結構體（定義的和代理的所有樣式），不同瀏覽器會自動去掉不能識別的樣式。
3）DOM Tree 和樣式結構體合併生成 RenderTree，每個節點都有style，不包含隱藏的節點（display:none），但是包含不可見的節點(visibility:hidden)。
4）瀏覽器根據RenderTree 繪製頁面

3.記憶體洩漏
對於持續執行的服務程序，必須及時釋放不再用到的記憶體，不然記憶體會越來越多，導致程序越來越慢，甚至系統崩潰。
不用到的記憶體沒有及時釋放，就叫記憶體洩漏。
垃圾回收機制：引用計數法。如果一個值的引用次數為0，則證明不再使用，可以釋放。如果引用次數不為0，卻不再使用，無法釋放，導致了記憶體洩漏。
如何檢測是否存在：谷歌控制檯—memory–timeline
原因：
1）全域性變數（可以在js檔案開頭‘use strict’,嚴格解析，阻止意外的全域性變數產生）
2）沒有及時清理定時器
3）閉包
4）超出DOM的引用

4，

const 只宣告，不賦值會報錯；一旦賦值，就不能修改，否則也報錯，不存在變數提升，常量
let 塊級作用域，不能重複宣告，不存在變數提升
var 函式作用域，可以重複宣告

5.三列布局，兩邊定寬，中間自適應

6，兩列布局，左邊定寬，右邊自適應
1）

2）

7，
flex
設定為flex佈局後，子元素的float，vertical-align，clear屬性失效。
容器屬性：
flex-direction:row/row-reverse/columu/columu-reverse
flex-wrap:nowrap/wrap/wrap-reverse(換行)
flex-flow:flex-direction|flex-wrap(以上兩種簡寫)
主軸：justify-content:flex-start(左對齊）/ flex-end(右對齊)/center(居中)/space-between(間隔相等，最左最右對齊)/space-around(每個專案左右相等)
交叉軸:align-items:flex-start(上對齊)/flex-end(下對齊)/center(居中)/baseline(基線對齊)/stretch(佔滿整個容器高度)
專案屬性：
order:數值（越小越靠前）
flex-grow:放大倍數（預設是0）
flex:0/1/auto（簡寫）
align-self:auto/flex-start/flex-end/baseline/stretch

8,
垂直水平居中

3).

9，
position
absolute:最近的positioned的祖先元素，如果祖先都沒有positioned，相對於body
relative:偏移正常位置，其他元素不受影響
fixed:固定定位，即使滾動頁面，也不會改變相對瀏覽器視窗的位置
static：預設值，沒有positioned

10.position
absolute:最近的positioned的祖先元素，如果祖先都沒有positioned，相對於body
relative:偏移正常位置，其他元素不受影響
fixed:固定定位，即使滾動頁面，也不會改變相對瀏覽器視窗的位置
static：預設值，沒有positioned
10，
分析輸入URL到頁面被返回的過程：
1）輸入地址
2）瀏覽器查詢IP地址（DNS查詢：瀏覽器快取–系統快取–路由快取–遞迴搜尋）
3）瀏覽器給web伺服器傳送一個http請求
4）伺服器給瀏覽器返回一個永久重定向301（有利於搜素引擎SEO，兩個地址都看作同一個地址，增加了訪問量；增強快取友好性）
5）瀏覽器跟蹤從定向的地址，繼續傳送另一個請求
6）伺服器處理請求
7）伺服器返回200的反應
8）瀏覽器顯示HTML
9）瀏覽器傳送獲取嵌入在HTML中的物件的請求（靜態檔案資源）
10）瀏覽器傳送非同步ajax請求（頁面顯示完成後，瀏覽器仍與伺服器連線）

11，
變數提升：只提升宣告，不提升賦值

12，
DNS又稱域名系統，用來解析可讀主機名（www.baidu.com）為機器可讀的IP地址(204.13.248.115)
DNS是如何工作的：
1）本地DNS快取查詢，如果未查到結果，則進行第二步驟；
2）計算機聯絡ISP（網路服務提供商）的遞迴DNS伺服器，執行DNS查詢；如果未查詢到，進行第三步驟；
3）詢問根域名伺服器，（從右向左），將請求指向(.com)對應的頂級域伺服器（TLD.com），繼續檢查下一個資訊（baidu），並將查詢指向負責此域名的伺服器。這些權威的伺服器將資訊儲存在DNS中。
4）遞迴伺服器從權威伺服器獲取到記錄，並存在本地快取中。(記錄都是有有效期的）
5）返回計算機

webStorage和cookie
cookie：儲存量4KB左右，比webStorage儲存小，且方式不直觀
webStorage：
localStorage:本地永久儲存，除非主動刪除，不然不會消除；
sessionStorage：瀏覽器頁面開啟中會存在，關閉頁面，資料消失；
API：setItem()，getItem()，removeItem()，clear()，addEventListener()

14
跨域問題
js語言安全機制–同源策略（同一協議，同一域名，同一埠號）引起的跨域問題。
解決方案：
1）jsonp實現跨域
動態建立script標籤，src屬性值為跨域地址+傳入的資料+回撥函式。執行完之後再動態刪除之前建立的script.

2)H5的postMessage(message,targetOrigin)
向其他window物件傳送message，通過監聽其他物件message事件，來獲取傳過來的資訊。

3)document.domain
試用情況：主域相同，子域不同的情況；通過控制iframe

15，
獲取url的指定引數：

16,
事件監聽
事件監聽
事件流：捕獲型事件（從外向內）和冒泡型事件（從內向外）
使用‘return false’阻止預設行為（提交按鈕，超連結）
1）繫結HTML元素上

2）繫結到DOM上

3）addEvent:可以新增多個事件

17，
前端效能優化
content方面：
content方面：
1）減少HTTP請求（CSS Sprites，合併多個CSS檔案和js檔案）
2）減少DNS查詢（主流瀏覽器都是有自己獨有的快取，而不是作業系統的；一個網站最少2個域，但不多餘四個）
3）使用AJAX快取
4）延遲載入元件，預載入元件
5）減少DOM節點數量
6）最小化Iframe的數量
server方面：
1）使用內容分發網路（CDN）（網站內容分散到多個CDN，處在不同地域位置的訪問下載速度快）
2）使用Etag(判斷瀏覽器快取和伺服器的原始內容是否匹配)
3）對Ajax請求用Get
cookie方面：
1）減少cookie大小
Css方面
1）避免使用css表示式
2）使用link代提import
3）放在head中
圖片方面：
1）優化圖片大小
2）通過CSS Sprites整合圖片
JS方面：
1）減少對DOM的操作
2）js和CSS檔案外部引入
3）放在頁面底部
18，
promise
函式回撥成功

函式回撥失敗：

catch語法：（和失敗語法意義相同）

不同點：

macro-task: script（整體程式碼）, setTimeout, setInterval, setImmediate, I/O, UI rendering
micro-task: process.nextTick, 原生Promise, Object.observe, MutationObserver
在執行完主執行緒的任務後，會去看micro-task佇列，把所有任務依次執行，之後再去看macro-task佇列。

20，
js模組化的發展歷程
第一階段：無模組化
一個JS檔案相當於一個模組，引入多個JS檔案
第二階段：CommonJS規範
起初是用在node端的，前端的webpack也支援原生CommonJS的。
通過require方法同步載入所需要依賴的模組，然後通過module.exports或者exports匯出對外暴露的介面，解決了全域性變數汙染的問題。

注意：因為module.exports本身就是一個物件，所以，我們在匯出時可以使用 module.exports = {foo: ‘bar’} 和 module.exports.foo = ‘bar’。但是, exports 是 module.exports 的一個引用，或者理解為exports是一個指標，exports指向module.exports，這樣，我們就只能使用 exports.foo = ‘bar’ 的方式，而不能使用exports = {foo: ‘bar’}這種方式，因為exports = {foo: ‘bar’}這種方式的使用就會導致exports指向了別的物件。
第三階段：AMD規範
非同步載入模組，實現是require.js。適合瀏覽器端。非同步載入，依賴前置。
requrie([module]，callback)//引用模組
define(‘id’,[depends],callback)//定義模組

第四階段：CMD規範
按需載入，依賴就近，同樣實現了瀏覽器端的模組化載入。sea.js

第五階段：ES6模組化
import匯入—export匯出

21，
js中陣列方法：
forEach:讓陣列中每個item做一件事（例如：輸出item）；
map:讓陣列中每個item進行某種運算，返回新陣列（例如：*2）；
filter：選出符合條件的item，組合成新陣列（例如：>4）；
reduce:陣列中前後兩項進行相應操作，返回最終結果（例如：相乘）；
every:陣列中所有item都滿足條件才會返回true；
some:只要有一個滿足條件，就返回true；

22，
陣列去重
ES6：

ES5：

24，
box-sizing:content-box
盒子總寬度 = margin + border + padding + content(width)

盒子總寬度 = margin + width(margin + padding + border)
box-sizing:border-box

通知變化給訂閱者（watcher），訂閱者看是否需要更新。同時需要一個指令解析器（compile），掃描解析每個元素節點，根據相關指令初始化成一個訂閱者，並且替換模板資料或者繫結更新函式。

26，
DOM,Jquery,React
DOM:文件對應的物件模型；
jQuery和react都是庫。
jQuery是一個JS庫，開發者使用它直接和DOM進行溝通。
React：給開發者和DOM直接建立了聯絡。他的三項核心技術：
1）響應式UI
2）虛擬DOM
3）元件
27，
this 在js中的使用

28,
斐波那契數列

31，
CSS3屬性
CSS3 2D轉換：
CSS3 2D轉換：
translate（50px,100px）平移
rotate(30deg) 旋轉
scale(2,4) 放大或縮小
skew(30deg,30deg) 翻轉
CSS3 3D轉換：

translateX/Y/Z平移
rotateX/Y/Z 旋轉
scaleX/Y/Z 放大或縮小
CSS3過渡
transition : width 2s liner 2s (CSS屬性、持續時間、動畫曲線、開始時間)

CSS3動畫
@keyframes myfirstdiv {
from{ background:yellow}
to{background:green}
}
或者
@keyframes myfirstdiv
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
animation: myfirstdiv 5s
32，
css hack手段
解決瀏覽器相容問題，跨平臺應用
1）IE條件註釋法

2）css屬性字首法

3）選擇器字首法

33，
var 重複宣告

var可以重複宣告，如果重複宣告的一個變數有初始值，那就相當於複製語句；如果沒有初始值，則對之前宣告不會有任何影響.
34,
js繼承
1）

2）

5）

35，
1）instanceof
arr instanceof Array //true
2）constructor
arr.constructor === Array //true
arr._ proto _.constructor === Array //true
instanceof 和constructor 判斷的變數，必須在當前頁面宣告的，比如，一個頁面（父頁面）有一個框架，框架中引用了一個頁面（子頁面），在子頁面中聲明瞭一個ary，並將其賦值給父頁面的一個變數，這時判斷該變數，Array == object.constructor;會返回false；
原因：
1、array屬於引用型資料，在傳遞過程中，僅僅是引用地址的傳遞。
2、每個頁面的Array原生物件所引用的地址是不一樣的，在子頁面宣告的array，所對應的建構函式，是子頁面的Array物件；父頁面來進行判斷，使用的Array並不等於子頁面的Array；切記，不然很難跟蹤問題！
3） Object.prototype.toString.call(a) //[object Array]
4 ） Array.isArray(arr) //true
36,
迴文字串判斷

38，
npm install react --save
npm install 安裝所有依賴
webpack 進行打包
babel-loader 把ES6轉換成ES5

webpack dev server 搭建本地伺服器；自動重新整理
node server 把app掛載到本地伺服器上
webpack dev serve --hot --inline 要想讓HMR生效，就要在應用熱替換模組或者根模組加入允許熱替換的程式碼
jQuery 事件驅動。使用者點選button，派發事件，根據事件更新操作UI
react 資料驅動。會把資料對映到UI上，不用管UI。核心思想就是模組化元件化。
資料：state（元件本身的資料）和props（其他元件傳入的資料）
第一次載入元件涉及到的元件生命週期順序：

react-router:
browserHistory: baidu.com/a/b
hashHistory: baidu.com/#a/b
react-router元件: 裝載頁面的元件，把元件傳給他來展示頁面
indexRoute：第一次進入系統，沒有存入URL的時候
Route
頁面切換的時候元件會被銷燬，所以根據需求把相應功能放在根元件裡。
事件訂閱：全域性事件管理器，釋出事件操作，只要訂閱事件的部分，就會監聽到事件，做事件處理。
virtual Dom : 儲存DOM資訊的資料結構，存在記憶體當中，也就是JS物件中，能夠完整描述DOM的結構。
DOM Diff：對比兩個virtual Dom ，資料更新的時候會生成新的virtual Dom