他们好，我是小黑。
ipt怎样提升操控性；
从读取上强化：科学合理置放JAVA边线
虽然 JavaScript 的堵塞优点，在每两个<script>再次出现的这时候，不论是嵌入却是快照的形式，它单厢让网页等候JAVA的读取导出和继续执行，
因而<script>条码能放到网页的<head>或是<body>中，因而，假如他们网页中的 css 和 js 的提及次序或是边线不那样，即便是反之亦然
的标识符，读取新体验都是不那样的。实例如下表所示：
<!DOCTYPE html> <html> <head> <meta charset=“utf-8”> <meta name=“viewport” content=“width=device-width,initial-scale=1.0”> <title>js 提及的边线操控性强化</title> <script type=“text/javascript” src=“index-1.js”></script> <script type=“text/javascript” src=“index-2.js”></script> <link rel=“stylesheet” href=“style.css”> </head> <body> <div id=“app”></div> </body> </html>以上标识符是两个简单的 html 界面，其中读取了两个 js JAVA文件和两个 css 样式文件，虽然 js 的堵塞问题，当读取到 index-1.js 的这时候，
其后面的内容将会被挂起等候，直到index-1.js 读取、继续执行完毕，才会继续执行第二个JAVA文件 index-2.js，这个这时候网页又将被挂起等候脚
本的读取和继续执行完成，一次类推，这样用户打开该界面的这时候，界面内容会明显被延迟，他们就会看到两个空白的网页闪过，这种新体验是
明显不好的，因而 他们应该尽量的让内容和样式先展示出来，将 js 文件放到 最后，以此来强化用户新体验。如下表所示所示:
<!DOCTYPE html> <html> <head> <meta charset=“utf-8”> <meta name=“viewport” content=“width=device-width,initial-scale=1.0”> <title>js 提及的边线操控性强化</title> <link rel=“stylesheet” href=“style.css”> </head> <body> <div id=“app”></div> <script type=“text/javascript” src=“index-1.js”></script> <script type=“text/javascript” src=“index-2.js”></script> </body> </html>这段标识符展示了在 HTML 文档中置放<script>条码的推荐边线。尽管JAVA下载会堵塞另两个JAVA，但是网页的大部分内容都已经下载完
成并显示给了用户，因此网页下载不会显得太慢。这是雅虎特别操控性小组提出的强化 JavaScript 的首要规则：将JAVA放到底部。
从请求次数上强化：减少请求次数
虽然每个<script>条码初始下载时单厢堵塞网页渲染，所以减少网页包含的<script>条码数量有助于改善这一情况。这不仅针对快照JAVA，嵌入JAVA的数量反之亦然也要限制。浏览器在导出 HTML 网页的过程中每遇到两个<script>条码，单厢因继续执行JAVA而导致一定的延时，因而最小化延迟时间将会明显改善网页的总体操控性。
这个问题在处理快照 JavaScript 文件时略有不同。考虑到 HTTP 请求会带来额外的操控性开销，因而下载单个 100Kb 的文件将比下载 5 个 20Kb 的文件更快。也就是说，减少网页中快照JAVA的数量将会改善操控性。
通常两个大型网站或应用需要依赖数个 JavaScript 文件。您能把多个文件合并成两个，这样只需要提及两个<script>条码，就能减少操控性消耗。文件合并的工作可通过离线的打包工具或是一些实时的在线服务来实现。
需要特别提醒的是，把一段嵌入JAVA放到提及快照样式表的之后会导致网页堵塞去等候样式表的下载。这样做是为了确保嵌入JAVA在继续执行时能获得最精确的样式信息。因而，建议不要把嵌入JAVA紧跟在条码后面。
接才是最耗时的，也就是大名鼎鼎的Http 三次握手，当然，http 请求不是他们这一次讨论的主题，因而，减少 HTTP 请求，是他们着重强化的一项，事实上，在网页中 js JAVA文件读取很很多情况下，它的强化效果是很显著的。
从读取形式上强化：无堵塞JAVA读取
在 JavaScript 操控性强化上，减少JAVA文件大小并限制 HTTP 请求的次数仅仅是让界面响应 迅速的第一步，现在的 web 应用功能丰富，js JAVA越来越多，光靠精简源码大小和减少 次数不总是可行的，即便是一次 HTTP 请求，但文件过于庞大，界面也会被锁死很长一段 时间，这明显不好的，因而，无堵塞读取技术应运而生。简单来说， 就是 网页在读取完成后才读取 s js 标识符，也就是在 w window 对象的 d load 事件触 发后才去下载JAVA。要实现这种形式，常用以下几种形式：
延迟JAVA读取（ defer ）
HTML4 为<script>条码定义了两个扩展属性：defer。Defer 属性指明本元素所含的JAVA不会修改 DOM，因而标识符能安全地延迟继续执行。defer 属性只被 IE 4 和 Firefox 3.5 更高版本的浏览器所支持，所以它不是两个理想的跨浏览器解决方案。在其他浏览器中，defer 属性会被直接忽略，因而<script>条码会以默认的形式处理，也就是说会造成堵塞。然而，假如您的目标浏览器支持的话，这仍然是个有用的解决方案。
<script type=“text/javascript” src=“index-1.js” defer></script>带有 defer 属性的<script>条码能置放到文档的任何位置。对应的 JavaScript 文件将在网页导出到<script>条码时开始下载，但不会继续执行，直到 DOM 读取完成，即 onload事件触发前才会被继续执行。当两个带有 defer 属性的 JavaScript 文件下载时，它不会堵塞浏览的其他进程，因而这类文件能与其他资源文件一起并行下载。·任何带有 defer 属性的<script>元素在 DOM 完成读取之前都不会被继续执行，无论嵌入或是是快照JAVA都是如此。
延迟JAVA读取（ async ）
HTML5 规范中也引入了 async 属性，用于异步读取JAVA，其大致作用和 defer 是那样的，都是采用的并行下载，下载过程中不会有堵塞，但 不同点在于他们的继续执行时机，c async 需要读取完成后就会自动继续执行标识符 ，但是 r defer 需要等候网页读取完成后才会继续执行。
从读取形式上强化：动态添加JAVA元素
把标识符以动态的形式添加的好处是：无论这段JAVA是在何时启动下载，它的下载和继续执行过程都不会堵塞网页的其他进程，他们甚至能直接添加带头部 head 条码中，都不会影响其他部分。因而，作为开发的你肯定见到过诸如此类的标识符块：
var script = document.createElement(script); script.type = text/javascript; script.src = file.js; document.getElementsByTagName(head)[0].appendChild(script);这种形式便是动态创建JAVA的形式，也就是他们现在所说的动态JAVA创建。通过这种形式下载文件后，标识符就会自动继续执行。但是在现代浏览器中，这段JAVA会等候所有动态节点读取完成后再继续执行。这种情况下，为了确保当前标识符中包含的别的标识符的接口或是方法能够被成功调用，就必须在别的标识符读取前完成这段标识符的准备。解决的具体操作思路是：现代浏览器会在 script 条码内容下载完成后接收两个load 事件，他们就能在 load 事件后再去继续执行他们想要继续执行的标识符读取和运行，在 IE 中，它会接收 loaded 和 complete事件，理论上是 loaded 完成后才会有 completed，但实践告诉他们他两似乎并没有个先后，甚至有这时候只会拿到其中的两个事件，他们能单独的封装两个专门的函数来体现这个功能的实践性,因而两个统一的写法是：
function LoadScript(url, callback) { var script = document.createElement(script); script.type =text/javascript; // IE 浏览器下 if (script.readyState) { script.onreadystatechange = function () { if(script.readyState ==loaded || script.readyState == complete) { // 确保继续执行两次 script.onreadystatechange = null; // todo 继续执行要继续执行的标识符 callback() } } } else { script.onload = function () { callback(); } } script.src =file.js; document.getElementsByTagName(head)[0].appendChild(script); }LoadScript 函数接收两个参数，分别是要读取的JAVA路径和读取成功后需要继续执行的回调函数，LoadScript 函数本身具有特征检测功能，根据检测结果（IE 和其他浏览器），来决定JAVA处理过程中监听哪两个事件。实际上这里的 LoadScript()函数，就是他们所说的 LazyLoad.js（懒读取）的原型。
从读取形式上强化：XMLHttpRequest JAVA注入
通过 XMLHttpRequest 对象来
var xhr = newXMLHttpRequest(); xhr.open(get, file-1.js, true); xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if(xhr.status >=200 && xhr.status < 300 || xhr.status === 304) { // 假如从后台或是缓存中拿到数据，则添加到 script 中并读取继续执行。 var script = document.createElement(script); script.type = text/javascript; script.text = xhr.responseText; // 将创建的 script 添加到文档网页 document.body.appendChild(script); } } }通过这种形式拿到的数据有两个优点：其一，他们能控制脚本是否要立即继续执行，因为他们知道新创建的 script 条码只要添加到文档界面中它就会立即继续执行，因而，在添加到文档界面之前，也就是在 appendChild()之前，他们能根据自己实际的业务逻辑去实现需求，到想要让它继续执行的这时候，再 appendChild()即可。其二：它的兼容性很好，所有主流浏览器都支持，它不需要想动态添加JAVA的形式那样，他们自己去写优点检测标识符；但虽然是使用了 XHR 对象，所
总结
减少 JavaScript 对操控性的影响有以下几种方法：
将所有的<script>条码放到网页底部，也就是</body>闭合条码之前，这能确保在 JAVA继续执行前网页已经完成了渲染。尽可能地合并JAVA。网页中的<script>条码越少，读取也就越快，响应也越迅速。不论是快照JAVA却是嵌入JAVA都是如此。采用无堵塞下载 JavaScript JAVA的方法：使用<script>条码的 defer 属性（仅适用于 IE 和 Firefox 3.5 以上版 本）；使用动态创建的<script>元素来下载并继续执行标识符；使用 XHR 对象下载 JavaScript 标识符并注入网页中。通过以上策略，能在很大程度上提升那些需要使用大量 JavaScript 的 Web 网站和应用的实际操控性。
小伙伴们，快快用实践一下吧！假如在学习过程中，有遇到任何问题，欢迎加我好友，我拉你进Python学习交流群共同探讨学习。
