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 相关文章推荐
自己整理的一个javascript日期处理函数
Oct 16 Javascript
jquery中通过过滤器获取表单元素的实现代码
Jul 05 Javascript
一个关于javascript匿名函数的问题分析
Mar 30 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
Oct 11 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
Dec 23 Javascript
jquery编写Tab选项卡滚动导航切换特效
Jul 17 Javascript
AngularJS 面试题集锦
Sep 06 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
Jan 05 Javascript
node.js入门学习之url模块
Feb 25 Javascript
纯js实现页面返回顶部的动画(超简单)
Aug 10 Javascript
layer弹出层父子页面事件相互调用方法
Aug 17 Javascript
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
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
php 获取本地IP代码
2013/06/23 PHP
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
PHP调用存储过程返回值不一致问题的解决方法分析
2016/04/26 PHP
PHP中仿制 ecshop验证码实例
2017/01/06 PHP
ThinkPHP5 的简单搭建和使用详解
2018/11/15 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
dojo学习第二天 ajax异步请求之绑定列表
2011/08/29 Javascript
JavaScript入门之基本函数详解
2011/10/21 Javascript
JS控制一个DIV层在指定时间内消失的方法
2014/02/17 Javascript
js调试系列 源码定位与调试[基础篇]
2014/06/18 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
2015/08/07 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
2015/08/17 Javascript
JS实现可调整倒计时间代码分享
2015/08/18 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
2015/12/03 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
2018/03/01 Javascript
JavaScript实现的拼图算法分析
2019/02/13 Javascript
elementui实现预览图片组件二次封装
2020/12/29 Javascript
Python中datetime常用时间处理方法
2015/06/15 Python
对Python 除法负数取商的取整方式详解
2018/12/12 Python
浅谈spring boot 集成 log4j 解决与logback冲突的问题
2020/02/20 Python
python 截取XML中bndbox的坐标中的图像,另存为jpg的实例
2020/03/10 Python
django model object序列化实例
2020/03/13 Python
PyQt5连接MySQL及QMYSQL driver not loaded错误解决
2020/04/29 Python
自考生毕业自我鉴定
2013/10/10 职场文书
汽修专业学生自我鉴定
2013/11/16 职场文书
优秀教师主要事迹
2014/02/01 职场文书
机械电子工程专业自荐书
2014/06/10 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
中班下学期个人总结
2015/02/12 职场文书
党员干部公开承诺书范文
2015/04/27 职场文书
Python中相见恨晚的技巧
2021/04/13 Python
MySQL的join buffer原理
2021/04/29 MySQL
联想win10摄像头打不开怎么办?win10笔记本摄像头打不开解决办法
2022/04/08 数码科技