您的位置：首页 > Web前端 > JavaScript

异步执行js脚本——防止阻塞

2016-05-03 22:12 295 查看

JS允许我们修改页面中的所有方面：内容，样式和用户进行交互时的行为。

但是js同样可以阻塞DOM树的形成并且延迟页面的渲染。

让你的js变成异步执行，并且减少不必要的js文件从而提高性能。

JavaScript可以查询和修改DOM和CSSOM

JavaScript的执行阻塞了CSSOM的执行

JavaScript 阻塞了DOM的形成，除非特殊声明js异步执行

js是一个同步语言可以修改网页的任何方面：

<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="style.css" rel="stylesheet">
<title>Critical Path: Script</title>
</head>
<body>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg"></div>
<script>
var span = document.getElementsByTagName('span')[0];
span.textContent = 'interactive'; // change DOM text content
span.style.display = 'inline';  // change CSSOM property
// create a new element, style it, and append it to the DOM
var loadTime = document.createElement('div');
loadTime.textContent = 'You loaded this page on: ' + new Date();
loadTime.style.color = 'blue';
document.body.appendChild(loadTime);
</script>
</body>
</html>

js允许我们操作DOM和使用隐藏对象的引用——节点可能在render tree中是不可见的，但是在DOM中依旧存在！所以，我们可以使用对隐藏对象的引用，来改变文本（通过textConten属性），甚至可以重写已经被计算的display属性从原来的‘none’到‘inline’。一旦这些完成，我们的页面将会显示成为“Hello interactive students!”

js同样可以从DOM中创建，添加和删除新的元素，或为元素设置样式。实际上，技术上来说，我们的页面可以通过一个巨大的js文件来一个个的创建元素和为元素设置样式。但是实际操作上，HTML和CSS更加方便。上例第二部分的函数中我们创建了一个新的div元素并且设置了文本元素，为其设置了样式，并且将其追加到body元素后面。

但是我们不能再DOM没有构造完之前操作DOM——浏览器在碰到js时会先执行js再执行DOM树的构造——所以执行内置的js文件时将会阻塞DOM的形成，同样可会延迟渲染的初始化。

js也可以操作CSSOM，如果在浏览器没有结束下载和CSSOM构造的情况下，我们想运行js呢？答案是浏览器会先搁浅脚本的执行直到完成CSSOM的加载和构造，当我们在等待上述执行的时候，DOM构造也同样被阻塞。

简而言之，js介绍的一系列特性都是依赖DOM和CSSOM的，js的执行同样也可以导致浏览器执行和页面渲染的巨大延迟：

脚本在页面中的位置非常重要

当遇到脚本标签的时候DOM构造过程将会停止直到脚本执行结束

js可查询和操作DOM以及CSSOM

js的执行将被延迟，直到CSSOM就绪。

解析阻塞 vs. 异步js

我们可以在script标签中加入async属性来告诉浏览器，在执行js脚本时同时执行DOM构造。

原文：https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript?hl=en

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航