首页 > 代码库 > 6.28心得
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="http://www.mamicode.com/movie.ogg" type="video/ogg">
<source src="http://www.mamicode.com/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心得