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

今天看了第五章,讲了许多我一直没有考虑过的内容:平稳退化、分离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、压缩脚本

请看这篇文章

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

时间: 2024-09-29 15:31:35

读《JavaScript dom编程艺术(第2版)》笔记 5的相关文章

javascript dom编程艺术 第2版

W3C 推出了标准化的DOM, 就是我们现在常用方法, 比如获取一个元素:document.getElementById(id) 语法用JavaScript编写的脚本,都是由一系列指令构成,这些指令叫做语句(statement). 只要按照正确的语法编写出来的语句才能得到正确的解释.JavaScript 每条语句以换行符或分号视为结束. 如下为两条语句:first statementsecond statement也可以放在一行:first statment; second statment;建

《JavaScript DOM编程艺术(第二版)》读书总结

这本书是一本很基础的书,但对于刚入前端不久的我来说是一本不错的书,收获还是很大的,对一些基础的东西理解得更加透彻了. 1.DOM即document object model的缩写,文档对象模型,JavaScript做的就是对DOM的操作,或者说对节点(node)的操作. 2.js中DOM.this这是都是对象,有属性有方法. 3.document对象有body属性,所以可以直接写成document.body,无需再获取body元素(document.getElementsByTagName("b

JavaScript DOM编程艺术(第二版)读书笔记 ——(一)

学习和工作中经常会通过搜索引擎的引导进入到博客园中,技术大牛们的知识概括往往一针见血解决了困扰我很久的大大小小的问题.可是一直都是看别人写的博客,自己一直没动过手,直到看到一个博客说到,从简到繁地记记读书笔记或知识总结是促进技术进步的一个很好的方法,觉得非常在理,学习后的整理更能记得牢固,于是最近下定决心,开始我的博客园"生活". 说了从简到繁,作为一个前端小小小小白,我决定把经典的前端书籍的读书笔记写在这里,说不定以后遗忘的时候返回来看到会有豁然开朗的感觉(偷笑). 第一章--Jav

JavaScript -- JavaScript DOM 编程艺术(第2版)

/* 渐进增强 平稳退化 网页 结构层(structural layer): HTML 表示层(presentation layer): CSS <link rel="stylesheet" href="style.css" media="screen"/> 行为层(behavior layer): JavaScript <script src="scripts.js"></script>

《JavaScript DOM 编程艺术 第 2 版》

第 5 章 最佳实践 平稳退化:现在基本所有带交互的网站都使用 Ajax,SAP 也火起来了,平稳退化真是很难实现了(看到第七章发现我之前的观点是错了) 分离 JS 向下兼容 性能考虑 第 6 章 案例研究:图片库改进版 键盘访问(提高可访问性) onclick 已经帮我们处理了,eg:下面这个绑定了 onclick 的按钮鼠标左键点击和 tab 然后回车一样弹出 "clicked" <!DOCTYPE html> <html lang="en"&

javascript DOM编程艺术中文pdf版提供

http://www.readnovel.com/novel/99350/5019.htmlhttp://www.readnovel.com/novel/99350/5020.htmlhttp://www.readnovel.com/novel/99350/5021.htmlhttp://www.readnovel.com/novel/99350/5022.htmlhttp://www.readnovel.com/novel/99350/5023.htmlhttp://www.readnovel

Javascript Dom编程艺术(第2版)读书笔记

Javascript Dom编程艺术这本书我看的是第2版的,真心觉得这本书不错,它将DOM编程的一些基本原则,及如何让Javascript代码在浏览器不支持的情况下,或浏览器支持了Javascript但用户禁用它的情况下做到平衡退化,让最基本的操作仍能顺利完成,以及如何让结构与样式分享做到真正的渐近增强叙述得很清楚,也很容易理解接受.我也是看了这本书之后,才对代码优化,结构,行为,样式有了进一步的加深理解. Javascript Dom编程艺术(第2版)读书笔记,布布扣,bubuko.com

JavaScript DOM 编程艺术(第2版)---序中故

前言: 虽然已入行近乎一载,却还是对自己所处的职业-前端,模模糊糊,浑浑噩噩.故,不求鹤立独群,但略知一二.从<JavaScript DOM 编程艺术(第2版)>入手,打一打基础的同时,了解一下行业发展历史.多一些不明所以的坚持,少一丝追名逐利的执念. 明确词语含义: (X)HTML,DHTML 从知乎上扒来的图片: 图片出处:HTML4,HTML5,XHTML 之间有什么区别? "浏览器嗅探":用来探测浏览器的具体品牌和具体版本的测试及分支代码 DOM(Document

JavaScript DOM编程艺术学习笔记(一)

嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推荐给想了解HDOM的相关人员!首先非常感谢作者写出了这么好的一本书,谢谢!书中的内容比较多,我仅记下我认为对自己和他人有所帮助的一些内容! 嗯,首先还是让代码来说话吧! 下面是两段此书中反复强调且通用的经典代码段 1:相当的经典和实用,尤其是当需要为页面加载函数绑定多个函数的时候 /** * [addLoad

JavaScript DOM编程艺术第一章:JavaScript简史

本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助,所以 如果您也看过这本书,希望不要喷小的"抄袭",其实我也懒得敲这些文字也想简单粗暴地上代码,但是只有实践没有理论不容易自己理解,为避免误导,该"抄"的地方还是要"抄"的,哈哈~~ 一.JavaScript的起源 JavaScript是Netscap