JavaScript

Javascript 学习笔记（ch13）《犀牛书》

2017-04-08  本文已影响49人  恰皮

客户端JavaScript

web浏览器中的JavaScript

一. 客户端JavaScript

1. document

web 浏览器中呈现静态信息的页面叫做文档（由于加入了JavaScript，静态页面的信息看上去会动来动去，但信息本身是静态的）

2. window
window.location = "http://www.oreilly.com/";
//设置location属性，从而跳转到新的web页面
4. 事件处理程序
5. JavaScript的角色

二. 在 HTML 里嵌入 JavaScript

1. 内联，放置在 <script> 和 </script> 之间；
2. 放置在由 <script> 标签的 src 属性指定的外部文件中；（最好）
  • 可以把大块 JavaScript 代码从 HTML 文件中删除，这有助于保持内容和行为的分离，从而简化 HTML 文件。
3. 放置在 HTML 事件处理程序中，该事件处理程序由 onclick 或 onmouseover 这样的 HTML 属性值指定。
4. 放置一个 URL 里，这个 URL 使用特殊的 “javascript:” 协议。

三. JavaScript 程序的执行

1. JavaScript 程序执行的两个阶段

第一个阶段，载入文档内容，并执行 <script> 元素里的代码（包括内联脚本和外部脚本）。脚本通常会按照它们在文档里出现的顺序执行。所有脚本里的 JavaScript 代码都是从上往下，按照它在条件、循环以及其他控制语句中的出现顺序执行的。
文档载入完成，并且所有脚本执行完成后， JavaScript 执行进入第二阶段。这个阶段是异步的，而且是由事件驱动的。在事件驱动阶段， web 浏览器调用事件处理程序函数来响应异步发生的事件，调用事件处理程序通常是响应用户输入，还可以由网络活动、运行时间或者 JavaScript 代码中的错误来触发。

JavaScript 是单线程执行的，脚本和事件处理程序在同一个时间只能执行一个，没有并发性，这保持了 JavaScript 编程的简单性。单线程执行时为了让编程更加简单，编写代码时可以确保两个事件处理程序不会同一时刻运行，操作文档内容时也不必担心会有其他线程试图同时修改文档。
单线程执行意味着浏览器必须在脚本和事件句处理程序执行的时候停止响应用户输入。

2. 同步、异步和延迟的脚本

当HTML解析器遇到 <script> 元素时，它默认必须先执行脚本，然后再恢复文档的解析和渲染。这对于内联脚本没什么问题，但是如果脚本源代码时一个由 src 属性指定的外部文件，这意味着脚本后面的文档部分在下载和执行脚本之前，都不会出现在浏览器中。

脚本的执行只是在默认的情况下是同步和阻塞的。

<script> 标签可以有 defer 和 async 属性，这可以改变脚本的执行方式。浏览器可以在加载脚本时继续解析和渲染文档。
defer 属性使得浏览器延迟脚本的执行，直到文档的载入和解析完成，并可以操作。（先载入文档，再执行脚本）
aync 属性使得浏览器可以尽快地执行脚本，而不用在下载脚本时阻塞文档解析。（同时执行脚本和解析文档）
如果 <script> 标签同时有两个属性，同时支持两者的浏览器会遵从 async 属性并忽略 defer 属性。
延迟的脚本会按它们在文档里的出现顺序执行，而异步脚本在它们载入后执行，这意味着它们可能会无序执行。

