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 相关文章推荐
对YUI扩展的Gird组件 Part-2
Mar 10 Javascript
JavaScript 事件对象的实现
Jul 13 Javascript
一个js控制的导航菜单实例代码
Dec 03 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
May 29 Javascript
浅谈javascript构造函数与实例化对象
Jun 22 Javascript
jQuery中$.extend()用法实例
Jun 24 Javascript
js实现网页多级级联菜单代码
Aug 20 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
Sep 21 Javascript
浅谈jquery选择器 :first与:first-child的区别
Nov 20 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
Jul 20 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
Oct 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
PHP 和 MySQL 基础教程(四)
2006/10/09 PHP
ThinkPHP与PHPExcel冲突解决方法
2011/08/08 PHP
php 保留字列表
2012/10/04 PHP
PHP实现通过中文字符比率来判断垃圾评论的方法
2014/10/20 PHP
CI框架实现cookie登陆的方法详解
2016/05/18 PHP
PHP使用Redis替代文件存储Session的方法
2017/02/15 PHP
使用JS操作页面表格,元素的一些技巧
2007/02/02 Javascript
使用js解决由border属性引起的div宽度问题
2013/11/26 Javascript
不使用jquery实现js打字效果示例分享
2014/01/19 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
2014/10/17 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
2016/11/25 Javascript
基于javascript实现按圆形排列DIV元素(一)
2016/12/02 Javascript
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
vue 自定义提示框(Toast)组件的实现代码
2018/08/17 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
2019/06/19 Javascript
微信小程序引入VANT组件的方法步骤
2019/09/19 Javascript
vue3.0生命周期的示例代码
2020/09/24 Javascript
Python用Pillow(PIL)进行简单的图像操作方法
2017/07/07 Python
对pandas replace函数的使用方法小结
2018/05/18 Python
python 反向输出字符串的方法
2018/07/16 Python
Pytorch 实现权重初始化
2019/12/31 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
Python爬虫自动化爬取b站实时弹幕实例方法
2021/01/26 Python
世界领先的以旅馆为主的在线预订平台:Hostelworld
2016/10/09 全球购物
Ted Baker美国官网:英国时尚品牌
2018/10/29 全球购物
英国标准协会商店:BSI Shop
2019/02/25 全球购物
string = null 和string = ''的区别
2013/04/28 面试题
介绍一下linux文件系统分配策略
2013/02/25 面试题
茶叶店创业计划书范文
2014/01/19 职场文书
司机辞职报告范文
2014/01/20 职场文书
护理专业毕业生自荐信
2014/06/15 职场文书
搞笑婚礼主持词开场白
2015/11/24 职场文书
CSS3 制作的悬停缩放特效
2021/04/13 HTML / CSS
Oracle创建只读账号的详细步骤
2021/06/07 Oracle