JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)


Posted in Javascript onOctober 01, 2013

1、防止滥用JavaScript“不管你想通过JavaScript改变哪个网页的行为,都必须三思而后行。首先要确认:为这个网页增加这种额外的行为是否确有必要?”

个人认为,作者的这句话放在当前几乎无处不用JavaScript来增强Web页面交互体验的时代,可以理解为应该适当的使用JavaScript,而不要因为使用了实现酷炫效果的脚本导致网页加载缓慢或者兼容性极差而舍本求末,导致用户无法浏览和使用网站。

2、平稳退化平稳退化是指当用户禁用浏览器JavaScript或浏览器不支持JavaScript(还有吗)时,应该让用户仍然可以正常的浏览网站。

刚看到这个问题的时候,感觉这种情况几乎可以忽略不计,因此看了一些关于这个问题的讨论(知乎)以及博文《javascript不可用的问题探究》,并拿博客园首页做了实验,即在禁用JavaScript的情况下浏览网页,发现虽然无法评论博客、无法正常显示分类效果、当然广告也没了,但是主要的功能(查看博文、分页跳转等)是可以正常使用的。

那么基本可以得出结论:在考虑平稳退化的时候,根据需要至少应该保证网站主要功能可以正常使用。对博客园来说,就是查看博客。

3、禁用"javascript:"伪协议和内嵌事件处理函数虽然在HTML中使用这两种写法,不会带来什么严重问题,但是它会阻止平稳退化(网页行为不一致),并且使脚本的编写方式混乱,增加了代码维护的难度。

4、性能考虑关于性能考虑的最佳实践,还是非常容易理解的。

“尽量少访问DOM和尽量减少标记”。少访问DOM是因为查询DOM的操作会非常耗费性能。多处函数的重复DOM查询应该进行重构,提取为全局变量或者直接作为参数进行传递。减少标记可以减小DOM的规模,从而减少查找DOM树中特定元素的时间。

“合并脚本”。合并外部脚本文件,可以减少加载页面时发送的请求次数。通过观察Chrome开发者工具Network标签,可以非常清楚的看到加载网页的请求次数和时间,下图为请求我的博客的情况,第三方的百度分享插件是最慢被加载的,当然整体加载时间还是可以接受的。不过当引用的文件过多过大,或者依赖的第三方插件请求缓慢时,整个页面就会一直处于加载状态,给人的感觉就是网页加载缓慢,体验就会变差。

JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)

另外,“脚本在标记中的位置对页面的初次加载时间也有很大的影响”。就像bootstrap的实例中,引用的JS插件统统放在了页面的尾部,并加了说明。

JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
因为根据HTTP规范,浏览器每次从同一个域名中最多只能同时下载两个文件,而在脚本下载期间,浏览器不会下载其它任何文件,即使是来自不同域名的文件也不会下载,所有其它的资源都要等脚本加载完毕后才会下载;而通常我们会把脚本文件放在块中,此时该块中的脚本会导致浏览器无法并行加载其它文件(如图片或其它脚本)。

把所有 <script> 标签放在文档的末尾,</body>标签之前,就可以让页面变的更快,因为这样,在加载脚本时,window对象的load事件依然可以执行对文档进行各种操作。

最后一条建议就是压缩脚本,这个见的很多,通常就是以.min.js为后缀的脚本文件。

Javascript 相关文章推荐
Prototype使用指南之enumerable.js
Jan 10 Javascript
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
Feb 09 Javascript
List Information About the Binary Files Used by an Application
Jun 18 Javascript
文本域中换行符的替换示例
Mar 04 Javascript
jQuery实现购物车数字加减效果
Mar 14 Javascript
纯javascript代码实现计算器功能(三种方法)
Sep 07 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
Nov 22 Javascript
AngularJS实现tab选项卡的方法详解
Jul 05 Javascript
基于input框覆盖掉数字英文的实例讲解
Jul 21 Javascript
深入浅析Vue不同场景下组件间的数据交流
Aug 15 Javascript
JS实现的简单四则运算计算器功能示例
Sep 27 Javascript
小程序实现简单语音聊天的示例代码
Jul 24 Javascript
js有序数组的连接问题
Oct 01 #Javascript
jquery更换文章内容与改变字体大小代码
Sep 30 #Javascript
jquery配合css简单实现返回顶部效果
Sep 30 #Javascript
jquery提取元素里的纯文本不包含span等里的内容
Sep 30 #Javascript
jquery得到font-size属性值实现代码
Sep 30 #Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
Sep 30 #Javascript
js防止表单重复提交的两种方法
Sep 30 #Javascript
You might like
人大复印资料处理程序_输入篇
2006/10/09 PHP
PHP加密3DES报错 Call to undefined function: mcrypt_module_open() 如何解决
2016/04/17 PHP
javascript变量作用域使用中常见错误总结
2013/03/26 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
2013/12/30 Javascript
Node.js安装教程和NPM包管理器使用详解
2014/08/16 Javascript
判断字符串的长度(优化版)中文占两个字符
2014/10/30 Javascript
javascript白色简洁计算器
2015/05/04 Javascript
js实现模拟计算器退格键删除文字效果的方法
2015/05/07 Javascript
js判断移动端是否安装某款app的多种方法
2015/12/18 Javascript
JavaScript和jQuery制作光棒效果
2017/02/24 Javascript
详解React Native顶|底部导航使用小技巧
2017/09/14 Javascript
JS基于贪心算法解决背包问题示例
2017/11/27 Javascript
fastadmin中调用js的方法
2019/05/14 Javascript
js实现网页版贪吃蛇游戏
2020/02/22 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
2020/08/14 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
2021/01/27 Vue.js
[06:25]DOTA2英雄梦之声_第17期_大地之灵
2014/06/20 DOTA
浅谈Python中带_的变量或函数命名
2017/12/04 Python
快速查询Python文档方法分享
2017/12/27 Python
pandas数值计算与排序方法
2018/04/12 Python
基于python实现百度翻译功能
2019/05/09 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
wxPython:python首选的GUI库实例分享
2019/10/05 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
新年福利来一波之Python轻松集齐五福(demo)
2020/01/20 Python
python基于socket函数实现端口扫描
2020/05/28 Python
Python使用windows设置定时执行脚本
2020/11/12 Python
详解h5页面在不同ios设备上的问题总结
2019/03/01 HTML / CSS
澳大利亚首屈一指的在线购物目的地:Kogan.com
2017/02/02 全球购物
英国奢华护肤、美容和Spa品牌:Temple Spa
2019/11/02 全球购物
电钳专业个人求职信
2014/01/04 职场文书
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
餐厅楼面主管岗位职责范本
2014/02/16 职场文书
2019暑假学生安全口号
2019/06/27 职场文书
解决numpy数组互换两行及赋值的问题
2021/04/17 Python
django项目、vue项目部署云服务器的详细过程
2022/07/23 Servers