js平稳退化,性能考虑(javascript DOM 编程艺术)
2016-08-07 22:31
393 查看
关于弹出窗口
应该只在绝对必要情况下才使用弹出窗口,因为这将牵涉到网页的可访问性问题,例如,用户使用的屏幕读取软件无法向用户说明弹出了窗口。因此如果网页上的某个链接将弹出窗口,最好在这个链接本身的文字中予以说明。
JavaScript使用window对象的open()方法来创建新的浏览器窗口。这个方法有三个参数
window.open(url,name,features)
三个参数均为可选,
第一个参数是想在新窗口里打开的网页的url 地址,如果省略这个参数,屏幕上将会弹出一个空白的浏览器窗口。
第二个参数是新窗口的名字,可以在代码里通过这个名字与新窗口进行通信。
最后一个参数是一个以逗号分隔的字符串,其内容是新窗口的各种属性。这些属性包括新窗口的尺寸(宽度和高度)以及新窗口被启用或禁用的各种浏览功能(工具条,菜单条,初始显示位置,等等)。对于这个参数应该掌握以下原则:新窗口的浏览功能要少而精。
window.open("http://baidu.com","新的窗口","width=320px,height=480");
"javascript" 伪协议 在HTML文档里通过javascript 伪协议 调用JavaScript代码的做法非常不好
<a href="javascript:pop()" title="The Famous clock" >点击执行pop()函数</a>
<a href="#" onclick="pop('http://baidu.com'); return false;">例子</a>
因为上面这条HTML指令里使用了return false; 语句,这个链接不会真正的打开。‘#’ 符号是一个仅供文档内部使用的链接符号(单就这条指令而言,“#”是未指向任何目标的内部链接)。在某些浏览器里,“#”链接指向当前文档开头,把 href 属性的值设为 “#” 只是为了创建一个空链接。实际工作全部由onclick 属性负责完成。
这种做法也不行,一旦用户禁用了浏览器的JavaScript功能,这样的链接将毫无用处,
分离JavaScript
一般来说,根据HTTP规范,浏览器每次从同一个域名中最多只能同时下载两个文件。而在下载脚本期间,浏览器不会下载其他任何文件,即使是来自不同域名的文件也不会下载,所有其他资源都要等脚本加载完毕之后才能下载。
把<script>标签放在文档的末尾,</body>标记之前就可以让页面变得更快,
加快加载速度,还可以使用工具压缩脚本。
代码压缩工具,
1)Uglify http://lisperator.net/uglifyjs/
2)雅虎的 YUI Compressor http://developer.yahoo.com/yui/compressor/
3)谷歌的 Closure Compiler https://developers.google.com/closure/compiler/
应该只在绝对必要情况下才使用弹出窗口,因为这将牵涉到网页的可访问性问题,例如,用户使用的屏幕读取软件无法向用户说明弹出了窗口。因此如果网页上的某个链接将弹出窗口,最好在这个链接本身的文字中予以说明。
JavaScript使用window对象的open()方法来创建新的浏览器窗口。这个方法有三个参数
window.open(url,name,features)
三个参数均为可选,
第一个参数是想在新窗口里打开的网页的url 地址,如果省略这个参数,屏幕上将会弹出一个空白的浏览器窗口。
第二个参数是新窗口的名字,可以在代码里通过这个名字与新窗口进行通信。
最后一个参数是一个以逗号分隔的字符串,其内容是新窗口的各种属性。这些属性包括新窗口的尺寸(宽度和高度)以及新窗口被启用或禁用的各种浏览功能(工具条,菜单条,初始显示位置,等等)。对于这个参数应该掌握以下原则:新窗口的浏览功能要少而精。
window.open("http://baidu.com","新的窗口","width=320px,height=480");
"javascript" 伪协议 在HTML文档里通过javascript 伪协议 调用JavaScript代码的做法非常不好
<a href="javascript:pop()" title="The Famous clock" >点击执行pop()函数</a>
<a href="#" onclick="pop('http://baidu.com'); return false;">例子</a>
因为上面这条HTML指令里使用了return false; 语句,这个链接不会真正的打开。‘#’ 符号是一个仅供文档内部使用的链接符号(单就这条指令而言,“#”是未指向任何目标的内部链接)。在某些浏览器里,“#”链接指向当前文档开头,把 href 属性的值设为 “#” 只是为了创建一个空链接。实际工作全部由onclick 属性负责完成。
这种做法也不行,一旦用户禁用了浏览器的JavaScript功能,这样的链接将毫无用处,
分离JavaScript
一般来说,根据HTTP规范,浏览器每次从同一个域名中最多只能同时下载两个文件。而在下载脚本期间,浏览器不会下载其他任何文件,即使是来自不同域名的文件也不会下载,所有其他资源都要等脚本加载完毕之后才能下载。
把<script>标签放在文档的末尾,</body>标记之前就可以让页面变得更快,
加快加载速度,还可以使用工具压缩脚本。
代码压缩工具,
1)Uglify http://lisperator.net/uglifyjs/
2)雅虎的 YUI Compressor http://developer.yahoo.com/yui/compressor/
3)谷歌的 Closure Compiler https://developers.google.com/closure/compiler/
相关文章推荐
- 【DOM编程艺术】性能考虑
- JS/Javascript DOM 编程艺术(第2版)读书笔记 第3章 DOM
- 【我的JS第三本】JavaScript_DOM编程艺术第二版读书笔记
- JavaScript DOM 编程艺术(第二版) 常用JS小脚本
- JSDOM编程艺术-笔记-ch5 平稳退化&分离JS(BY 弹窗实例)
- 平稳退化,JS和HTML标记分离,极致性能的JavaScript图片库
- JavaScript DOM编程中关于性能的考虑
- 【DOM编程艺术】渐进增强与平稳退化
- JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
- Javascript DOM 编程艺术:ENHANCING CONTENT
- 好书推荐:JavaScript DOM 编程艺术英文原版PDF下载
- JavaScript Dom 编程艺术 阅读笔记
- 【DOM编程艺术】javascript:伪协议和onclick 弹出窗口(一)
- 读书笔记--javascript DOM 编程艺术
- 【DOM编程艺术】综合示例 global.js
- 《javascript+dom 编程艺术 》学习笔记
- 【读书笔记】读《JavaScript DOM 编程艺术-第2版》
- Javascript DOM 编程艺术:创建一个简单的gallery
- DHTML (JavaScript Dom 编程艺术)
- Javascript DOM 编程艺术:dom 节点及操作节点方法