[TOC] ## `integrity`属性 验证外部加载js 的文件hash ``` <script src="/assets/application.js" integrity="sha256-TvVUHzSfftWg1rcfL6TIJ0XKEGrgLyEq6lEpcmrG9qs="> </script> ``` 如果`application.js`的脚本hash 改变,则不会加载 ## URL 协议 a标签 `<a href="javascript: 'hello word';">点击</a>` 如果javascript 中是字符串,则会打开一个文件,里面是字符串内容 如果是可执行代码.则执行 ## script 的属性 ### defer 属性 延迟执行 如果脚本之间有依赖关系，就使用`defer`属性 ``` <script src="a.js" defer></script> <script src="b.js" defer></script> ``` 1. 浏览器开始解析 HTML 网页。 2. 解析过程中，发现带有`defer`属性的`<script>`元素。 3. 浏览器继续往下解析 HTML 网页，同时并行下载`<script>`元素加载的外部脚本。 4. 浏览器完成解析 HTML 网页，此时再回过头执行已经下载完成的脚本。 注意: 使用`defer`加载的外部脚本不应该使用`document.write`方法 对内置 script 代码不起作用 使用`defer`加载的外部脚本不应该使用`document.write`方法 ### async 属性 同步执行 如果脚本之间没有依赖关系，就使用`async`属性 1. 浏览器开始解析 HTML 网页。 2. 解析过程中，发现带有`async`属性的`script`标签。 3. 浏览器继续往下解析 HTML 网页，同时并行下载`<script>`标签中的外部脚本。 4. 脚本下载完成，浏览器暂停解析 HTML 网页，开始执行下载的脚本。 5. 脚本执行完毕，浏览器恢复解析 HTML 网页。 ### script 加载使用的协议 ``` <script src="example.js"></script> 上面的example.js默认就是采用 HTTP 协议下载，如果要采用 HTTPS 协议下载，必需写明。 <script src="https://example.js"></script> 但是有时我们会希望，根据页面本身的协议来决定加载协议，这时可以采用下面的写法。 <script src="//example.js"></script> ``` ### 重流和重绘 * 读取 DOM 或者写入 DOM，尽量写在一起，不要混杂。不要读取一个 DOM 节点，然后立刻写入，接着再读取一个 DOM 节点。 * 缓存 DOM 信息。 * 不要一项一项地改变样式，而是使用 CSS class 一次性改变样式。 * 使用`documentFragment`操作 DOM * 动画使用`absolute`定位或`fixed`定位，这样可以减少对其他元素的影响。 * 只在必要时才显示隐藏元素。 * 使用`window.requestAnimationFrame()`，因为它可以把代码推迟到下一次重流时执行，而不是立即要求页面重流。 * 使用虚拟 DOM（virtual DOM）库。 ### window.requestAnimationFrame() 推迟重绘 ``` // 重绘代价高 function doubleHeight(element) { var currentHeight = element.clientHeight; element.style.height = (currentHeight * 2) + 'px'; } all_my_elements.forEach(doubleHeight); // 重绘代价低 function doubleHeight(element) { var currentHeight = element.clientHeight; window.requestAnimationFrame(function () { element.style.height = (currentHeight * 2) + 'px'; }); } all_my_elements.forEach(doubleHeight); ```