杰拉斯的博客

纯CSS无表达式实现图片等比缩放(支持IE7及以上)

杰拉斯 杰拉斯 | 时间:2013-02-27, Wed | 29,322 views
前端开发 

在制作网页的时候,常常会遇到一种情况,我们需要把一些未知尺寸的图片放在一个固定宽高的容器中,这时候我们需要考虑这样的问题:

  1. 只给图片设置宽度或高度的其中一项可以实现图片等比缩放,但图片可能超出容器大小。
  2. 给图片设置固定的宽高可能导致图片变形。

有些人可能会简单地用JavaScript解决:

<img src="image-url.png" onload="if(this.width > 100){this.width = 100;}if(this.height > 100){this.height = 100;}" />

(阅读全文…)

[转载]当你输入一个网址的时候,实际会发生什么?

杰拉斯 杰拉斯 | 时间:2013-02-26, Tue | 28,523 views
后台技术 

作为一个软件开发者,你一定会对网络应用如何工作有一个完整的层次化的认知,同样这里也包括这些应用所用到的技术:像浏览器,HTTP,HTML,网络服务器,需求处理等等。

本文将更深入的研究当你输入一个网址的时候,后台到底发生了一件件什么样的事~

(阅读全文…)

Yahoo!网站性能最佳体验的34条黄金守则——图片、Coockie与移动应用

杰拉斯 杰拉斯 | 时间:2013-02-25, Mon | 10,144 views
前端开发 

我们在前面的几节中分别讲了提高网站性能内容服务器JavaScript和CSS等方面的内容。除此之外,图片和Coockie也是我们网站中几乎不可缺少组成部分,此外随着移动设备的流行,对于移动应用的优化也十分重要。这主要包括:

Coockie:

  1. 减小Cookie体积
  2. 对于页面内容使用无coockie域名

图片:

  1. 优化图像
  2. 优化CSS Spirite
  3. 不要在HTML中缩放图像
  4. favicon.ico要小而且可缓存

移动应用:

  1. 保持单个内容小于25K
  2. 打包组件成复合文本

(阅读全文…)

Yahoo!网站性能最佳体验的34条黄金守则——JavaScript和CSS

杰拉斯 杰拉斯 | 时间:2013-02-24, Sun | 22,375 views
前端开发 

第一部分和第二部分中我们分别介绍了改善网站性能页面内容服务器的几条守则,除此之外,JavaScriptCSS也是我们页面中经常用到的内容,对它们的优化也提高网站性能的重要方面:

CSS:

  1. 把样式表置于顶部
  2. 避免使用CSS表达式(Expression)
  3. 使用外部JavaScript和CSS
  4. 削减JavaScript和CSS
  5. 用<link>代替@import
  6. 避免使用滤镜

JavaScript

  1. 把脚本置于页面底部
  2. 使用外部JavaScript和CSS
  3. 削减JavaScript和CSS
  4. 剔除重复脚本
  5. 减少DOM访问
  6. 开发智能事件处理程序

(阅读全文…)

Yahoo!网站性能最佳体验的34条黄金守则——服务器

杰拉斯 杰拉斯 | 时间:2013-02-23, Sat | 20,978 views
前端开发 

在本系列的第一节中,讲了提高网站性能中网站“内容”有关的10条原则。除了在网站在内容上的改进外,在网站服务器端上也有需要注意和改进的地方:

服务器部分

  1. 使用内容分发网络
  2. 为文件头指定Expires或Cache-Control
  3. Gzip压缩文件内容
  4. 配置ETag
  5. 尽早刷新输出缓冲
  6. 使用GET来完成AJAX请求

(阅读全文…)