一.什么是平稳退化？

如果含有JS代码的网页在用户浏览器不支持JS（或者禁用JS）时，用户仍然能够顺利浏览（网站功能正常，只是视觉效果可能差一些），那么这个网页就能够平稳退化

网页能够平稳退化是很必要的，因为JS向来名声不好（各种广告，各种弹窗，甚至还有XSS等等阴暗的东西），所以有一个用户群是习惯禁用浏览器的JS支持的，这个用户群可能不大，但是作为编码人员应该尽量让自己的代码尽可能的完善（就像培养自己的孩子一样），我们应该考虑到这种情况，给各种用户完美的体验

如果上面的理由还不够充分，那么可能有一点更值得重视：SEO，也就是搜索引擎优化，想让自己的网站在搜索结果里靠前些，就有必要做好SEO，搜索引擎的搜索机器人无法理解JS代码的含义，所以搜索机器人相当于一个坚持使用老式浏览器（不支持JS）的用户，显然，这个用户很重要

二.怎样才能平稳退化？

要平稳退化只需要遵循一个原则：渐进增强

所谓的“渐进增强”就是用一些原始的可靠的方法去实现最基本最重要的功能，先保证功能的完整，再用一些额外的信息层去包裹原始页面（实现显示特效，实现更好的视觉效果和用户体验），即便衣服被屏蔽了，功能仍然完整，只是可能不好看而已

把JS代码与HTML代码彻底分离就可以实现“渐进增强”，HTML是功能完整的原始层，外部JS代码是一个华丽的外衣（说起来有点像CSS，不过确实是这样，JS功能很强大，但如果过分依赖于JS代码就颠倒了主次）

三.什么是向后兼容？

向后兼容是指JS代码要能够兼容低版本的DOM（有些浏览器可能不支持最新版本的DOM，意味着某些DOM API将无法使用），例如：

最常用的DOM API可能是这些：

document.getElementById();

document.getElementsByTagName();

document.getElementsByClassName();//HTML5 DOM中的新特性

但可能有的浏览器根本不支持这些方法，或者说只支持一部分，那么页面将因为JS代码出错而无法访问，或者页面功能不再完整

之前有一种用来保证向后兼容的方法是“浏览器嗅探”技术，也就是通过BOM去问浏览器：“你支持不支持这个DOM API？”，因为浏览器实在太多了，所以一句很简单的JS代码都需要被很多层浏览器嗅探代码包裹起来，导致我们的代码变得非常臃肿

浏览器嗅探技术其实在CSS中依然存在，当然CSS无法通过BOM获取浏览器特征，所以采用了相对被动的一种方式：

/*设置透明度为0.75*/

filter: alpha(opacity =   25); /*支持 IE 浏览器*/

-moz-opacity: 0.25; /*支持 FireFox 浏览器*/

opacity: 0.25; /*支持 Chrome, Opera, Safari 等浏览器*/

DOM发展到现在已经不需要用浏览器嗅探技术来保证向后兼容了，我们可以这样做：

if(document.getElementById){

    document.getElementById();

}

if(document.getElementsByTagName){

    document.getElementsByTagName();

}

if(document.getElementsByClassName){

    document.getElementsByClassName();//HTML5 DOM中的新特性

}

这种更好的方式叫做“对象检测”技术，虽然还是不太完美（要想完美，除非浏览器市场被大一统了..），不过已经比浏览器嗅探要好很多了（至少不需要因为市场上出现一种新的浏览器而修改JS代码），对象检测不再依赖BOM，靠DOM自己检测浏览器是否支持指定的DOM API

四.JS性能优化技巧

  1. 尽量少JS访问DOM
  2. 尽量减少HTML标记
  3. 合并JS脚本
  4. script标签的位置
  5. 压缩JS代码

1.优化前：

for(var i = 0;i < document.getElementsByTagName("a");i++){

    if(document.getElementsByTagName("a")[i].getAttribute("title") == "main"){

        //do something

    }

}

