乐趣区

关于javascript:JavaScript高级程序设计笔记02-HTML中的JavaScript

jiezi

HTML 中的 JavaScript

<script>元素

模式

  • 行内

    其中的代码会被从上到下解释。计算实现之前，页面其余内容不会被加载，也不会被显式。

  • 内部

    下载与解析都会阻塞 HTML 解析，扩展名.js 不是必须的，前提是确保服务器返回正确的 MIME 类型。

    同时行内有 JavaScript 代码的话，行内代码会被疏忽。

    浏览器在解析资源时，会向 src 指定的门路发送一个 GET 申请，以获得相应资源。这个初始的申请不受浏览器同源策略限度（但仍受父页面 HTTP/HTTPS 协定的限度），但返回并被执行的 JavaScript 则受限制。

    长处：

    • 能够让咱们通过不同的域散发 JavaScript（确保是本人所有或者可信起源）
    • 能够动静加载和执行 JavaScript 代码
    • 能够将内容集中管理，进步可维护性，可独立编辑，可多处共享，可更好利用缓存（进步加载速度）
    • 不至于让 HTML 文件过大
    • 兼容 HTML 和 XHTML（不用额定思考 XHTML 中的正文 hack）
    • 对于反对 SPDY/HTTP2 的浏览器，能够轻量、独立 JavaScript 组件模式向客户端送达脚本，从同一个中央获得一批文件，并将它们一一放到浏览器缓存中。（Push Cache？）

属性

  • src：要执行的代码的内部文件。一个 URL。

  • type：代码块中脚本语言的内容类型（MIME 类型）

    常规为 ”text/javascript”。

    JavaScript 文件的 MIME 类型通常是 ”application/x-javascript”，不过给 type 设置这个值可能导致脚本被疏忽。

    设置为 ”module”会被当作 ES6 模块，可应用 import 和 export 关键字。行为相似加 defer，模块依赖关系也会被下载，等 HTML 解析实现后执行；如果再设置 async，行为相似 async，模块依赖关系都下载完后就开始执行（无论 HTML 解析是否实现）

  • defer（只对外部脚本文件无效，IE7 及更早版本中行内脚本也可指定）不阻塞文档解析

    脚本下载与 HTML 解析并行，等 HTML 解析实现后 每个脚本会有序执行（HTML5 规定的有序，并在 DOMContentLoaded 事件（所有同步 js 代码执行结束后触发）之前执行，理论不一样按程序，且加载慢的话可能在 Loaded 事件之后执行，因而最好只蕴含一个这样的脚本）

    思考兼容，最好还是把要提早执行的脚本放在页面底部。

    XHTML 中指定 defer 须要写成：defer=”defer”

  • async（只对外部脚本文件无效）下载过程不阻塞文档解析

    下载 脚本与 HTML 解析并行。不阻塞其余页面动作（如下载资源或其余脚本加载（读取？））

    脚本执行 时还是会中断 HTML 解析，不保障执行程序与插入 DOM 的程序统一。

    动静导入的脚本（createElement，.src），默认 append 到文档中的 script 会异步执行（相似 async），如果须要的 js 按程序执行，须要设置 async 为 false。

    不应在页面加载期间批改 DOM，与其余异步脚本没有依赖关系。

    保障会在页面的 load 事件（所有资源实现加载后触发）前执行。

    XTML 中指定 async 须要写成：async=”async”

  • language：（废除）
  • charset：（很少用），应用 src 属性时指定的代码字符集

  • crossorigin：配置相干申请的 CORS（跨源资源共享）设置。默认不应用 CORS。

    属性值：

    • anonymous 配置文件申请不用设置凭据标记（不携带 cookie）
    • use-credentials 设置凭据标记，意味着出站申请会蕴含凭据（携带 cookie）
    • 空或非法值 默认当作 anonymous

    这个配置次要是想在以后我的项目中援用跨域的资源文件时，能捕捉到具体的报错信息（window.onerror）

    如果设置了 crossorigin，浏览器启用 CORS 拜访查看，服务器端必须返回一个 Access-Control-Allow-Origin 的 header，否则资源无法访问。

  • integrity：容许 比对接管到的资源和指定的加密签名以验证子资源完整性（SRI，Subresource Integrity）。（不是所有浏览器都反对）

    如果接管到的资源的签名与该属性指定的签名不匹配，则页面报错，脚本不执行。可用于确保 CDN（内容散发网络，Content Delivery Network）不会提供歹意内容（XSS 危险）。

