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 相关文章推荐
jquery 图片 上一张 下一张 链接效果(续篇)
Apr 20 Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
Sep 03 Javascript
中文字符串截取的js函数代码
Apr 17 Javascript
javascript实现微信分享
Dec 23 Javascript
AngularJS模仿Form表单提交的实现代码
Dec 08 Javascript
深入理解js中的加载事件
Feb 08 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
Dec 22 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
Dec 09 Javascript
解决layer.confirm选择完之后消息框不消失的问题
Sep 16 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
Feb 26 Javascript
Vue 3.0中jsx语法的使用
Nov 13 Javascript
通过实例解析js可枚举属性与不可枚举属性
Dec 02 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
基于php使用memcache存储session的详解
2013/06/25 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
全面了解PHP中的全局变量
2016/06/17 PHP
PHP实现支持CURL字符串证书传输的方法
2019/03/23 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
JavaScript的document对象和window对象详解
2010/12/30 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
JS对象转换为Jquery对象实现代码
2013/12/29 Javascript
一个实用的图片切换支持点击切换和自动轮播
2014/09/09 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
2016/08/08 Javascript
你知道setTimeout是如何运行的吗?
2016/08/16 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
怎样判断jQuery当前元素是隐藏还是显示
2016/11/23 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
bootstrap Table插件使用demo
2017/08/07 Javascript
基于node.js之调试器详解
2017/08/22 Javascript
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
JS处理一些简单计算题
2018/02/24 Javascript
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
2020/11/10 Javascript
浅谈pyhton学习中出现的各种问题(新手必看)
2017/05/17 Python
Python编程实现双击更新所有已安装python模块的方法
2017/06/05 Python
Scrapy的简单使用教程
2017/10/24 Python
Python实现的服务器示例小结【单进程、多进程、多线程、非阻塞式】
2019/05/23 Python
python logging通过json文件配置的步骤
2020/04/27 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
CSS3 旋转立方体问题详解
2020/01/09 HTML / CSS
来自Ocado的宠物商店:Fetch
2018/07/10 全球购物
荷兰在线啤酒店:Beerwulf
2019/08/26 全球购物
英语生日邀请函
2014/01/23 职场文书
小学校园活动策划
2014/01/30 职场文书
人力资源作业细则
2014/03/03 职场文书
风险评估实施方案
2014/03/09 职场文书
初中中等生评语
2014/12/29 职场文书
销售会议开幕词
2016/03/04 职场文书
js作用域及作用域链工作引擎
2022/07/07 Javascript