YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Posts tagged "DOM"

前端性能优化:Reduce the Number of DOM Elements

今天要介绍的YSlow前端性能优化规则是:Reduce the Number of DOM Elements(减少页面中DOM节点的数量)。 DOM Elements 过多带来的问题 A complex page means more bytes to download and it also means slower DOM access in JavaScript. It makes a difference if you loop through 500 or 5000 DOM elements on the page when you want to add an event handler for example. 页面中… [阅读全文]

Event Delegation in JavaScript

Event Delegation in JavaScript

Event Delegation 是我很久前就想写的一个话题。Event Delegation 是一个非常高效的事件处理模式,相信做过一段时间前端开发的朋友也都对 Event Delegation 有所耳闻。 什么是 Event Delegation? 直接翻译 Event Delegation 可以翻译为事件代理(委托),那到底什么是 Event Delegation 呢? 我的理解, Event Delegation 应该是利用 JavaScript 中的 Event bubbling (事件冒泡) 机制,通过给单个 DOM (父)节点绑定事件,从而可以管理这个节点下所有子节点的事件处理(Deligage(代理活委托)就是指的所… [阅读全文]

JavaScript动态创建的Link标签插入到 head 的最前面会怎么样?

JavaScript动态创建的Link标签插入到 head 的最前面会怎么样?

由于本人还是蓝色理想论坛前端的实习版主,所以也把文章《如何用JavaScript动态创建link标签到head里》发到了论坛里(由于我的一个乌龙,1年前测试的时候,发现过IE6直接插入head有问题)有个叫sicoolqs朋友认为我的处理方式(当时还做了浏览器的探测)过于的复杂了,给出了更加简洁的处理方案: var head = document.getElementsByTagName(“head”)[0]; var link = document.createElement(“link”); link.setAttribute(“href”,”xxx.css”); link.setAttribute(“rel”,”stylesh… [阅读全文]

为什么要用JavaScript 动态创建样式表link标签?

为什么要用JavaScript 动态创建样式表link标签?

我前面的文章《如何用JavaScript动态创建link标签到head里》只是一笔带过,发现论坛里有朋友问到了这个问题,我这里就花些篇幅来解释一下。为什么要用JavaScript 动态创建样式表标签?为什么不直接用JavaScript来修改样式? 简单的说,这么做有3个目的: 为了提高页面的加载速度。只在需要的时候才加载相应的样式,减少页面初次加载时(CSS样式)的数据量,从而提交页面的加载数度。 为了提高代码的可维护性和稳定性。将CSS代码和JavaScript代码分离,是我们前端开发一直推荐的编码规范之一。将CSS和JavaScript写在一起,代码的可维护性和稳定性都会受到影响。 为了提高JavaScript代码的性能。通过给… [阅读全文]

JavaScript 如何判断 CSS 文件加载完毕

JavaScript 如何判断 CSS 文件加载完毕

之前我写过《如何用JavaScript动态创建link标签到head里》,今天接着这个话题说下去,说说 JavaScript 如何判断 CSS 文件记载完毕。呵呵,今天的话题应该算是上个话题的姊妹篇。我们动态创建的CSS文件,如何知道添加的CSS文件加载完毕了呢? 要判断这个 CSS 文件是否加载完毕,各个浏览器的做法差异比较大,这次要说IE浏览器做的不错,我们可以直接通过onload方法来处理CSS加载完成以后的处理: // 代码节选至seajs function styleOnload(node, callback) { // for IE6-9 and Opera if (node.attachEvent) { node.at… [阅读全文]

如何用JavaScript动态创建link标签到head里

如何用JavaScript动态创建link标签到head里

我想应该有不少做前端的朋友碰到过需要用 JavaScript 动态创建样式表标签——link标签。这次我就说说如何在浏览器中动态创建link标签。 演示地址:http://www.yaohaixiao.com/scripts/js-create-link-tag.html 使用 jQuery 创建 link 标签 如果你开发中喜欢用jQuery,那么用jQuery在创建link标签应该是这样的: var cssURL = ‘http://www.yaohaixiao.com/wp-content/themes/BlueNight/style.css’, linkTag = $(‘<link href=”‘ + cssURL +… [阅读全文]

简单的无障碍阅读辅助工具栏

简单的无障碍阅读辅助工具栏

去年用JavaScript写的一个无障碍阅读辅助工具栏的效果,把代码整理了一下,拿了新浪的首页做测试页,效果还算是实用,这里的演示效果是拿新浪的首页测试的,看看吧! 演示地址:http://www.yaohaixiao.com/scripts/webaccess/ 下载地址:webaccess.rar 虽然不是真正意义上的无障碍阅读,不过看上去还是挺唬人的。在JS的注释里,我都把效果的实现原理解释了一下。当然,还有也性能问题要解决,也希望感情趣的朋友一起来改善。看看实现的代码吧: CSS 代码 #web-access-toolbar { position: fixed; _position: absolute; z-index: 1… [阅读全文]

JavaScript 实例教程 – jQuery 实现返回顶部效果

JavaScript 实例教程 – jQuery 实现返回顶部效果

Back to Top – 目前很多网站都使用的一个实用的效果,在页面内容比较长的页面时,用户浏览内容(窗口滚动条)到一定位置时,在内容主题部分的右边会有一个“返回顶部”的按钮,用户点击这个窗口就自动滚动到页面顶端。这个交互设计对提高用户的浏览体验确实有帮助,那么怎么实现呢?今天我就来讲讲如何实现这个效果。 返回顶部按钮的 XHTML 代码 示例1:Back to Top Downloads:backtop.zip 我们看到效果图,返回顶部按钮是显示在主体内容的外边。不过显示在外面,并不代表这个按钮的代码在内容之外,而实际上它应该写在主体内容页脚(footer)里面的: <div class=”wrap foote… [阅读全文]

浅谈Javascript中的事件流和事件绑定

浅谈Javascript中的事件流和事件绑定

JavaScript 中的事件流 浏览器中的事件流意味着页面上可有不仅一个,甚至多个元素响应同一个事件。而这一个或多个元素响应事件发生的先后顺序在各个浏览器(主要针对IE和Netscape)上是不同的。 冒泡型事件(Dubbed Bubbling) IE上的解决方案就是冒泡型事件(Dubbed Bubbling)。冒泡型事件的基本思想是,事件按照从最特定的事件目标到最不特定的事件目标(DOCUMENT 对象)的顺序触发。 示例(1)冒泡型事件:冒泡型事件流(请用 IE 浏览器打开) <span id=”cnt0″> <a href=”#1″ id=”link0″>点击我触发冒泡型事件流</a> &… [阅读全文]

JavaScript DOM编程实例教程 – 垂直无缝滚动图片

JavaScript DOM编程实例教程 – 垂直无缝滚动图片

垂直无缝滚动图片的效果是一个经常用到的效果,今天我就来跟大家实例讲解一下这个效果的实现原理,首先我们看看演示效果: 演示地址:http://www.yaohaixiao.com/scripts/scrollnews/ 下载地址:http://www.yaohaixiao.com/downloads/scrollnews.rar 在讲原理之前,我先把代码贴出来,JavaScript代码如下: // scrollver.js // 代码来源:yahoo.com.cn scrollVertical.prototype.scrollArea=null; // 滚动的区域 scrollVertical.prototype.scrollMsg=… [阅读全文]