优化后：

var elems = document.getElementsByTagName("a");

for(var i = 0;i < elems.length;i++){

    if(elems[i].getAttribute("title") == "main"){

        //do something

    }

}

每次调用DOM方法获取标签对象内部都是对DOM树做一次完全搜索，这是非常昂贵的操作，尽量减少DOM访问可以提高性能

2.优化前：

<div>

    <div>

        <div>

            <div>

                <div>

                    <p>

                    正文

                    </p>

                </div>

            </div>

        </div>

    </div>

</div>

优化后：

<p>

正文

</p>

这个例子可能有些极端了，不过也足够说明问题了，HTML代码应该尽量简洁（能够达到预期的表现效果就好）

3.优化前：

<scrpit src="./scripts/A.js" type="text/javascript"></script>

<scrpit src="./scripts/B.js" type="text/javascript"></script>

<scrpit src="./scripts/C.js" type="text/javascript"></script>

优化后：

<scrpit src="./scripts/All.js" type="text/javascript"></script>

浏览器在加载页面时每遇到一个script标签，如果标签指向外部脚本文件，都需要发送请求加载外部文件，如果script标签过多，这笔开销将是无法忽视的，所以应该把JS代码全部放在一个外部文件中，用一个script标签来加载

4.优化前：

<head>

    <script></script>

</head>

优化后：

<body>

    html code

    <script></script>

</body>

也就是说把script标签放在body的末尾加载最快，而且放在这里并不影响window.onload等事件的触发，至于为什么放在这个位置最快，可能和浏览器解释HTML代码的顺序有关（先加载head部分，如果head太大，会导致用户等待了很久仍然看不到body内容）

5.优化前：

var elems = document.getElementsByTagName("p");

for(var i = 0;i < elems.length;i++){

    //do something

}

优化后：

var elems=document.getElementsByTagName("p");for(var i=0;i<elems.length;i++){}

嗯，没错，优化后的代码不是给人读的，不过虽然不易读，但这样的代码体积小，使得外部文件体积缩小，当然能够提高性能

P.S.这个工作有专门的工具来帮我们做，比如JSMin等等

参考资料：《JavaScript DOM变编程艺术》

JS代码指导原则的更多相关文章

  1. js代码解析原则

    js引擎在读取js代码时会进行两个步骤,第一个步骤是解释,第二个步骤是执行. 解释就是先通篇扫描所有的Js代码,然后把所有声明提升到顶端,第二步是执行,执行就是执行代码的操作. 例: 例子1: < ...

  2. 1 　　开发一个注重性能的JDBC应用程序不是一件容易的事. 当你的代码运行很慢的时候JDBC驱动程序并不会抛出异常告诉你。 　　本系列的性能提示将为改善JDBC应用程序的性能介绍一些基本的指导原则，这其中的原则已经被许多现有的JDBC应用程序编译运行并验证过。 这些指导原则包括: 　　　正确的使用数据库MetaData方法 　　　只获取需要的数据 　　　选用最佳性能的功能 　　　管理连

    1 开发一个注重性能的JDBC应用程序不是一件容易的事. 当你的代码运行很慢的时候JDBC驱动程序并不会抛出异常告诉你. 本系列的性能提示将为改善JDBC应用程序的性能介绍一些基本的指导原则,这其中的 ...

  3. JS代码的简单重构与优化

    JS代码的简单重构与优化(适合新手) 原文  http://www.cnblogs.com/similar/p/5016424.html Demo . 1 //bad if (age > 20) ...

  4. .NET事件的指导原则

    C#允许编写所需的各种类型的事件.但是,为了与.NET Framwork的组件相兼容,开发人员必须遵循微软为此建立的一系列指导原则.这些指导原则的核心是,事件处理程序必须拥有两个参数.第一个参数是一个 ...

  5. js函数设计原则

    一般认为函数指具有返回值的子程序,过程指没有返回值的子程序.C++中把所有子程序成为函数,其实那些返回值为void的 函数在语义上也是过程.函数与过程的区别更多是语义上的区别,而不是语法的区别. 语言 ...

  6. openstack 升级设计要求的指导原则

    不知道其他软件有没有类似的指导原则. Theory of Upgrade Grenade works under the following theory of upgrade. New code s ...

  7. 四十年前的 6502 CPU 指令翻译成 JS 代码会是怎样

    去年折腾的一个东西,之前 blog 里也写过,不过那时边琢磨边写,所以比较杂乱,现在简单完整地讲解一下. 前言 当时看到一本虚拟机相关的书,正好又在想 JS 混淆相关的事,无意中冒出个问题:能不能把某 ...

  8. xss 防止攻击,恶意用户将输入的信息当成html或js代码执行,办法是将用户输入的信息改为text格式,或特殊符号转义

    xss 防止攻击,恶意用户将输入的信息当成html或js代码执行,办法是将用户输入的信息改为text格式,或特殊符号转义 XSS攻击的防范 XSS攻击造成的危害之所以会发生,是因为用户的输入变成了可执 ...

  9. 14条最佳JS代码编写技巧

    http://gaohaixian.blog.163.com/blog/static/123260105201142645458315/写任何编程代码,不同的开发者都会有不同的见解.但参考一下总是好的 ...

