• 读《JavaScript dom编程艺术(第2版)》笔记 5-6


    今天看了第五章,讲了许多我一直没有考虑过的内容:平稳退化、分离JavaScript、向后兼容性、性能考虑。引出这些问题的原因是:有的浏览器并不能支持js脚本,或者有的浏览器虽然可以支持js脚本,但是用户关闭了js解释功能,或者有的浏览器只能支持部分js脚本。如果没有考虑到这些情况,人们在访问我们的网站时就有可能遇到各种各样的麻烦,并因此不再来访问我们的网站。

    平稳退化:确保网页在没有JavaScript的情况下也能正常工作

    如果正确使用了JavaScript脚本,就可以让访问者在他们的浏览器不支持JavaScript的情况下仍能顺利地浏览我们的网站,这就是所谓的平稳退化,就是说,虽然某些功能无法使用,但是最基本的操作仍能顺利完成。

    渐进增强:用一些额外的信息层去包裹原始数据。按照“渐进增强”原则创建出来的网页几乎都符合“平稳退化”原则

    分离JavaScript:把网页的结构和内容与JavaScript脚本的动作行为分开

    window.onload = function() {
      if (!document.getElementsByTagName) return false;
      var lnks = document.getElementsByTagName("a");
      for (var i=0; i<lnks.length; i++) {
        if (lnks[i].getAttribute("class") == "popup") {
          lnks[i].onclick = function() {
            popUp(this.getAttribute("href"));
            return false;
          }
        }
      }
    }
    
    function popUp(winURL) {
      window.open(winURL,"popup","width=320,height=480");
    }

    向后兼容性:确保老版本的浏览器不会因为你的JavaScript脚本而死掉

    对象检测:只要把某个方法打包在一个if语句里,就可以根据这条if语句的条件表达式的求值结果是true(这个方法存在)还是false(这个方法不存在)来决定应该采取怎样的行动。

    在使用对象检测时,一定要删除方法名后的圆括号,如果不删掉,测试的将是方法的结果,无论方法是否存在。

    function myFunction(){
      if(document.getElementById){
        statements using getElementById
      }
    }

    虽然只是一条简单的if语句,但是却可以确保那些“古老的”浏览器不会因为我的脚本代码而出问题,这么做是为了让脚本有良好的向后兼容性。

    浏览器嗅探技术:指通过提取浏览器供应商提供的信息来解决向后兼容问题。

    性能考虑:确定脚本执行的性能最优

    1、尽量少访问DOM和尽量减少标记

    2、合并和放置脚本

    减少请求数量通常都是在性能优化是时首先要考虑的。

    脚本在标记中的位置对页面的初次加载时间也有很大影响,根据HTTP规范,浏览器每次从同一个域名中最多只能同时下载两个文件。而在下载脚本期间,浏览器不会下载其他任何文件,即使是来自不同域名的文件也不会下载,所有其他资源都要等脚本加载完毕后才能下载

    3、压缩脚本

    请看这篇文章

     nodeName属性总是返回一个大写字母的值,即使元素在HTML文档里是小写字母

    最好不要用onkeypress事件处理函数,onclick事件处理函数已经能满足需要。虽然它的名字为“onclick”,但它对键盘访问的支持相当完美

     DOM由3部分组成:

      1.Core DOM:核心DOM,定义了一套标准的针对任何结构化文档的对象,包括HTML、XHTML、XML

      2.XML DOM:定义了一套标准的针对XML文档的对象

      3.HTML DOM:定义了一套标准的针对HTML文档的对象

    不得不说,从前我写网页文件,从来没有考虑过这些提高性能的问题,看了书之后受益匪浅啊!以后我会注意这方面的问题的,使自己的网站更完善,更完美!

  • 相关阅读:
    HRBUST 1377 金明的预算方案
    51Nod 2649 完全背包
    计蒜客 T2129 采药
    计蒜客 T1408 矩形嵌套
    OpenJudge 2711 合唱队形
    51Nod 2080 最长上升子序列
    2021NUAA暑假集训 Day5 部分题解
    2021NUAA暑假集训 Day4 部分题解
    C++ 11 move constructor 何时调用?
    老外这样说英文
  • 原文地址:https://www.cnblogs.com/wyy725872/p/4439567.html
Copyright © 2020-2023  润新知