【js学习笔记-064】WEB端js

Web文档里应当少量地使用javascript，因为javascript真正的角色是增强用户浏览体验，使信息的获取和传递更容易。现在已经不仅仅是作为显示文档的工具角色，而渐渐变成了一个简易的操作系统。Web浏览器是简单操作系统的概念，这样就可以把web应用定义为用js访问更多浏览器提供的高级服务如网络，图像，数据存储的web页面

在html里嵌入javascript

1.   内联 放在<script></script>标签对之间
2.   放置在由<script>标签的src属性指定的外部文件中。
3.   放置在html事件处理程序中，该事件处理程序由onclick或onmouseover这样的html属性指定
4.   放在URL里，这个URL使用特殊的”javascript:”协议

 

在XHTML中<script>标签中的内容被当做其它内容一样对待。如果js代码包含了”<”或”&”字符，那么这些字符就被解释成为xml标记。因此，如果要使用xhtml，最好把所有的js代码放入到一个CDATA部分里

<script>

  <![CDATA[

     //这里是js代码

   ]]

</script>

 

使用SRC属性方式的优点：

•   大块javascript代码从html文件中删除，这有有助于保持内容和行为分离
•   多个页面共用相同的javascript代码，用src属性可以让你只管理一份代码。而不用在代码改变时编辑每个html文件。
•   如果js代码文件由多个页面共享，就只需要下载它一次，通过使用它的第一个页面--------随后的页面可以从浏览器缓存检索它
•   由于src属性的值可以是任意url，因此来自一个web服务器的js程序或web页面可以使用由另一个web服务器输出的代码。很多互联网广告依赖与此
•   由于它有载入其它网站脚本的能力，可以让我们更好的利用缓存。如： google，链接js代码到google服务器，可以减少 web页面的启动时间，因为这些类库可能已经存在于用户的浏览器缓存中，但是你必须相信由第三方提供的代码服务。

language属性已经废弃，不应该再使用

type属性

当浏览器遇到<script>元素，并且这个<script>元素包含其值不被浏览器识别的type属性时，它会解析这个元素但不会尝试显示或执行它的内容。这意味这可以使用<script>元素来嵌入任意的文本数据到文档里，只要用type属性为数据声明一个不可执行的类型。如果同时指定src属性和一个未知类型，这个脚本会被忽略，并且不会从指定的URL里下载任何内容。

 

javascript程序的执行有两个阶段

第一阶段，载入文档内容，并执行<script>元素里的代码。脚本通常会按它们在文档里的出现顺序执行。所有脚本里的js代码都是从上往下，按照它在条件、循环以及其它控制语句中的出现顺序执行。

当文档加载完成后，js执行进入它的第二阶段，这个阶段是异步的。而且是由事件驱动的。

事件驱动阶段里发生的第一个事件是load事件，指示文档已经完全载入，并可以操作。js程序经常用这个事件来触发或发送消息。

 

核心js和客户端js都是一个单线程模型。脚本和事件处理程序在同一个时间只能执行一个，没有并发。这保持了js编程的简单性。

同步、异步和延迟的脚本

当文档载入时，js影响文档内容的唯一方法是快速生成内容。它使用document.write()方法完成上述任务。

当脚本把文本传递给 document.write()时，这个文本被添加到文档输入流中，html解析器会在当前位置创建一个文本节点，将文本插入这个文本节点后面。我们并不推荐使用document.write()。但在某些场景下它有着重要的用途。当html解析器遇到<script>元素时，它默认必须执行脚本，然后再恢复文档的解析和渲染，这对内联脚本没有什么问题，但如果是一个由src属性指定的外部文件，这意味着脚本后面的文档部分在下载和执行脚本之前，都不会出现在浏览器中   标签可以有defer和async属性可以改变脚本的执行方式。

说明：不会出现在浏览器中，是指文档的文本内容已经载入，但是并未被浏览器引擎解析为dom树，而dom树的生成是受js代码执行的影响，js代码会“阻塞”页面UI的渲染。

 

客户端js线程模型

js语言核心并不包含任何线程机制，并且客户端js传统上也没有定义任何线程机制。

html5定义了一种作为后台线程的”WebWorker”,但是客户端js还像严格的单线程一样工作。

“Web Worker”是一个用来执行计算密集任务而不冻结用户界面的后台线程。运行在web worker 线程里的代码不能访问文档内容，不能和主线程或其他worker共享状态，只可以和主线程和其他worker通过异步事件进行通信，所以主线程不能检测并发性。

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.        从此刻起，会调用异步事件，以异步响应用户输入事件，网络事件、计时器过期等。

以上是一个理想时间线，但是所有的浏览器都没有支持它的全部细节。所有浏览器普遍都支持load事件，都会触发它，它是决定文档完全载入并可以操作最通用的技术。DOMContentLoaded事件在load事件之前触发，所有浏览器（除IE外）都支持。

document.readyState属性也是大部分浏览器有，但值有细微差别。