YAOHAIXIAO.COM

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

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

Rss

Home » Page 3

前端性能优化:Avoid CSS @import

前面我们把 YSlow 中的前端性能优化规则都介绍了一遍,今天我们要介绍的是 Google 开发的 PageSpeed 前端性能分析工具的前端性能优化规则。今天介绍 PageSpeed 的前端性能优化规则是:Avoid CSS @import(避免在 CSS 中使用 @import)。 @import 简介 Using CSS @import in an external stylesheet can add additional delays during the loading of a web page. 在一个外部 CSS 文件中,使用 CSS @import 可以延迟加载一个外部CSS文件。 这个不是很酷吗?延迟加载哦!但… [阅读全文]

前端性能优化:Make favicon small and cacheable

今天要介绍的最后一个YSlow前端性能优化规则是:Make favicon small and cacheable(让 Favicon 文件尽量的小且缓存它)。 favicon.ico 是什么? YSlow 文档简单的介绍了一下: The favicon.ico is an image that stays in the root of your server. favicon.ico是放置在网站服务器根目录下的一个图片文件,它通常都是网站的16X16像素的LOGO图案。在浏览器其中显示的位置是这里: 在我们打开网站的时候,favicon.ico 就是一个特别醒目的站点标识,当我们将网站收藏起来的时候,这个图片就会在搜藏栏(书签栏)… [阅读全文]

前端性能优化:Do not scale images in HTML

今天要介绍的YSlow前端性能优化规则是:Don’t Scale Images in HTML(在HTML代码中不要缩放图片)。 Don’t Scale Images in HTML YSlow 文档对这个规则的介绍非常的简短: Don’t use a bigger image than you need just because you can set the width and height in HTML. If you need <img width=”100″ height=”100″ src=”mycat.jpg” alt=”My Cat” /> then your ima… [阅读全文]

前端性能优化:Avoid AlphaImageLoader filter

今天要介绍的YSlow前端性能优化规则是:Avoid AlphaImageLoader filter(避免是使用 AlphaImageLoader 滤镜)。 AlphaImageLoader 滤镜是做什么的 可能有些接触前端不太久的朋友还不知道 AlphaImageLoader 滤镜是做什么的, AlphaImageLoader 是IE中浏览器中特有一个CSS滤镜,可以处理IE6浏览器中图处理PNG图片的透明底色的问题。这个属性在《pngfix.js IE7 以下浏览器中处理 PNG 图片背景透明的解决方案》一文中有介绍过: filter:progid:DXImageTransform.Microsoft.AlphaImageLoa… [阅读全文]

前端性能优化:Use Cookie-free Domains for Components

今天要介绍的YSlow前端性能优化规则是:Use Cookie-free Domains for Components(使用Cookie自由的域名存储静态组件)。 Cookie-free Domains 的作用 前面介绍《Reduce Cookie Size》规则时,我们知道页面中的左右静态组件都会在Header包信息中包含Cookie信息。而这些Cookie信息基本上都不用,所以这些Cookie只能够带来额外的流量,减慢页面的加载响应时间。为了解决这个问题,我们就需要使用子域名或者其他域名(空间)来存储这些静态组件。这里的子域名和其它域名就是所谓的 Cookie-free Domains。 来看看YSlow的文档是怎么说的吧: W… [阅读全文]

前端性能优化:Reduce Cookie Size

今天要介绍的YSlow前端性能优化规则是:Reduce Cookie Size(减少Cookie的大小)。 Cookie 简介 由于这里不是科普Cookie的教程,这里只对Cookie做一个非常简单的介绍(想进一步了解Cookie可以查看PPK网站上关于Cookie的文章)。由于HTTP协议是无状态协议,无法记录已经访问的页面的数据的状态。随着Web技术的发展,大家意识到需要使用一种方法让浏览器能够“记住”一些信息,于是便有了Cookie。HTTP Cookie 可以用于各种原因,如身份验证和个性化。YSlow文档对Cookie的介绍十分的简单: HTTP cookies are used for a variety of reas… [阅读全文]

前端性能优化:Avoid HTTP 404 (Not Found) error

今天要介绍的YSlow前端性能优化规则是:Avoid HTTP 404 (Not Found) error(避免404错误)。 404 (Not Found) error 带来的性能问题 HTTP requests are expensive so making an HTTP request and getting a useless response (i.e. 404 Not Found) is totally unnecessary and will slow down the user experience without any benefit. YSlow的文章翻译过来就是,HTTP 请求(性能消耗)是昂贵的,所以请求… [阅读全文]

前端性能优化: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. 页面中… [阅读全文]

前端性能优化:Use GET for AJAX Requests

今天要介绍的YSlow前端性能优化规则是:Use GET for AJAX Requests(使用GET方式发送Ajax请求)。 为什么建议使用GET请求 YSlow的文档是这么说明的: The Yahoo! Mail team found that when using XMLHttpRequest, POST is implemented in the browsers as a two-step process: sending the headers first, then sending data. So it’s best to use GET, which only takes one TCP packet… [阅读全文]

前端性能优化:Make AJAX cacheable

今天要介绍的YSlow前端性能优化规则是:Make AJAX cacheable(使Ajax可缓存)。 《High Performace Web Sites》 一书和 YSlow 关于 Make Ajax cacheable 的说明基本上是一样的,Make Ajax cacheable 其实就是要求对Ajax请求的内容做缓存,更直白一些,就是给这些请求(文件)添加 Expires headers。至于具体的添加缓存的处理方式,请大家参阅《前端性能优化:Add Expires headers》。既然就是 Add Expires header,那何必要单独作为一条规则呢?Steve 的说法是这样的: 我建立一条新的规则(指 Make A… [阅读全文]

Toggle side bar