3. 事件驱动的 JavaScript
function handleResponse() {...}
request.onreadystatechange = handleResponse;
4. 客户端 JavaScript 时间线

  1. web 浏览器创建 Document 对象，并且开始解析 web 页面，解析 HTML 元素和它们的文本内容后添加 Element 对象和 Text 节点到文档中。在这个阶段 document.readyState 属性的值是 loading

  2. 当 HTML 解析器遇到没有 async 和 defer 属性的 <script> 元素时，它把这些元素添加到文档中，然后执行行内或外部脚本。这些脚本会同步执行，并且在脚本下载和执行时解析器会暂停。这样脚本就可以用 document.write() 来把文本插入到输入流中。解析器恢复时这些文本会成为文档的一部分。同步脚本经常简单定义函数和注册后面使用的注册事件处理程序，但它们可以遍历和操作文档树，因为在它们执行时已经存在了。这样，同步脚本可以看到它自己的 <script> 元素和它们之前的文档内容。

  3. 当解析器遇到设置了 async 属性的 <script> 元素时，它开始下载脚本文本，并继续解析文档。脚本会在它载入完成后尽快执行，但是解析器没有停下来等它下载。异步脚本禁止使用 document.write() 方法。它们可以看到自己的 <script> 元素和它之前的所有文档元素，并且可能或者干脆不可能访问其他的文档内容。

  4. 当文档完成解析， document.readystate 属性变成 interactive 。

  5. 所有有 defer 属性的脚本，会按它们在文档里的出现顺序执行。异步脚本可能也会在在这个时间执行。延迟脚本能访问完整的文档树，禁止使用 document.write() 方法。

  6. 浏览器在 Document 对象上触发 DOMContentLoaded 事件。这标志着程序执行从同步脚本执行阶段转换到了异步事件驱动阶段。但要注意，这时可能还有异步脚本没有执行完成。

  7. 这时，文档已经完全解析完成，但是浏览器可能还在等待其他内容载入，如图片。当所有这些内容完成载入时，并且所有异步脚本完成载入和执行， document.readyState 属性改变为 complete ，web 浏览器触发 Window 对象上的 load 事件。

  8. 从此刻起，会调用异步事件，以异步响应用户输入事件、网络事件、计时器过期等。

四. 兼容性和互用性

if (element.addEventListener) {
element.addEventListener("keydown",handler,false);
element.addEventListener("keypress",handler,false);
}
else if (element.attachEvent) {
element.attachEvent("onkeydown",handler);
element.attachEvent("onkeypress",handler);
}
else {
element.onkeydown = element.onkeypress = handler;
}

<!--[if IE6]>
this content is actually inside an html comment.
it will only be displayed in IE6
<![endif]-->
<!--[if lte IE7]>
displayed by IE5,6 and 7 and earlier
<![endif]-->
<!--[if !IE]><-->
IE will not display id
<!--><![endif]-->

/*@cc_on
@if (@_jscript)
alert("In IE");
@end
@*/

五. 可访问性

六. 安全性

————————————————分割线—————————————————

END:Answer

  1. Window对象是全局对象，它有属性和方法，alert()方法是它的一个方法，是一个全局函数，可以直接使用。

  2. DOM: document object model 文档对象模型
    BOM: browser object model 浏览器对象模型
    BOM的最根本对象是window，是对浏览器窗口的操作。
    DOM的最根本对象是document，是对页面文档的操作。
    BOM包含DOM。
    DOM常用来获取文档的节点、元素，操作他们的样式呈现和行为。
    JavaScript的DOM常用来增强用户体验。
    一个浏览器进程中一般有四个线程：javascript引擎线程、渲染引擎线程、浏览器事件线程、http请求线程。

  3. 同步：等前一个任务完成之后再执行下一个任务，是顺序的。如果前一个任务耗时很长，后一个任务将总是等不到执行。
    异步：后一个任务是通过前一个任务执行回调执行的。

  5. <script>标签可以是内联的，放在html文档中，当解析的时候遇到内联的<script>标签的时候就会停止文档的解析，执行脚本代码。直到脚本执行完后继续解析文档。
    <script>标签放在<head>标签中，文档的解析要等到脚本全部加载完后才解析。
    <script>标签放在</body>前，先解析文档，再执行脚本代码。

  6. 事件驱动三要素：事件、事件的目标、事件回调函数。
    事件处理机制：事件冒泡、事件传播、事件捕获、事件委托。

  7. JavaScript 是单线程的，默认是同步的，阻塞的；可以通过 defer 和 async 属性改变脚本的执行方式。

上一篇 下一篇

猜你喜欢

热点阅读