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 相关文章推荐
DD_belatedPNG,IE6下PNG透明解决方案(国外)
Dec 06 Javascript
jquery常用技巧及常用方法列表集合
Apr 06 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
Aug 19 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
jquery插件锦集【推荐】
Dec 16 Javascript
详解vue-validator(vue验证器)
Jan 16 Javascript
vue项目中api接口管理总结
Apr 20 Javascript
@angular前端项目代码优化之构建Api Tree的方法
Dec 24 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
Jun 05 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
Sep 19 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
Apr 29 Javascript
ant design 日期格式化的实现
Oct 27 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
ZF等常用php框架中存在的问题
2008/01/10 PHP
php下实现在指定目录搜索指定类型文件的函数
2008/10/03 PHP
php文件上传的简单实例
2013/10/19 PHP
PHP新建类问题分析及解决思路
2015/11/19 PHP
php中的登陆login实例代码
2016/06/20 PHP
PHP实现文件上传功能实例代码
2017/05/18 PHP
Laravel5.1 框架控制器基础用法实例分析
2020/01/04 PHP
css配合jquery美化 select
2013/11/29 Javascript
为指定的元素添加遮罩层的示例代码
2014/01/15 Javascript
Jquery实现自定义tooltip示例代码
2014/02/12 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
2015/01/13 Javascript
javasript实现密码的隐藏与显示
2015/05/08 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
2017/08/28 Javascript
javascript流程控制语句集合
2017/09/18 Javascript
小程序分页实践之编写可复用分页组件
2019/07/18 Javascript
[08:08]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY
2014/06/25 DOTA
python装饰器与递归算法详解
2016/02/18 Python
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
Python/Django后端使用PIL Image生成头像缩略图
2019/04/30 Python
python提取log文件内容并画出图表
2019/07/08 Python
Python urllib.request对象案例解析
2020/05/11 Python
详解Pandas 处理缺失值指令大全
2020/07/30 Python
Django vue前后端分离整合过程解析
2020/11/20 Python
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
HTML5学习笔记之html5与传统html区别
2016/01/06 HTML / CSS
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
教师评优的个人自我评价分享
2013/09/19 职场文书
应届大学生简历中的自我评价
2014/01/15 职场文书
30年同学聚会感言
2014/01/30 职场文书
鼓励运动员的广播稿
2014/02/08 职场文书
党的群众路线教育实践活动先进个人材料
2014/12/24 职场文书
云台山导游词
2015/02/03 职场文书
科普 | 业余无线电知识-波段篇
2022/02/18 无线电
台积电称即便经济低迷也没有降价的计划
2022/04/21 数码科技