Javascript代码如何优化

平稳退化

  1. 如果正确使用了JavaScript脚本,就可以让访问者在他们的浏览器不支持的情况下仍能顺利地浏览你的网站。
  2. 如果网页上的某个链接将弹出新窗口,最后在这个链接本身的文字中予以说明。
  3. Javascript使用window对象的open()方法创建新的浏览器窗口,这个方法有三个可选参数:window.open(url, name, features)
    (1)url:在新窗口里打开的网页的URL地址,如果省略,屏幕上将弹出一个空白的浏览器窗口。
    (2)name:新窗口的名字,可以在代码里通过这个名字与新窗口进行通信。
    (3)features:以逗号分隔的字符串,其内容是新窗口的各种属性。这些属性包括新窗口的尺寸(宽度和高度)以及新窗口被启用或禁用的各种浏览功能(工具条、菜单条、初始显示位置,等等)。对于这个参数应该遵循以下原则:新窗口的浏览功能要少而精。
    (4)open()方法对文档的内容无影响,只与浏览环境有关。
function popUp(winUrl) {
    window.open(winUrl, "popup", "width = 320, hight = 480");
}//打开一个320像素宽,480像素高的新窗口"popup"
  1. "javascript:"伪协议,通过一个链接来调用JavaScript函数(支持这种伪协议但禁用了JavaScript功能的浏览器会什么也不做)
<a href = "javascript:popUp('http://www.example.com/');">Example</a>
  1. 内嵌的事件处理函数
<a href = "#" onclick = "popUp('http://www.example.com/');return false;">Example</a> // href属性值设置为"#"是为了创建6一个空链接,实际工作全部由onclick负责完成(如果用户禁用了JavaScript功能,这样的链接将毫无用户)
  1. href属性值设置为真实的url
    Example

分离JavaScript

  1. 可以用getElementById把一个事件添加到某个特定id属性的元素上,getElementById(id).event = action
  2. 如果涉及到多个元素,可以用getElementByTagName 和getAttribute把事件添加到有特定属性的一组元素上
window.onload = prepareLinks;//把函数添加到window对象的onload事件上
function prepareLinks() {
    var links = document.getElementsByTagName("a");//把文档里的所有连接全放入一个数组里
    for(var i = 0; i < links.length; i++){//遍历数组
        if(links[i].getAttribute("class") == "popup"){//如果某个链接的class属性等于popup,就表示这个链接被点击时应该调用popUp()函数
            links[i].onclick = function () {//把这个链接的href属性值传给popUp()函数
                popUp(this.getAttribute("href"));
                return false//取消这个链接的默认行为,不让这个链接把访问者带离当前窗口
            }
        }
    }
}
function popUp(winUrl) {
    window.open(winUrl, "popup", "width=320, height=480");
}

向后兼容

  1. 对象检测,只要把某个方法打包在一个if语句里,就可以根据这条if语句的条件表达式的求值结果时true还是false来决定应该采取怎样的行动。
window.onload = function () {
    if(!document.getElementsByTagName) return false; //检查浏览器是否支持这个方法
    var links = document.getElementsByTagName("a");
    for(var i = 0; i < links.length; i++){
        if(links[i].getAttribute("class") == "popup"){
            links[i].onclick = function () {
                popUp(this.getAttribute("href"));
                return false
            }
        }
    }
}

性能考虑

  1. 尽量少访问DOM和尽量减少标记
  2. 合并和放置脚本
  3. 压缩脚本,把脚本文件中不必要的字节删除,如空格和注释
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

超长待机。

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值