6.28心得
查文檔碎片
文檔碎片:類似一個臨時的文檔，要所有要加的dom元素先放在這裏，達到不要每次操作dom元素
提高頁面效率
代碼
var d1 = new Date();
//創建十個段落,常規的方式
for(var i = 0 ; i < 1000; i ++) {
var p = document.createElement("p");
var oTxt = document.createTextNode("段落" + i);
p.appendChild (oTxt);
document.body.appendChild(p);
}
var d2 = new Date();
document.write("第一次創建需要的時間:"+(d2.getTime()-d1.getTime()));
//使用了createDocumentFragment()的程序
var d3 = new Date();
var pFragment = document.createDocumentFragment();
for(var i = 0 ; i < 1000; i ++) {
var p = document.createElement("p");
var oTxt = document.createTextNode("段落" + i);
p.appendChild(oTxt);
pFragment.appendChild(p);
}
document.body.appendChild(pFragment);
var d4 = new Date();
document.write("第2次創建需要的時間:"+(d4.getTime()-d3.getTime()));
IO操作
I/O輸入/輸出(Input/Output)，分為IO設備和IO接口兩個部分。
在POSIX兼容的系統上，例如Linux系統，I/O操作可以有多種方式，比如DIO(Direct I/O)，
AIO(Asynchronous I/O，異步I/O)，Memory-Mapped I/O(內存映設I/O)等，不同的I/O方式有
不同的實現方式和性能，在不同的應用中可以按情況選擇不同的I/O方式。
H5+
5+Runtime-增強版的手機瀏覽器引擎，讓HTML5達到原生水平！HTML5並不是一項技術，而是一個標準。
H5是HTML5的簡稱。HTML5是HTML最新的修訂版本，是一種超文本標記語言。H5有兩大特點：
首先，強化了 Web 網頁的表現性能。其次，追加了本地數據庫等 Web 應用的功能。
代碼
<!DOCTYPE HTML>
<html>
<body>
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
鼠標坐標
在觸發鼠標相關事件時(如：click、mousemove)，可以通過事件對象獲取當前鼠標的坐標。
獲取的坐標可分為2種：
1) MouseEvent.screenX、MouseEvent.screenY ：基於屏幕的X、Y坐標；以屏幕的左上角為0,0起始點。
2) MouseEvent.clientX、MouseEvent.clientY ：基於body的X、Y坐標；以當前body的左上角為0,0起始點，若body含有水平滾動條或垂直滾動條時，左上角還是0,0坐標點。
（1）相對於屏幕
如果是涉及到鼠標點擊確定位置相對比較簡單，獲取到鼠標點擊事件後，事件screenX，screenY獲取的是點擊位置相對於屏幕的左邊距與上邊距，不考慮iframe因素，不同瀏覽器下表現的還算一致。
function getMousePos(event) {
var e = event || window.event;
return {‘x‘:e.screenX,‘y‘:screenY}
}
（2）相對瀏覽器窗口
簡單代碼即可實現，然而這是還不夠，因為絕大多數情況下我們希望獲取鼠標點擊位置相對於瀏覽器窗口的坐標，event的clientX，clientY屬性分別表示鼠標點擊位置相對於文檔的左邊距，上邊距。於是類似的我們寫出了這樣的代碼
function getMousePos(event) {
var e = event || window.event;
return {‘x‘:e.clientX,‘y‘:clientY}
}
（3）相對文檔
簡單測試也沒什麽問題，但是clientX與clientY獲取的是相對於當前瀏覽器窗口的坐標，忽略頁面滾動因素，這在很多條件下很有用，但當我們需要考慮頁面滾動，也就是相對於文檔（body元素）的坐標時怎麽辦呢？加上滾動的位移就可以了，下邊我們試試怎麽計算頁面滾動的位移。
其實在Firefox下問題會簡單很多，因為Firefox支持屬性pageX,與pageY屬性，這兩個屬性已經把頁面滾動計算在內了。
在Chrome可以通過document.body.scrollLeft，document.body.scrollTop計算出頁面滾動位移，而在IE下可以通過document.documentElement.scrollLeft ，document.documentElement.scrollTop
function getMousePos(event) {
var e = event || window.event;
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
var x = e.pageX || e.clientX + scrollX;
var y = e.pageY || e.clientY + scrollY;
//alert(‘x: ‘ + x + ‘\ny: ‘ + y);
return { ‘x‘: x, ‘y‘: y };
}
元素的getBoundingClientRect()方法可獲取一個 ClientRect 對象，其描述了元素的方位和寬高等信息。
ClientRect對象屬性
屬性名稱 屬性說明
width 元素的寬度
height 元素的高度
left 元素左上角距離當前可視body的寬度
top 元素左上角距離當前可視body的高度
right 元素右下角距離當前可視body的寬度；right = left + width
bottom 元素右下角距離當前可視body的高度；bottom = top + height
鼠標在元素內的坐標
公式如下：
x = mouse.clientX - element.left + element.scrollLeft
y = mouse.clientY - element.top + element.scrollTop
6.28心得