YAOHAIXIAO.COM

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

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

Rss

Home » Posts tagged "前端开发"

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

前端性能优化:Configure entity tags (ETags)

今天要介绍的YSlow的前端性能优化规则是 Configure entity tags (ETags)(配置(移除)实体标签)。 ETag 是什么? 实体标签(Entity Tag,ETag)是Web服务器和浏览器用于确认缓存组件的有效性的一种机制。ETag 在 HTTP 1.1 中开始引入。 ETag 和 Expires 的关系 ETag 既然是 Web服务器和浏览器用于确认缓存组件的有效性的一种机制,那么我们就不得不说一下ETag 和 Expires 的关系了。 前面《前端性能优化:Add Expires headers》中介绍过 Expires 头。我们可以通过在服务器端设置Expires 头,以便浏览器再次访问同一个页面组件… [阅读全文]

前端性能优化:Remove duplicate JavaScript and CSS

今天要介绍的YSlow的前端性能优化规则是 Remove duplicate JavaScript and CSS(移除重复的JavaScript和CSS)。 检查一下 没准你的网站就有重复的 JavaScript 和 CSS 出现重复的JavaScript 和 CSS 应该说并不是什么新鲜事情,不管公司大小,出现重复的代码的情况都时不时会发生的。仔细检查一下你的网站,没准就有重复的 JavaScript 和 CSS。 在阿里巴巴工作前,前端几乎都是我一个人维护,这个时候虽然脚本数量并不少,但是都是我个人经手,所以基本上没有遇到过同一页面中出现重复脚本的情况。但也有例外,有几次我要美工做HTML页面,她不熟悉JavaScript怎么… [阅读全文]

前端性能优化:Avoid Redirects

今天要介绍的YSlow的前端性能优化规则是 Avoid Redirects(避免重定向)。 重定向的作用 重定向(Redirect)用于将用户从一个URL重新路由到另外一个URL。我们平时直观感觉最明显的重定向就是在很多网站登录和注销登录时的页面跳转。当然,重定向的有一个副作用就是重定向会使你的网页变慢。 重定向的类别 (说明:重定向的类别章节选至《High Performance Web Sites》一书) 当Web服务器向浏览器返回一个重定向时,相应中就会拥有一个范围在3xx的状态码。这表示用户代理必需进一步操作才能完成请求。以下是 3xx 状态码: 300 Muliple Choices (基于 Content-Type) 3… [阅读全文]

前端性能优化:Minify JavaScript and CSS

今天要介绍的YSlow的前端性能优化规则是 Minify JavaScript and CSS(压缩JavaScript和CSS)。 为什么要压缩JavaScript和CSS 为什么要压缩 JavaScript 和 CSS?这个问题很好解答,因为压缩了JavaScript和CSS代码后,文件大小就会降低,文件的下载速度就更快,页面也就可以更快的呈现出来。 压缩了哪些内容 Minification is the practice of removing unnecessary characters from code to reduce its size thereby improving load times. When code … [阅读全文]

前端性能优化:Reduce DNS Lookups

今天要介绍的YSlow的前端性能优化规则是 Reduce DNS Lookups(减少DNS查找)。那么,为什么要减少DNS查找? DNS查找过多的影响 YSlow给了我们很明确的解释说明: The Domain Name System (DNS) maps hostnames to IP addresses, just as phonebooks map people’s names to their phone numbers. When you type www.yahoo.com into your browser, a DNS resolver contacted by the browser returns … [阅读全文]

前端性能优化:Make JavaScript and CSS external

今天要介绍的YSlow的前端性能优化规则是 Make JavaScript and CSS External(使用外部JavaScrpit和CSS文件)。那么,为什么要调用外部的JavaScript和CSS文件? 调用外部JavaScript和CSS文件的好处 这个问题我想是我们首先会问自己的,为什么要调用外部文件呢?有什么好处啊? 首先,我们前面介绍过了,我们可以为JavaScript和CSS文件设置 Expires headers,当用再次访问文件的时候,浏览器就可以读取缓存中的文件,减少页面请求,加快页面的加载速度。 其次,使用外部文件会有利于重复调用,如果其他页面也需要使用相同的样式或者交互效果,就可以很方便的调用独立的外部… [阅读全文]

前端性能优化:Avoid CSS expressions

今天要介绍的YSlow的前端性能优化规则是 Avoid CSS expressions(避免使用动态 CSS 属性)。那么什么是 CSS expressions 呢? CSS Expression 简介 CSS Expression,动态 CSS 属性。IE 私有,自 IE 5.0 开始引入(IE8 将不再支持),详细参考MSDN。 CSS Expression 用来把 CSS 属性和 Javascript 表达式关联起来,这里的 CSS 属性可以是 CSS 元素固有的属性,也可以是自定义属性。就是说 CSS 属性后面可以是一段 Javascript 表达式,CSS 属性的值等于 Javascript 表达式计算的结果。 在表达式中… [阅读全文]

前端性能优化:Put JavaScript at bottom

之前介绍过YSlow前端性能优化的一条规则是将CSS放在HTML文档顶部,今天要介绍的规则是:Put JavaScript at bottom(将JavaScript放到HTML文档底部)。将JavaScript放到HTML文档底部,正好跟CSS放置的位置相反。那为什么要这么做呢? 脚本阻塞下载 Put JavaScript at bottom 主要原因是在浏览器下载脚本的时候,浏览器不会下载其它的页面组件。造成的直接后果就是,在脚本下载并执行完成之前,位于脚本后面的内容浏览器是不会加载解析的。页面位于脚本下发的内容不会解析,就会出现空白的区域。脚本在HTML文档的位置越靠前,页面出现空白区域就越多。给用户的感觉就是页面卡住了,页面… [阅读全文]

前端性能优化:Put CSS at top

今天我们接着来介绍YSlow的前端优化规则:Put CSS at top(将CSS放到HTML文档顶部)。这个规则看似很简单,将CSS放到HTML文件的<HEAD>标签。那为什么要这样处理呢? 为什么 Put CSS at top YSlow 的文档是怎么说的: While researching performance at Yahoo!, we discovered that moving stylesheets to the document HEAD makes pages appear to be loading faster. This is because putting stylesheets in th… [阅读全文]