JavaScript DOM 编程艺术（第2版）读书笔记(JavaScript的最佳实践)

1、防止滥用JavaScript“不管你想通过JavaScript改变哪个网页的行为，都必须三思而后行。首先要确认：为这个网页增加这种额外的行为是否确有必要？”

个人认为，作者的这句话放在当前几乎无处不用JavaScript来增强Web页面交互体验的时代，可以理解为应该适当的使用JavaScript，而不要因为使用了实现酷炫效果的脚本导致网页加载缓慢或者兼容性极差而舍本求末，导致用户无法浏览和使用网站。

2、平稳退化平稳退化是指当用户禁用浏览器JavaScript或浏览器不支持JavaScript（还有吗）时，应该让用户仍然可以正常的浏览网站。

刚看到这个问题的时候，感觉这种情况几乎可以忽略不计，因此看了一些关于这个问题的讨论（知乎）以及博文《javascript不可用的问题探究》，并拿博客园首页做了实验，即在禁用JavaScript的情况下浏览网页，发现虽然无法评论博客、无法正常显示分类效果、当然广告也没了，但是主要的功能（查看博文、分页跳转等）是可以正常使用的。

那么基本可以得出结论：在考虑平稳退化的时候，根据需要至少应该保证网站主要功能可以正常使用。对博客园来说，就是查看博客。

3、禁用"javascript:"伪协议和内嵌事件处理函数虽然在HTML中使用这两种写法，不会带来什么严重问题，但是它会阻止平稳退化（网页行为不一致），并且使脚本的编写方式混乱，增加了代码维护的难度。

4、性能考虑关于性能考虑的最佳实践，还是非常容易理解的。

“尽量少访问DOM和尽量减少标记”。少访问DOM是因为查询DOM的操作会非常耗费性能。多处函数的重复DOM查询应该进行重构，提取为全局变量或者直接作为参数进行传递。减少标记可以减小DOM的规模，从而减少查找DOM树中特定元素的时间。

“合并脚本”。合并外部脚本文件，可以减少加载页面时发送的请求次数。通过观察Chrome开发者工具Network标签，可以非常清楚的看到加载网页的请求次数和时间，下图为请求我的博客的情况，第三方的百度分享插件是最慢被加载的，当然整体加载时间还是可以接受的。不过当引用的文件过多过大，或者依赖的第三方插件请求缓慢时，整个页面就会一直处于加载状态，给人的感觉就是网页加载缓慢，体验就会变差。

另外，“脚本在标记中的位置对页面的初次加载时间也有很大的影响”。就像bootstrap的实例中，引用的JS插件统统放在了页面的尾部，并加了说明。


因为根据HTTP规范，浏览器每次从同一个域名中最多只能同时下载两个文件，而在脚本下载期间，浏览器不会下载其它任何文件，即使是来自不同域名的文件也不会下载，所有其它的资源都要等脚本加载完毕后才会下载；而通常我们会把脚本文件放在块中，此时该块中的脚本会导致浏览器无法并行加载其它文件（如图片或其它脚本）。

把所有 <script> 标签放在文档的末尾，</body>标签之前，就可以让页面变的更快，因为这样，在加载脚本时，window对象的load事件依然可以执行对文档进行各种操作。

最后一条建议就是压缩脚本，这个见的很多，通常就是以.min.js为后缀的脚本文件。

赞 (0)

