JavaScript Dom编程艺术 小记

花了大概一个星期的时间看完了这本《JavaScript Dom编程艺术》,据说是前端入门必看的图书,写的还算是不错,语言活泼,讲解循序渐进,很容易跟着读者的思路走。

平稳退化
如果正确使用了JavaScript脚本,就可以让访问者在他们的浏览器不支持JavaScript的情况下仍能顺利地浏览你的网站,这就是所谓平稳退化,就是说虽然某些功能无法使用,但最基本的操作还是能顺利完成。
作者在本书中的很多例子中都贯穿了平稳退化这个概念并加以实践,算是给自己编写的js代码预留退路。
或许禁用javascript的用户已经非常少见。但假如用户是个searchbot(搜索机器人),即各大搜索引擎都会有的自动化程序,只有极少数能理解javascript代码。所以,如果你的javascript网页无法平稳退化,它在搜索引擎上的排名可能就大受损害。
举个例子

function popUp(wimURL){
	window.open(winURL,"popup","width=320,height=480")
}

这个js函数打开一个宽为320,高为480的新窗口“popup”。当js功能被禁用无法使用

<a href="http://www.example.com/" onclick="popUp(this.href);return false;">Example </a>

虽然javascript已经被禁用(或遇到了搜索机),这个链接也是可用的。虽然在功能上打了点折扣(因为没有打开一个新的窗口),但它并没有彻底失败。这是一个经典的平稳退化例子。

向后兼容
不同的浏览器对javascript的支持程度不一样,古老的浏览器可能无法理解dom提供的方法和属性。
①对象检测
检测浏览器对javascript的支持程度

function myFunction(){
	if(document.getElementById){
		statements using getElementById;
	}
}

如果需要检测多个方法或属性是否存在

if(!document.getElementById||!document.getElementByTagName)return false;

②浏览器探测技术
通过javascript代码检索关于浏览器品牌和版本的信息,可以改善代码的向后兼容性,但是是风险非常大的技术。

性能考虑
①尽量少访问dom盒尽量减少标记
只要是查询dom中的个某些元素,浏览器都会搜索整个dom树,从中查找可能匹配的元素。可以通过吧搜索结果保存在一个全局变量里,或者把一组元素直接以参数的形式传递给函数。
过多的标记元素也会增加dom树的规模,今儿增加遍历dom树查找特定元素的时间。
②合并和放置脚本
当有多个js’文件时,建议合并到一个脚本文件中,这样就可以减少加载页面时发送的请求数量。
脚本在标记中的位置对页面的初次加载也有很大影响,建议放置在前。
③压缩脚本
代码压缩工具,将js文件压缩成min.js,大幅减少文件大小。

猜你喜欢

转载自blog.csdn.net/weixin_43721741/article/details/88214401