YAOHAIXIAO.COM

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

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

Rss

Home » Posts tagged "Frontend"

YSlow – 前端性能分析和优化的利器

YSlow – 前端性能分析和优化的利器

YSlow(为什么慢?) 是 YAHOO 开发的一款分析网页前端性能的浏览器插件,我非常喜欢一个开发插件,相信也是很多从事前端开发的朋友必备的一款插件了。不过对于刚接触前端开发的朋友来说,可能还不太熟悉,本文就详细的介绍一下 YSlow。(本文以 Firefox 浏览器为例讲解) YSlow 的安装和启动 安装 YSlow 要先安装 Firebug,然后到 YSlow 官网 下载 Firefox 版本的 YSlow(目前 YSlow 有四个版本可供选择:火狐(Firefox)浏览器、谷歌(Chrome)浏览器、欧朋(Opera)浏览器和移动版)。 下载安装完成后会需要你重新启动 Firefox 浏览器,之后就会在状态栏上显示 YSl… [阅读全文]

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

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

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

DropDown Menu – jQuery 多级下拉菜单插件

DropDown Menu – jQuery 多级下拉菜单插件

程序简介: DropDown Menu – jQuery 多级下拉菜单插件是用 jQuery 开发的,为 WordPress 自定义导航菜单添加多级下拉菜单支持的十分轻量级的 JavaScript 脚本程序。 $(‘#top-navigation’).dropMenu(); 下载地址:dropmenu.zip 程序特点: 支持无限极的下拉菜单显示 支持 Tab 键切换显示 浏览器兼容性好 程序 JavaScript 源代码: /** * @author Yaohaixiao */ (function($){ $.fn.extend({ dropMenu: function(menuItem, subMenuItem){ … [阅读全文]

CSS Expression

CSS Expression

网友 Huugle 在《CSS 实用技巧 — 利用 Position 定位,让 DIV 元素在浏览器窗口居中》评论说 IE6 中可以使用 CSS Expression 来处理固定定位问题。所以这里我在整理一些关于 CSS Expression 的资料。 CSS Expression 简介 CSS Expression,动态 CSS 属性。IE 私有,自 IE 5.0 开始引入(IE8 将不再支持),详细参考MSDN。 CSS Expression 用来把 CSS 属性和 Javascript 表达式关联起来,这里的 CSS 属性可以是 CSS 元素固有的属性,也可以是自定义属性。就是说 CSS 属性后面可以是一段 Javascrip… [阅读全文]

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

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

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

CSS 实用技巧 — 利用 Position 定位,让 DIV 元素在浏览器窗口居中

CSS 实用技巧 — 利用 Position 定位,让 DIV 元素在浏览器窗口居中

我们经常可以看到类似的 JavaScript 弹出层效果,JavaScript 模拟的弹出窗口可以正好做到在浏览器窗口的中心显示。那么这种效果是如何使用 CSS 来实现的呢? 其实,实现这个效果并不复杂,利用 CSS 中的 position 定位就可以轻松搞定了。来看看代码吧: <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>CSS Position 定位实现 DIV 在窗口居中</title> <meta name=”keywords” content=”CSS Position 定… [阅读全文]

-webkit-text-size-adjust: none; 解决 Chrome 浏览器中设置小于 12px 的字体大小问题

-webkit-text-size-adjust: none; 解决 Chrome 浏览器中设置小于 12px 的字体大小问题

不知道说是 Chrome 智能呢?还是说它多此一举?Chrome 浏览器中存在默认会自动将小于 11px 大小的字体调整为 12px。我在写 BlueNight 主题的最新评论时候就设置了评论发布时间为 11px ,无意中有再次发现 Chrome 的这个字体显示问题(最早还是在阿里国际站的时候第一次遇到这个问题)。看看这样的代码: .date-small { font-size: 11px; } .date-normal { font-size: 12px; } 用 Chrome 浏览器打开,你会发现两个 CSS 产生的显示结果是一样的,11px 自动变为了 12px。一般情况下,字体大 1px 没有多大影响,但是像 BlueNig… [阅读全文]

HTML 4.01 / XHTML 1.0 参考手册

HTML 4.01 / XHTML 1.0 参考手册

在我面试过的应聘前端工程师的一些应届毕业生中,很多人都不知道写HTML代码最重要的是语义化,真的让我很无语。这里将w3school.com.cn的XHTML1.0的参考手册完整的整理出来,希望准前端工程师们能牢记这些XHTML的语义和属性的意义。至于怎么才算一个结构化(充分语义化)的XHTML页面,则请参考《WEB前端开发经验总结–XHTML语义化》。 按功能类别排列 DTD:指示在哪种 XHTML 1.0 DTD 中允许该标签。S=Strict, T=Transitional, F=Frameset. 标签 描述 DTD <!DOCTYPE>  定义文档类型。 STF <html> 定义 HTML… [阅读全文]

CSS学习经验总结 – CSS 性能优化

CSS学习经验总结 – CSS 性能优化

关于CSS性能这个问题,接触前端开发时间长一些的朋友我想大家或多或少会有所了解。我记得我第一次看到关于CSS性能方面的问题,是看YUI Theater 中 Steve Souders 的演讲 《High Performance Web Sites 14 Rules for Faster Page》 (视频下载地址:souders-performance.m4v)才知道 CSS 书写也要注意性能问题。 CSS 的解析顺序 根据 Steve Souders 的研究,浏览器解析 CSS 的顺序是从右向左的。举个例子: #navigation .menu li.current a:link { background-color: #fff;… [阅读全文]

jDialog – jQuery 简易对话框插件

jDialog – jQuery 简易对话框插件

程序简介: jDialog – jQuery 简易对话框插件是用jQuery写的一个模拟系统弹出提示对话框的小程序。我们平时在用户操作提示的时候会时常用到这个小程序。用来调试Ajax的程序,这个小程序也是比较好的选择。避免了alert阻断JavaScript运行。 普通提示信息窗口 $(‘#lnk-msg’).click(function(evt){ $(‘#dialog-zone’).msg({ winId: ‘window-msg-dialog’, isFixed: false, tltTxt: ‘提示消息’, cntHTML: ‘这是一个普通的弹出窗口对话框’ }); // 阻止冒泡和默认行为事件 evt.prev… [阅读全文]