1. 比较 attachEvent 和 addEventListener?
attachEvent ：
attachEvent 只能在 IE 浏览器给标签绑定事件, 可以多次绑定。
语法：Element.attachEvent(Etype,EventName)
参数：
Etype: 事件类型。比如：onclick,onkeyup,onmousemove 等
EventName: 事件名称。也就是你写好的函数
addEventListener：
addEventListenerW3C 标准, 除 IE 浏览器使用, 它给标签绑定事件。
语法: Element.addEventListener(Etype,EventName,boole)
参数：
Etype: 事件类型。比如：click,keyup,mousemove.注意使用 addEventListener 绑定事件时，设置参数事件类型时不必写 on.否则会出错 。
EventName: 事件名称。也就是你写好的函数
boole: 该参数是一个布尔值：默认 false。false 代表冒泡阶段执行, true 代表捕获阶段执行。
2. document.write 和 innerHTML 的区别？
document.write 是直接写入到页面的内容流，如果在写之前没有调用 document.open, 浏览器会自动调用 open。每次写完关闭之后重新调用该函数，会导致页面被重写。
innerHTML 则是 DOM 页面元素的一个属性，代表该元素的 html 内容。 innerHTML 将内容写入某个 DOM 节点，不会导致页面全部重绘 innerHTML 很多情况下都优于 document.write，其原因在于其允许更精确的控制要 刷新页面的那一个部分。
3. 什么是 window 对象？什么是 document 对象？
1、什么是 window 对象
简单来说，document 是 window 的一个对象属性。Window 对象表示浏览器中打开的窗口。如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。所有的全局函数和对象都属于 Window 对象的属性和方法。它是一个顶层对象,而不是另一个对象的属性，即浏览器的窗口。
2、什么是 document 对象
document 对象是 window 和 frames 对象的一个属性,是显示于窗口或框架内的一个文档。
区别:
1、window 指窗体。document 指页面。document 是 window 的一个子对象。
2、用户不能改变 document.location (因为这是当前显示文档的位置)。但是,可以改变 window.location (用其它文档取代当前文档) window.location 本身也是一个对象,而 document.location 不是对象。
4. Js 拖动的原理？
js 的拖拽效果主要用到以下三个事件：
mousedown 鼠标按下事件
mousemove 鼠标移动事件
mouseup 鼠标抬起事件
当点击 dom 的时候，记录当前鼠标的坐标值，也就是 x、y 值，以及被拖拽的 dom 的 top、left 值，而且还要在鼠标按下的回调函数里添加鼠标移动的事件：
document.addEventListener("mousemove", moving, false)
和添加鼠标抬起的事件
document.addEventListener("mouseup", function () {
document.removeEventListener("mousemove", moving, false);
}, false);
这个抬起的事件是为了解除鼠标移动的监听，因为只有在鼠标按下才可以拖拽，抬起就停止不会移动了。
当鼠标按下鼠标移动的时候，记录移动中的 x、y 值，那么这个被拖拽的 dom 的 top 和 left 值就是：
top = 鼠标按下时记录的 dom 的 top 值 +（移动中的 y 值 - 鼠标按下时的 y 值）
left = 鼠标按下时记录的 dom 的 left 值 +（移动中的 x 值 - 鼠标按下时的 x 值）
5. 描述浏览器的渲染过程，DOM 树和渲染树的区别
1、浏览器的渲染过程：
解析 HTML 构建 DOM (DOM 树)，并行请求 css/ image/ js
CSS 文件下载完成，开始构建 CSSOM(CSS 树)
CSSOM 构建结束后，和 DOM 一起生成 Render Tree(渲染树)
布局(Layout)：计算出每个节点在屏幕中的位置
显示(Painting)：通过显卡把页面画到屏幕上
2、DOM 树 和 渲染树 的区别
DOM 树与 HTML 标签一一对应，包括 head 和隐藏元素
渲染树不包括 head 和隐藏元素，大段文本的每一个行都是独立节点，每一个节点都有对应的 css 属性
6. 如何最小化重绘(repaint)和回流(reflow)
重绘: 当元素的一部分属性发生改变，如外观、背景、颜色等不会引起布局变化，只需要浏览器根据元素的新属性重新绘制，使元素呈现新的外观叫做重绘。
重排（回流）: 当 render 树中的一部分或者全部因为大小边距等问题发生改变而需要 DOM 树重新计算的过程。
重绘（回流）不一定需要重排（比如颜色的改变），重排必然导致重绘（比如改变网页位置）
最小化重绘(repaint)和回流(reflow)的方法：
1、需要要对元素进行复杂的操作时，可以先隐藏( display:"none" )，操作完成后再显示
2、需要创建多个 DOM 节点时，使用 DocumentFragment 创建完后一次性的加入 document 缓存 Layout 属性值，如：var left = elem.offsetLeft; 这样，多次使用 left 只产生一次回流
3、尽量避免用 table 布局（table 元素一旦触发回流就会导致 table 里所有的其它元素回流）
4、避免使用 css 表达式(expression)，因为每次调用都会重新计算值（包括加载页面）
5、尽量使用 css 属性简写，如：用 border 代替 border-width, border-style, border-color
6、批量修改元素样式：elem.className 和 elem.style.cssText 代替 elem.style.xxx
7. Js 延迟加载的方式有哪些？
JS 的延迟加载有助与提高页面的加载速度。
JS 延迟加载，也就是等页面加载完成之后再加载 JavaScript 文件。
1、defer 属性 HTML 4.01 为<script>标签定义了defer属性。
用途：表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕之后再执行。
在<script>元素中设置defer属性，等于告诉浏览器立即下载，但延迟执行。
<!DOCTYPE html> <html> <head> <script src="test1.js" defer="defer"></script> <script src="test2.js" defer="defer"></script> </head> <body> <!-- 这里放内容 --> </body> </html>
说明：虽然<script> 元素放在了<head>元素中，但包含的脚本将延迟浏览器遇到</html>标签后再执行。
HTML5规范要求脚本按照它们出现的先后顺序执行。在现实当中，延迟脚本并不一定会按照顺序执行。
defer属性只适用于外部脚本文件。支持 HTML5 的实现会忽略嵌入脚本设置的defer属性。
2、async 属性 HTML5 为<script>标签定义了async属性。与defer属性类似，都用于改变处理脚本的行为。同样，只适用于外部脚本文件。
目的：不让页面等待脚本下载和执行，从而异步加载页面其他内容。
异步脚本一定会在页面 load 事件前执行。 不能保证脚本会按顺序执行。
<!DOCTYPE html> <html> <head> <script src="test1.js" async></script> <script src="test2.js" async></script> </head> <body> <!-- 这里放内容 --> </body> </html>
async和defer一样，都不会阻塞其他资源下载，所以不会影响页面的加载。 缺点：不能控制加载的顺序
3、动态创建DOM方式
//这些代码应被放置在</body>标签前(接近HTML文件底部)
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener) {
window.addEventListener("load",downloadJSAtOnload, false);
}
else if (window.attachEvent) {
window.attachEvent("onload",downloadJSAtOnload);
}
else {
window.onload = downloadJSAtOnload;
}
</script>
4、使用jQuery的getScript()方法
$.getScript("outer.js",function(){//回调函数，成功获取文件后执行的函数
console.log("脚本加载完成")
});
5、使用setTimeout延迟方法
延迟加载 js 代码，给网页加载留出更多时间
<script type="text/javascript">
function A() {
$.post("/lord/login", {
name: username,
pwd: password
}, function () {
alert("Hello")
})
}
$(function () {
setTimeout('A()', 1000) // 延迟1秒
})
</script>
6、让JS最后加载 把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度
例如引入外部 js 脚本文件时，如果放入 html 的 head 中,则页面加载前该 js 脚本就会被加载入页面，而放入 body 中，则会按照页面从上倒下的加载顺序来运行 JavaScript 的 代码
所以我们可以把 js 外部引入的文件放到页面底部，来让 js 最后引入，从而加快页面加载速度
//这些代码应被放置在</body>标签前(接近HTML文件底部)
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener) {
window.addEventListener("load",downloadJSAtOnload, false);
}
else if (window.attachEvent) {
window.attachEvent("onload",downloadJSAtOnload);
}
else {
window.onload = downloadJSAtOnload;
}
</script>
这段代码意思等到整个文档加载完后，再加载外部文件“defer.js”。
使用此段代码的步骤：
6.1）复制上面代码
6.2）粘贴代码到 HTML 的标签前 (靠近 HTML 文件底部)
6.3）修改“defer.js”为你的外部 JS 文件名
6.4）确保你文件路径是正确的。例如：如果你仅输入“defer.js”，那么“defer.js” 文件一定与 HTML 文件在同一文件夹下。
注意：
这段代码直到文档加载完才会加载指定的外部 js 文件。因此，不应该把那些页面正常 加载需要依赖的 javascript 代码放在这里。而应该将 JavaScript 代码分成两组。一组是因页面需要而立即加载的 javascript 代码，另外一组是在页面加载后进行操作的 javascript 代码(例如添加 click 事件或其他东西)。这些需等到页面加载后再执行的 JavaScript 代码，应放在一个外部文件，然后再引进来
在元素中设置 defer 属性，等于告诉浏览器立即下载，但延迟执行元素中设置 defer 属性等于告诉浏览器立即下载，但延迟执行元素中设置 defer 属性，等于告诉浏览器立即下 载，但延迟执行
8. IE 与标准事件模型有哪些差别？
1、添加事件
DOM 事件模型 – addEventListener
语法：
addEventListener(eventType, handler, useCapture)
参数：
eventType: 不带有 on 字符串；
handler: 是一个事件句柄，这个函数或方法带有一个事件对象参数；
useCapture: 决定了事件句柄触发在哪种事件传播阶段，如果 useCapture 为 true 则为捕获阶段，反之则为冒泡阶段。
IE 事件模型 – attachEvent
语法：
attachEvent(eventType, handler)
参数：
eventType: 带 on 字符串；
handler: 是一个事件句柄，这个函数或方法带有一个事件对象参数；
2、事件过程
DOM 事件模型包含捕获阶段和冒泡阶段，IE 事件模型只包含冒泡阶段；
DOM 事件模型可使用 e.stopPropagation()来阻止事件流
839
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
