最好的网站优化公司,母了猜猜看游戏做网站,东莞市建设局质量监督网站,广州建设厅网站首页过去的错误
不要怪罪JavaScript
游览器遇到不合法的html会想尽办法将他展现出来游览器遇到不合法的js将拒绝执行它们并报错写js要保障自己代码的健壮性
质疑一切
写js功能前一定要考虑这个功能的合理性#xff0c;避免造成不可预见的后果写js功能前一定要考虑用户的游览器…过去的错误
不要怪罪JavaScript
游览器遇到不合法的html会想尽办法将他展现出来游览器遇到不合法的js将拒绝执行它们并报错写js要保障自己代码的健壮性
质疑一切
写js功能前一定要考虑这个功能的合理性避免造成不可预见的后果写js功能前一定要考虑用户的游览器是否支持js已经用户是否禁用游览器增强代码健壮性 平稳退化
可以让访问者在他们的浏览器不支持JavaScript的情况下仍能顺利地浏览你的网站。这就是所谓的平稳退化
“javascript:”伪协议
“真”协议用来在因特网上的计算机之间传输数据包如HTTP协议http://、FTP协议ftp://等伪协议则是一种非标准化的协议。“javascript:”伪协议让我们通过一个链接来调用JavaScript函数。在支持它的游览器中链接能够正常打开不支持它的游览器则会什么有不做。 总之在HTML文档里通过“javascript:”伪协议调用JavaScript代码的做法非常不好。 // 打开新的连接一个参数为链接第二个参数为方式(_self_blank)第三个参数为视口配置
window.open(https://www.baidu.com/,_blank,width100,height300)内嵌的事件处理函数
点击事件
button onclickopen_win()点我/button例子
此段代码当用户禁用掉js后页面就没办法正常跳转
// href#表示创建一个空链接return false表示阻止触发href
a href# onclickopen_win();return false跳转/ascriptfunction open_win(){window.open(https://www.baidu.com,_blank,width100,height300)}open
/script设置href。由于禁掉了js所以onclick不会触发
a hrefhttps://www.baidu.com onclickopen_win();return false跳转/a向CSS学习
结构与样式的分离
我们经常会遇到一些几乎每个元素都带有style属性的Web文档而这是CSS技术最缺乏效率的用法之一。真正能从CSS技术获益的方法是把样式全部转移到外部文件中去。按这种原则使用JavaScript时我们可以从CSS身上借鉴到很多东西。
渐进增强
所谓“渐进增强”就是用一些额外的信息层去包裹原始数据。按照“渐进增强”原则创建出来的网页几乎如果不是“全部”的话都符合“平稳退化”原则。类似于CSS, JavaScript和DOM提供的所有功能也应该构成一个额外的指令层。CSS代码负责提供关于“表示”的信息JavaScript代码负责提供关于“行为”的信息。行为层的应用方式与表示层一样。把CSS代码从HTML文档里分离出来可以让CSS工作得最好。这个适用于CSS表示层的结论同样适用于JavaScript行为层。 分离JavaScript
类似于使用style属性在HTML文档里使用诸如onclick之类的属性也是一种既没有效率又容易引发问题的做法。
a hrefhttps://www.baidu.com onclickopen_win();return false跳转/a解决方式1放在head标签中不过js文件要等待游览器html元素加载完成后执行
head...script src./index.js/script
head// index.js
// 需要等页面加载完成后执行操作
window.onload function() {// 获取domconst targetdocument.getElementById(target_a);// 获取dom中的hrefconst hreftarget.getAttribute(href);// 绑定事件回调target.onclickopen_winfunction open_win(){window.open(href,_self);}
}解决方式2放在html元素后一般放在body最后位置。让游览器优先加载html元素
a hrefhttps://www.baidu.com idtarget_a跳转/ascript src./index.js/scriptconst target document.getElementById(target_a);
const href target.getAttribute(href);target.onclick open_winfunction open_win() {window.open(href, _self);
}向后兼容
对象检测
为了保障代码的健壮性我们可以在调用某个dom方法前判断游览器是否支持
function open_win() {if(!document.getElementById)return;...
}性能考虑
尽量少访问DOM和尽量减少标记
不管什么时候只要是查询DOM中的某些元素浏览器都会搜索整个DOM树从中查找可能匹配的元素
function fn(){if(document.getElementsByClassName(a).length0){let allsdocument.getElementsByClassName(a);allsArray.from(alls);alls.forEach((item){console.log(item);})}
}上述代码中对dom树搜索了两次这是及其不合理的可以搜索的结果存储在一个变量中来优化性能
function fn(){const allsdocument.getElementsByClassName(a)if(alls.length0){allsArray.from(alls);alls.forEach((item){console.log(item);})}
}在比较复杂的项目中可以吧dom搜索的结果存储在全局变量中方便维护减少性能消耗
合并和放置脚本
下述做法是不推荐的因为会增加游览器的请求次数最好的做法是把他们在一个js文件中加载然后引入html中 在下载js期间浏览器不会下载其他任何文件即使是来自不同域名的文件也不会下载所有其他资源都要等js加载完毕后才能下载。所以js放在body最后可以加快游览器的加载速度
压缩脚本
所谓压缩脚本指的是把脚本文件中不必要的字节如空格和注释统统删除从而达到“压缩”文件的目的。下面是几个压缩代码的工具
http://www.crockford.com/javascript/jsmin.htmlhttp://developer.yahoo.com/yui/compressorhttp://closure-compiler.appspot.com/home
