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代码示例(重构前后对比)
Jan 23 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
Sep 25 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 Javascript
jquery利用拖拽方式在图片上添加热链接
Nov 24 Javascript
canvas学习之API整理笔记(一)
Dec 29 Javascript
使用jquery给新生的th绑定hover事件的实例
Feb 10 Javascript
js时间戳格式化成日期格式的多种方法介绍
Feb 16 Javascript
vuejs如何配置less
Apr 25 Javascript
vue 设置proxyTable参数进行代理跨域
Apr 09 Javascript
基于webpack4+vue-cli3项目实现换肤功能
Jul 17 Javascript
JavaScript 类的封装操作示例详解
May 16 Javascript
JS常见内存泄漏及解决方案解析
May 30 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 Global变量定义当前页面的全局变量实现探讨
2013/06/05 PHP
基于empty函数的输出详解
2013/06/17 PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
2015/08/23 PHP
PHP中__autoload和Smarty冲突的简单解决方法
2016/04/08 PHP
Laravel 批量更新多条数据的示例
2017/11/27 PHP
Django 标签筛选的实现代码(一对多、多对多)
2018/09/05 PHP
PHP 并发场景的几种解决方案
2019/06/14 PHP
thinkPHP5.1框架中Request类四种调用方式示例
2019/08/03 PHP
javascript编程起步(第五课)
2007/02/27 Javascript
jquery提示 &quot;object expected&quot;的解决方法
2009/12/13 Javascript
这段js代码得节约你多少时间
2011/12/20 Javascript
node.js中的fs.fchmod方法使用说明
2014/12/16 Javascript
Function.prototype.apply()与Function.prototype.call()小结
2016/04/27 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
2017/07/07 Javascript
vue2实现可复用的轮播图carousel组件详解
2017/11/27 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
2018/03/05 Javascript
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
[15:41]教你分分钟做大人——灰烬之灵
2015/03/11 DOTA
基于wxpython实现的windows GUI程序实例
2015/05/30 Python
json跨域调用python的方法详解
2017/01/11 Python
Python3爬虫爬取百姓网列表并保存为json功能示例【基于request、lxml和json模块】
2018/12/05 Python
python获取本机所有IP地址的方法
2018/12/26 Python
Python3.5 win10环境下导入kera/tensorflow报错的解决方法
2019/12/19 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
如何在python中判断变量的类型
2020/07/29 Python
英国设计的甲板鞋和船鞋:Chatham
2018/12/06 全球购物
沃尔玛旗下墨西哥超市:Bodega Aurrera
2020/11/13 全球购物
面向对象编程OOP的优点
2013/01/22 面试题
公司节能减排方案
2014/05/16 职场文书
小学教师读书活动总结
2014/07/08 职场文书
人事专员岗位说明书
2014/07/29 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
2019公司借款合同范本2篇!
2019/07/24 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
利用nginx搭建RTMP视频点播、直播、HLS服务器
2022/05/25 Servers