随机推荐

  1. Codeforces Round #534 (Div. 2)

    B. Game with string 题意: 给出一个字符串s只包括小写字母.当轮到一个玩家的时候,他可以选择两个连续且相等的字母并且删除它.当一个玩家没得删的时候他就输了. 题解: 乍一看有点懵, ...

  2. eclipse使用MAVEN打包可执行的jar包

    1.新建maven工程 注意勾选 随便填一下 建好之后工程目录如下 新建测试类与工具类,主类很简单 工具类也很简单,就是初始化了日志 maven依赖包也只有一个log4j的jar <depend ...

  3. MyBatis多对多查询

    -------------------siwuxie095                                 MyBatis 多对多查询         以订单和商品为例,即 一个订单可 ...

  4. centos7.5配置双网卡上网

    一.环境及说明 当初有这个需求,主要是帮一个高校的客户搭建一个大数据集群,使用的是校园网,交换机上一个端口只能连接一部电脑上网,不能通过路由组建子网,确保集群中的服务器有子网ip的同时,也能够通过公网 ...

  5. 那些我离不开的 Sketch 插件

    当谈论到插件时,我是一名极客.各种新颖的 Sketch 插件层出不穷,但是有那么几个是我怎么也离不开的. Sketch 运行器 多层的插件菜单再也不会影响我的效率了. 我推迟了好几年才使用这个插件,因 ...

  6. 什么是adb命令？以及如果高效使用他们？

    接下来 我会为大家讲解 最通俗易懂的adb命令 希望大家能够喜欢...

  7. vue父子间通信

    父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></chil ...

  8. 使用delphi 开发多层应用（十九) ios通过soap 访问kbmmw服务器

    随着delphi XE4 的推出,开始真正意义上支持ios 的开发,由于目前kbmmw 还不完全支持ios 的开发,因此 无法直接使用kbmmw 的客户端访问kbmmw 的服务器(虽然kbmmw 也提 ...

  9. 2018.10.08 NOIP模拟 斐波那契（贪心+hash/map）

    传送门 签到题. 显然是可以贪心分组的,也就是尽量跟当前的分成一组. 这时我们需要判断a[l]+a[r],a[l+1]+a[r]...a[r−1]+a[r]a[l]+a[r],a[l+1]+a[r]. ...

  10. 2018.09.30 bzoj2741: 【FOTILE模拟赛】L（分块+可持久化01trie）

    传送门 数据结构经典题. 首先考虑另外一种询问方式. 已知权值val,在区间[1,n][1,n][1,n]中找一个数使得valvalval^a[i]a[i]a[i]最大. 这个可以直接01trie. ...