代码改变世界

随笔分类 - CSS&HTML

【原】很土的在博客园实现了:前一篇、后一篇

2009-03-15 00:10 by 拖鞋不脱, 2634 阅读, 收藏, 编辑
摘要: 所谓“前一篇”、“后一篇”,就是在一篇博客的结尾处显示在该篇博客之前和之后的博客标题和链接。因为博文一般都会有时间相关性,沿时间顺序阅读是一种很自然的做法。假设一个读者从搜索引擎根据某个关键字来到你的博客,看了你的一篇文章,然后被你的技术人格魅力深深折服,想要再做延伸阅读,相比在下面一堆广告中找“相关文章”、“所属分类的其他文章”,直接根据“前一篇”、“后一篇”要来的快捷的多,而且对于懒得在写完一系列文章之后还要做索引、目录的人来说,这也是比较省事的做法,因为一般同一系列的文章在时间上也是相连的。所以像新浪、CSDN等地方都有这样的贴心设计,可惜博客园这里没有…… 好在博客园这里有“自定义签名”、“页首代码”、“页尾代码”,javascript在这里也不是屏蔽字,那么,就自己动手,丰衣足食吧! 阅读全文

【原】HTML页面元素加载顺序研究报告(5)----Script标签在Firefox下对背景图片的影响

2009-03-02 21:28 by 拖鞋不脱, 2231 阅读, 收藏, 编辑
摘要: 在上一节中发现,背景图片似乎还有些需要研究的地方。 代码: 测试图片加载顺序 ... 阅读全文

【原】HTML页面元素加载顺序研究报告(4)----用JavaScript插入图片

2009-03-02 21:27 by 拖鞋不脱, 3279 阅读, 收藏, 编辑
摘要: 4.下面我们试试用Javascript插入图片 代码: 测试图片加载顺序 ... 阅读全文

【译】提高网站访问速度的34条军规

2009-02-24 00:45 by 拖鞋不脱, 11192 阅读, 收藏, 编辑
摘要: 这是雅虎上的一篇文章,最近正在研究提高网页响应速度和用户体验的方法,拿来翻译一下,加深理解。 原文:best practices for speeding up your web site 提高网站访问速度的34条军规 1-3 减少HTTP请求数量 ... 阅读全文

【译】提高网站访问速度的34条军规 31-34

2009-02-21 22:36 by 拖鞋不脱, 2189 阅读, 收藏, 编辑
摘要: 这是雅虎上的一篇文章,最近正在研究提高网页响应速度和用户体验的方法,拿来翻译一下,加深理解。 原文:Best Practices for Speeding Up Your Web Site 31 不要在HTML中缩放图片 Don't Scale Images in HTML tag:images 不要使用大小超过需要的图片,即使你能够在HTML中设置它的属性。如果你需要 那么就使用恰... 阅读全文

【译】提高网站访问速度的34条军规 26-30

2009-02-21 01:11 by 拖鞋不脱, 1808 阅读, 收藏, 编辑
摘要: 这是雅虎上的一篇文章,最近正在研究提高网页响应速度和用户体验的方法,拿来翻译一下,加深理解。 原文:Best Practices for Speeding Up Your Web Site 26 开发灵巧的事件处理程序 Develop Smart Event Handlers tag:javascript 如果有太多的事件处理逻辑部署在DOM树的不同元素上,它们的频繁执行会拖慢... 阅读全文

【译】提高网站访问速度的34条军规 20-25

2009-02-20 00:37 by 拖鞋不脱, 3063 阅读, 收藏, 编辑
摘要: 这是雅虎上的一篇文章,最近正在研究提高网页响应速度和用户体验的方法,拿来翻译一下,加深理解。 阅读全文

【译】提高网站访问速度的34条军规(18-19)

2008-09-11 20:48 by 拖鞋不脱, 1985 阅读, 收藏, 编辑
摘要: 这是雅虎上的一篇文章,最近正在研究提高网页响应速度和用户体验的方法,拿来翻译一下,加深理解。 原文:Best Practices for Speeding Up Your Web Site 18 预先加载组件 (Preload Components) tag:content 预加载看起来和后加载原则是个矛盾,但它其实是为了另外一个目的。预加载组件让你可以利用浏览器的空闲时间来... 阅读全文

【译】提高网站访问速度的34条军规(14-17)

