JS一些碎知識點
一些js基本知識點
Doctype 瀏覽器渲染模式
- 渲染模式發展歷史
在多年以前（IE6誕生以前），各瀏覽器都處於各自比較封閉的發展中（基本沒有兼容性可談）。隨著WEB的發展，兼容性問題的解決越來越顯得迫切，隨即，各瀏覽器廠商發布了按照標準模式（遵循各廠商制定的統一標準）工作的瀏覽器，比如IE6就是其中之一。但是考慮到以前建設的網站並不支持標準模式，所以各瀏覽器在加入標準模式的同時也保留了混雜模式（即以前那種未按照統一標準工作的模式，也叫怪異模式）。
‘
-
標準模式（不兼容之前的語法）
-
html 4.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -
xhtml 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> -
html5
<!DOCTYPE html> -
P.S. 細心的你可以看出隨著html版本的發展，標準模式的寫法也在變化著
-
-
怪異模式 / 混雜模式
-
很簡單，將開頭標準模式的聲明去掉即可
-
IE6的怪異模式，有個新的盒模型，border和padding都屬於寬高的範疇
-
label
-
label中有一個for屬性，可以將該label和一個input綁定，當我們點擊該label的文字時，input也回聚焦
-
for 屬性 — > js中表示htmlFor
<label for="input">User:</label>
<input id="input" type="text" name="user" value="" placeholder="請輸入用戶名" />
圖片預加載
-
假設這樣一種需求，在文檔加載完畢後的某個時刻，可能幾秒後，可能幾分鐘後，也可能半小時後，我們要通過js動態插入一張10M的大圖片？
-
會產生這樣的問題？圖片太大，網速又不快，所以圖片加載需要很長時間，所以導致頁面上的那個圖片只呈現了部分，甚至沒有呈現，一片空白，形成了極其差的用戶體驗。
-
如何解決呢？那就是圖片預加載，在圖片還沒動態插入之前，我們就創造img節點，並為之設置src，在設置src後，瀏覽器就會開始下載src上的資源，然後在我們需要的時候即可瞬間插入文檔
-
啟發？在請求的資源需要加載很長時間的情況下，我們可以預加載，在需要使用的時候，直接用就可以，極大提高了用戶體驗
封裝 getElementsByClassName(); IE8及以下不兼容
-
類名、id名不像js標識符命名那麽規範，盡量別用特殊字符就行
-
js標識符規範，由字母，數字，下劃線，$ 組成，但不能以數字開頭
// 封裝js中的getElenmentsByClassName(); Document.prototype.getByClassName = function (className) { var allEle = document.getElementsByTagName(‘*‘); var retArr = { length: 0, push: Array.prototype.push }; var len = allEle.length; var regBlank = /^\s|\s$/g; for(var i = 0; i < len; i++) { var strForClass = allEle[i].className allEle[i].className && allEle[i].className.replace(regBlank, ‘‘).indexOf(className) !== -1 && retArr.push(allEle[i]); } return retArr; }
Math對象
-
Math.sqrt()
- 開方
-
Math.floor()
- 向下取整
-
Math .ceil()
- 向上取整
-
Math.random()
-
Math.random() (0, 1)
-
eg： (5, 15) －》 Math.random() * 10 + 5
-
先看區間 15 - 5 = 10
-
再看起始點 5
-
所以Math.random() * 10 + 5
-
文檔碎片
-
每次我們操作dom都會引起Reflow 或 Repaint，所以過多次的dom操作會降低性能
-
但是我們可以將一些dom操作集合起來再操作dom，可減少Reflow或Repaint
-
創建文檔碎片
-
var frag = document.createDocumentFragment();
-
該碎片具有正常dom節點的所有方法
-
var frag = document.createDocumentFragment(); var div = document.createElement(‘div‘); var span = document.createElement(‘span‘); frag.sppendChild(div); frag.appendChild(span); document.body.appendChild(frag);
cdn
-
基站
-
CDN的全稱是Content Delivery Network，即內容分發網絡。
-
原理：
簡單地說，內容分發網絡(CDN)是一個經策略性部署的整體系統，包括分布式存儲、負載均衡、網絡請求的重定向和內容管理4個要件，而內容管理和全局的網絡流量管理(Traffic Management)是CDN的核心所在。
通過用戶就近性和服務器負載的判斷，CDN確保內容以一種極為高效的方式為用戶的請求提供服務。總的來說，內容服務基於緩存服務器，也稱作代理緩存(Surrogate)，
它位於網絡的邊緣，距用戶僅有"一跳"(Single Hop)之遙。同時，代理緩存是內容提供商源服務器（通常位於CDN服務提供商的數據中心）的一個透明鏡像。
這樣的架構使得CDN服務提供商能夠代表他們客戶，即內容供應商，向最終用戶提供盡可能好的體驗，而這些用戶是不能容忍請求響應時間有任何延遲的。JS一些碎知識點