相关推荐

  • Javascript & DHTML 实例编程（教程）DOM基础和基本API

    一.什么是DOM? 什么叫DOM,DOM是文档对象模型(Document Object Model,是基于浏览器编程(在本教程中,可以说就是DHTML编程)的一套API接口,W3C出台的推荐标准,每个浏览器都有一些细微的差别,其中以Mozilla的浏览器最与标准接近.单纯的Javascript要结合DOM才能做DHTML编程,才能做出漂亮的效果.应用于WEB.这点几乎与其它的语言无异,正如C/C++需要库支持是一样的道理.否则就是单纯的在语法上做研究了.因此,必须要对DOM有一定的认识,才能把J

  • Javascript入门学习第六篇 js DOM编程第1/2页

    学习英文: Dom:文档对象模型.Document object model Bom:浏览器对象模型. 注:也可以叫窗口对象模型.(window object model.) API:应用编程接口. 注:DOM其实可以看作一种API. Node:节点. 注:节点分为:元素节点,属性节点,文本节点. 元素节点 包含 属性节点和文本节点. Dom树: 下面我们直接看 到底怎么操作DOM. 1,    创建元素节点.createElement(): <SCRIPT LANGUAGE="JavaS

  • javascript DOM编程实例(智播客学习)

    并给我们讲解了很多关于如何去学习DOM的方法,觉得真的是受益匪浅啊.下面就几个我觉得比较好的例子和大家分享一下. 1.二级连动下拉菜单(一级是省份,二级是城市,要求一级选中省份,二级城市对应出现) 步骤:1)基本框架(HTML):两个复选框,而第二个复选框里面开始应该是没有选项的,注意第一个下拉框会作为事件源,通过 onchange方法激发JavaScript中的功能实现部分. 复制代码 代码如下: <xmp> <select id="province" onchan

  • 《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史

    JavaScript 是Netscape公司与Sun公司合作开发的.在 JavaScript 1.0发布时,Netscape Navigator主宰着浏览器市场.微软在推出IE3的时候发布了自己的VBScript语言,同时以JScript为名发布了JavaScript 的一个版本,很快赶上了 Netscape 的步伐.面对微软公司的竞争,Netscape 和 Sun公司联合ECMA(欧洲计算机制造商协会)对JavaScript 语言进行了标准化,于是出现了ECMAScript语言,这是同一种语言

  • 读JavaScript DOM编程艺术笔记

    1.获得当前元素的下一个元素 复制代码 代码如下: function getNextElement(node){ if(node.nodeType==1){ return node; } if(node.nextSibling){ return getNextElement(node.nextSibling); } return null; }; 2.外部引入的js,添加页面加载方法 复制代码 代码如下: function addLoadEvent(func){ var oldonload=wi

  • JavaScript DOM 编程艺术（第2版）读书笔记(JavaScript的最佳实践)

    JavaScript DOM 编程艺术（第2版）读书笔记(JavaScript的最佳实践)

    1.防止滥用JavaScript"不管你想通过JavaScript改变哪个网页的行为,都必须三思而后行.首先要确认:为这个网页增加这种额外的行为是否确有必要?" 个人认为,作者的这句话放在当前几乎无处不用JavaScript来增强Web页面交互体验的时代,可以理解为应该适当的使用JavaScript,而不要因为使用了实现酷炫效果的脚本导致网页加载缓慢或者兼容性极差而舍本求末,导致用户无法浏览和使用网站. 2.平稳退化平稳退化是指当用户禁用浏览器JavaScript或浏览器不支持Java

  • 《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库

    改变图片的src属性的两种方式: 1,setAttribute方法是"第1级DOM"的组成部分,它可以设置元素节点的任意属性. 2,element.src = source;这是在"第1级DOM"出现之前的方法,现在也有效. "第1级DOM"的优势是可移植性好,那些老方法只适用于Web文档,DOM则适用于任何一种标记语言. 事件处理函数 当点击某个链接时,我希望留在这个网页面而不是转到另一个窗口,代码如下: 复制代码 代码如下: <a hr

  • 《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法

    注释         单行注释:// 多行注释:/* */ "<!--"可以用作单行注释,由于和HTML的"<!--  -->"多行注释类似,容易混淆,所以不建议这种注释方法 变量        在JavaScript 语言里,变量和其他语法元素的名字都是区分字母大小写的.名字mood的变量与名字是Mood.MOOD或mOOd的变量没有任何关系,它们不是同一个变量. JavaScript 语法不允许变量名中包含空格或标点符号("$&quo

  • 《JavaScript DOM 编程艺术》读书笔记之DOM基础

    DOM              DOM:文档对象模型: 节点 元素节点:DOM的原子是元素节点.<body>.<p>.<ul>之类的元素.元素可以包含其他的元素.没有被包含在其他元素里的唯一元素是<html>元素 文本节点:在XHTML文档里,文本节点总是被包含在元素节点的内部. 属性节点:属性节点用来对元素做出更具体的描述.例如,几乎每个元素都有一个title属性,而我们可以利用这个属性对包含在元素里的东西作出准确的描述: <p title=&qu

  • 高性能JavaScript DOM编程（1）

    我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵.有个贴切的比喻,把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之间用收费桥梁连接,ECMAScript每次访问DOM,都要途径这座桥,并交纳"过桥费",访问DOM的次数越多,费用也就越高.因此,推荐的做法是尽量减少过桥的次数,努力待在ECMAScript岛上.我们不可能不用DOM的接口,那么,怎样才能提高程序的效率? 1.DOM访问与修改 访问DOM元素是

  • javascript异步编程代码书写规范Promise学习笔记

    最近工作轻松了点,想起了以前总是看到的一个单词promise,于是耐心下来学习了一下. 一:Promise是什么?为什么会有这个东西? 首先说明,Promise是为了解决javascript异步编程时候代码书写的方式产生的. 随着javascript的发展,异步的场景越来越多.前端有AJAX,setTimeout等,后端Node异步更多.按照传统的做法,那么就是各种回调嵌回调.代码可以把人绕晕. 这个时候,CommonJS社区提出了一个叫做Promise/A+的规范,这个规范定义了如何书写异步代

  • JavaScript 权威指南(第四版) 读书笔记

    Javascript是无类型.解释型语言 对大小写敏感 html对大小写不敏感 忽略空格符.制表符.换行符(关键字.变量.正则表达式 除外) ";"分号可选择 //单行注释 /*多行注释*/ 标示符 开头必须是字母.下划线.$符号 关键字: break delete function return typeof case do if switch var catch else in this void continue false instanceof throw while debu

随机推荐