2008-08-27 23:43 by 拖鞋不脱, 2004 阅读, 收藏, 编辑
摘要: 这是雅虎上的一篇文章,最近正在研究提高网页响应速度和用户体验的方法,拿来翻译一下,加深理解。 原文:Best Practices for Speeding Up Your Web Site 14 让Ajax可以缓存 (Make Ajax Cacheable) tag:content Ajax的好处之一是它能给用户提供瞬间的响应,因为它从服务端异步请求数据。但Ajax不能保... 阅读全文

【译】提高网站访问速度的34条军规(11-13)

2008-08-26 21:47 by 拖鞋不脱, 2255 阅读, 收藏, 编辑
摘要: 这是雅虎上的一篇文章,最近正在研究提高网页响应速度和用户体验的方法,拿来翻译一下,加深理解。 原文:Best Practices for Speeding Up Your Web Site 11 避免重定向 (Avoid Redirects) tag:content 重定向结束于301或302状态码。这里有一个301响应的HTTP头的例子: HTTP/1... 阅读全文

【译】提高网站访问速度的34条军规(7-10)

2008-08-25 23:47 by 拖鞋不脱, 2684 阅读, 收藏, 编辑
摘要: 这是雅虎上的一篇文章,最近正在研究提高网页响应速度和用户体验的方法,拿来翻译一下,加深理解。 原文:best practices for speeding up your web site 7 不使用CSS表达式 (Avoid CSS Expressions) tag:css CSS表达式是一种有力的(同时也很危险的)动态设置CSS属性的方法。从IE5开始支持CSS表达... 阅读全文

【原】HTML页面元素加载顺序研究报告(3)----Script标签与背景图片

2008-08-25 20:36 by 拖鞋不脱, 7022 阅读, 收藏, 编辑
摘要: 3、看下Javascript对图片加载顺序的影响 采用和之前类似的代码:Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h... 阅读全文

【译】提高网站访问速度的34条军规(4-6)

2008-08-24 15:52 by 拖鞋不脱, 3040 阅读, 收藏, 编辑
摘要: 这是雅虎上的一篇文章,最近正在研究提高网页响应速度和用户体验的方法,拿来翻译一下,加深理解。 原文:best practices for speeding up your web site 4 Gzip压缩组件(Gzip Components) tag:server 前台工程师的决策能够显著的减少在网络上传输HTTP请求和响应花费的时间。确实,终端用户的带宽速度、Internet服务提供商... 阅读全文

【译】提高网站访问速度的34条军规(1-3)

2008-08-23 23:48 by 拖鞋不脱, 5212 阅读, 收藏, 编辑
摘要: 这是雅虎上的一篇文章,最近正在研究提高网页响应速度和用户体验的方法,拿来翻译一下,加深理解。 原文:Best Practices for Speeding Up Your Web Site 1 减少HTTP请求数量 (Minimize HTTP Requests) tag:content 80%的用户响应时间被花费在前端,而这其中的绝大多数时间是用于下载页面中的图片、样式表、脚本以及Flas... 阅读全文

【原】HTML页面元素加载顺序研究报告(2)----背景图片

2008-08-21 11:00 by 拖鞋不脱, 5304 阅读, 收藏, 编辑
摘要: 2、接下来考察背景图片的加载: 一般来说,添加背景图片有三种办法: 直接写在标签的style里面,如: <div style="background-image:url('images/Css.JPG')"></div> 写在内联的style定义里面,如: <style> #cssContainer1 { background-image: url("images/Css3.JPG"); }</s... 阅读全文

【原】HTML页面元素加载顺序研究报告(1)----简单Div罗列

2008-08-20 17:10 by 拖鞋不脱, 7504 阅读, 收藏, 编辑
摘要: 一直没有意识到HTML页面的元素加载顺序有什么重要性,至多在操作DOM对象的时候注意把DOM对象写在脚本前面。 最近研究网站首页的优化,发现加载顺序确实有很多说道,对网页的加载速度,用户体验的好坏有较大的影响。索性做了几个测试页面,用HttpWatch和FireBug做了简单的研究。 页面加载,除了页面文件本身,其余加载的主要元素就是图片、Flash、Silverlight、多媒体、外嵌脚本和C... 阅读全文

【转】CSS hack & IE6下的浮动模型Bug

2008-08-15 13:13 by 拖鞋不脱, 985 阅读, 收藏, 编辑
摘要: 区别FF,IE7,IE6: background:orange;*background:green !important;*background:blue; 阅读全文