搁置地位

head 还是 body？

过来都集中搁置在页面的 <head> 标签内，这会导致必须把所有 JavaScript 代码都下载、解析和解释完后，才开始渲染页面。如果 JavaScript 内容过多，就会导致页面渲染的显著提早。

古代 Web 利用通常把所有 JavaScript 援用放在 <body> 元素中的内容前面。避免渲染被阻塞导致的白屏。JS 只能获取曾经解析的 DOM。

动静加载脚本

应用 DOM API。默认以异步形式加载，相当于增加了 async 属性。不是所有浏览器都反对 async 属性，要对立行为，能够明确设置 async 为 false（同步加载）。

以此种形式获取的资源对浏览器的预加载器不可见。会重大影响它们在资源获取队列中的优先级。可能会重大影响性能。要让预加载器晓得这些动静申请文件的存在，能够在文档头部显式地申明它们：

<link rel="preload" href="xxx.js">

XHTML

必须指定 type 属性且为 ”text/javascript”

编写代码的规定比 HTML 中严格，在 HTML 中，解析 \<script\> 元素会利用非凡规定，但 XHTML 中没有这些规定。例子：小于号 < 被解释成一个标签的开始

  1. 把小于号替换成对应的 HTML 实体模式 \&lt; ——影响浏览

  2. 把所有代码都蕴含到一个 CDATA 块中——能够蕴含任意文本的区块，其内容不作为标签来解析

    <script type="text/javascript"><![CDATA[function () {}]]></script>

    在不反对 CDATA 块的非 XHTML 兼容浏览器中，须要应用 JavaScript 正文来对消：

    <script type="text/javascript">
//<![CDATA[function () {}
//]]>
</script>

XHTML 模式会在页面的 MIME 类型被指定为 ”application/xhtml+xml” 时触发，不是所有浏览器都反对

兼容

  • xml 中的利用

  • noscript 以及不反对 JavaScript 的浏览器

    • （Netscape 联结 Mosaic）把脚本代码蕴含在一个 HTML 正文中，如：

      <script><!--
    function () {}
//--></script>

      当初已不用再应用。在 XHTML 模式下，这样写也会导致脚本被疏忽，因为代码处于无效的 XML 正文当中。

    • <noscript>元素

      能够蕴含任何能够呈现在 <body> 中的 HTML 元素。触发条件：

      浏览器不反对脚本；浏览器对脚本的反对被敞开

文档模式的影响 doctype

次要区别：次要体现在通过 CSS 渲染的内容方面，对 JavaScript 也有一些关联影响（副作用）

  • 混淆模式 quirks mode

    让 IE 像 IE5 一样（反对一些非标准个性）

    以省略文档结尾的 doctype 申明作为开关。——在不同浏览器中差别十分大，须要 hack

  • 规范模式 standards mode

    让 IE 具备兼容规范的行为

    <!-- HTML 4.01 Strict -->
<!DOCTYPE ....>

<!-- XHTML 1.0 Strict -->
<!DOCTYPE ...>

<!-- HTML5 -->
<!DOCTYPE html>

  • 准规范模式 almost standards mode

    次要区别在于，如何看待图片元素四周的空白。

    通过过渡性文档类型（Transitional）和框架集文档类型（Frameset）来触发。

    <!-- HTML 4.01 Transitional -->
<!DOCTYPE ....>

<!-- HTML 4.01 Frameset -->
<!DOCTYPE ....>

<!-- XHTML 1.0 Transitional -->
<!DOCTYPE ...>

<!-- XHTML 1.0 Frameset -->
<!DOCTYPE ...>
退出移动版