[web] 前端一些細節

做者：水落斜陽
連接：https://www.jianshu.com/p/7a8124fdf945
來源：簡書
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

 

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.三列布局，兩邊定寬，中間自適應

 

 

 

 

 

2）

 

 

 

 

3）

 

 

 

 

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語法：（和失敗語法意義相同）

 

 

不一樣點：

 

 

19，
js單線程，執行完主線程，瀏覽器維護一個任務隊列task queue；主線程的任務執行完，去task queue中拿最早放進queue的task放到主線程，循環反覆event loops

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：

 

 

23,

 

 

 

 

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

 

 

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

 

 

25,
vue數據雙向綁定原理及實現
1，對數據劫持監聽
Obj.defineProperty()監聽全部屬性是否變化，給屬性設置set函數，當數據改變了就會觸發set函數。讀取的時候觸發get函數。
2，結合發佈者-訂閱者模式

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

 

 

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

 

 

28,
斐波那契數列

 

 

29,
增長原生字符串方法

 

 

30，
同字母異序（兩個字符串，由相同字母組成，字母順序能夠不一樣）

 

 

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）

 

 

3）

 

 

4）

 

 

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；
緣由：
一、array屬於引用型數據，在傳遞過程當中，僅僅是引用地址的傳遞。
二、每一個頁面的Array原生對象所引用的地址是不同的，在子頁面聲明的array，所對應的構造函數，是子頁面的Array對象；父頁面來進行判斷，使用的Array並不等於子頁面的Array；切記，否則很難跟蹤問題！
3） Object.prototype.toString.call(a) //[object Array]
4 ） Array.isArray(arr) //true
36,
迴文字符串判斷

 

 

37，
解決for循環輸出最後一個值的問題
JS單線程緣由，後調用setTimeout，此時for循環已經執行完了

 

 

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

 

 

解決方案：immutable
組件間通訊方式：
一、事件回調，
二、事件訂閱（缺少統一管理），
三、redux（統一對系統事件的管理）
39，
ES6解構賦值

 

 

變量名必須和屬性名一致，node.name的值存給了變量名爲name的變量。
40，
new四部曲
1.首先在內存堆上開闢一個空間存儲對象
2.this會指向實例也就是指向當前對象
3.設置屬性和方法,執行代碼塊
4.返回實例,也就是當前對象
41，
重排序數組

 

 

42,

 

 

淺拷貝和深拷貝
淺拷貝：兩個對象同時指向一個引用地址，一個修改，其餘也跟着變。地址存放在棧中。數據在堆中。

 

 

深拷貝：
1.單層對象，沒有嵌套

 

 

 

 

 

 

深拷貝：
1.單層對象，沒有嵌套

2.多層嵌套（以上三種 方法很差使了）
JSON對象的parse和stringify

 

 

對於正則表達式類型、函數類型等沒法進行深拷貝(並且會直接丟失相應的值)。它會拋棄對象的constructor。也就是深拷貝以後，無論這個對象原來的構造函數是什麼，在深拷貝以後都會變成Object。

43,
this問題

全局做用域中的this指向window
函數體內的this 哪一個對象調用這個函數，this指向誰

 

 

44,
ajax請求過程
1，建立XMLHttpRequest對象（異步調用對象）
2，建立新的HTTP請求，指定方法，URL和驗證信息
3，發送HTTP請求
4，異步處理請求的數據

 

 

45，
url轉換成json

 

 

46，
js中的遍歷
object獨有遍歷方法
1

 

 

2

 

 

3

 

 

數組獨有遍歷方法

 

 

 

 

for...in遍歷數組index，對象key

 

 

47,
ES6數組的擴展
1.複製、合併數組

 

 

2.rest參數必須在數組最後一項

 

 

3.類數組轉爲數組

 

 

4,

 

 

Array()存在不足，當參數爲1個時候，參數爲數組長度，當參數大於1時，參數爲數組值

 

 

6.Array.prototype.copyWithin(target, start = 0, end = this.length):
target:複製到哪裏去
start:從哪裏開始
end:從哪裏結束
start和end若爲負數，則是倒數 數組

 

 

find返回第一個符合條件的成員，若沒有，返回undefind；
findIndex:返回第一個符合條件的成員位置，若沒有，返回-1;
includes:返回true或者false，第二個參數爲從哪裏開始查找，如果負數，則倒

 

 

 

 

 

 

 

 

 

 

8.fill:填充數組

 

 

9.flat 拉平數組

 

 

 

 

0人點贊

 

前端 隨筆