JavaScript DOM编程艺术（读后感一）

时间 2019-11-08

标签 javascript dom 编程艺术读后感栏目 JavaScript 繁體版

原文原文链接

1.平稳退化javascript

网站访问者彻底有可能使用的是不支持javascript的浏览器，或者是用户已经禁用。若是没有考虑这种状况，人们在访问网站时就有可能遇到麻烦，并所以再也不来访问网站。若是正确的使用了javascript脚本，就可让访问者在他们的浏览器不支持javascript的状况下仍能顺利地浏览网站。这就是所谓的平稳退化。虽然某些功能没法使用，但最基本的操做仍能顺利完成。java

<a href="javascript:window.open("www.baidu.com");" ></a>这条语句在支持“javascript:”伪协议的浏览器中运行正常，较老的浏览器则会去尝试打开那个连接但失败，支持这种伪协议但禁用了javascript功能的浏览器会什么也不作。总之，在HTML文档里经过"javascript:"伪协议调用的javascript代码的作法很是很差。浏览器

<a href="#" onclick="window.open("www.baidu.com");return false"></a>由于在上面这条HTML指令使用了return false语句，这个连接不会真的被打开。“#”符号是一个仅供文档内部使用的连接记号。在某些浏览器里，“#”连接指向当前文档的开头。把href属性的值设置为“#”只是为了建立一个空连接http://www.msdnsource.com/ 。实际工做所有由onclick属性负责完成。这个技巧与"javascript:"伪协议代码同样糟糕，也不能平稳退化。用户禁用了浏览器的javascript功能，这样的连接将毫无用处。性能优化

各大搜索引擎都有相似（搜索机器人）的程序，目前，只有极少数搜索机器人可以理解javascript代码。因此，若是你的javascript网页不能平稳退化，它们在搜索上的排名就可能大受损害。函数

<a href="www.baidu.com" onclick="window.open("www.baidu.com");return false"></a>-----平稳退化性能

2.向后兼容优化

能够经过对像检测的方法，使浏览器不执行此方法或者属性。网站

if (!documnet.getElementById) return false;搜索引擎

3.性能考虑spa

1) 尽可能少访问DOM尽可能减小标记

访问DOM的方式对脚本性能会产生很是大的影响。如下代码为例：

if (document.getElementByTagName("a").length > 0){ var links = document.getElementByTagName("a"); for (var i=0;i<links.length;i++){ //对每一个连接做点处理 }}搞清楚这段代码要干什么，天然就会明白问题在哪里了。首先，它取得了全部<a>元素，而后检查它们的个数是否是大于0
if (document.getElementByTagName("a").length > 0)而后，若是大于0，它会再次取得全部<a>元素，循环遍历这些元素并应用某些操做。
var links = document.getElementByTagName("a"); for (var i=0;i<links.length;i++){虽然这段代码能够运行，但它不能保持最优的性能。无论何时，只要是查询DOM中的某些元素，浏览器都会搜索整个DOM树，从中查找可能匹配的元素。这段代码竟然使用了两次getElementByTagName方法去执行相同的操做，浪费了一次搜索。更好的办法是把第一次搜索的结果保存在一个变量中，而后在循环里重用该结果，好比：<pre name="code" class="javascript"><pre name="code" class="javascript"><pre name="code" class="javascript">var links = document.getElementByTagName("a");if (links .length > 0){ for (var i=0;i<links.length;i++){ //对每一个连接做点处理 }}

在多个函数都会取得一组相似元素的状况下，能够考虑重构代码，把搜索结果保存在一个全局变量里，或者把一组元素直接以参数的形式传递给函数。另外一个须要注意的地方，就是要尽可能减小文档中的标记数量。过多没必要要的元素只会增长DOM树的规模，进而增长遍历DOM树以查找特定元素的时间。

2)合并和放置脚本

把多个外部JS文件合并成一个脚本文件。这样，就能够减小加载页面时发送请求数量。而减小请求数量一般都是在性能优化时首先要考虑的。

脚本在标记中的位置对页面的初次加载时间有很大影响。传统上，咱们都把脚本放在文档的<head>区域，这种放置方法有一个问题。位于<head>块中的脚本会致使浏览器没法并行加载其余文件（如图像或其余脚本）。通常来讲，根据HTTP规范，浏览器每次从同一个域名中最多只能同时下载两个文件。而下载脚本期间，浏览器不会下载其余任何文件，即便是来自不一样域名的文件也不会下载，全部其余资源都要等加载完毕后才能下载。因此把<script>标签都放到文档的末尾，</body>以前，就可让页面变得更快。

3)压缩脚本