雅虎前端优化法则【转】

1、尽量减少HTTP请求次数
  网页加载中大部分时间都在下载js,css,flash,图片
  1、合并文件 css,js,图片(css sprite)
  2、内联图像 data:URL scheme 低级浏览器不支持,如过放到页面中会加大html,放到css中最好,因为他可以在客户端进行缓存

2、减少DNS查找次数即减少页面中的主机名(css,js, img,flash等)
  dns解析时浏览器处于等待状态 大部分浏览器有自己的缓存不会受系统的缓存的影响
  1、减少主机名数量,则减少了dns查询,但同时减少了页面中并行下载的数量
  把页面中的主机名分成2~4个,二者可兼得

3、避免跳转
  降低了用户体验
  url本身最后应该有/如果不带则用户访问时会发生一次301跳转
  可以在服务器中进行设置来避免它

4、可缓存的ajax
  可将请求的地址设置为永不过期,然后请求的地址中带上文件的最后修改时间

5、推迟加载内容(不是立刻要用的)
  用onload把页面分成两部分 折叠的,隐藏的,js效果可以后加重
  img,css。js 根据需求进行加重

6、预加载
  在用户空闲时加载以后要用到的 img,css,js,这些都可以缓存
  在这个页面加载下个页面要用到的页面组件
  同样可以把这些要加载的放到 onload 里面

7、减少DOM元素数量
  页面元素越多JavaScript遍历DOM的效率越慢
  YUI CSS utilities
  document.getElementsByTagName(‘*‘).length 计算页面全部的元素个数

8、根据域名划分页面内容
  可以并行下载考虑到dns查询时间2到三个最好

9、使iframe的数量最小
  优点
    解决加载缓慢的第三方内容如图标和广告等的加载问题
    Security sandbox
    并行加载脚本

  缺点:
  即时内容为空,加载也需要时间
  会阻止页面加载
  没有语意

10、避免404

11、使用内容分发网络

12、为文件头指定Expires或Cache-Control

13、Gzip压缩文件内容

14、配置ETag
  web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制

15、尽早刷新输出缓冲
  最好放到head和body之间 <?php flush(); ?>

16、使用GET来完成AJAX请求
  POST方法是一个“两步走”的过程:首先发送文件头,然后才发送数据

17、把样式表置于顶部
  把样式表放到<head />内会使页面有步骤的加载显示,以便于及时给用户反馈(显示的页面),改善了用户体验

18、避免使用CSS表达式(Expression)
  它们的计算频率要比我们想象的多,在页面缩放,滚动,或者即使是鼠标移动时都会计算

19、使用外部JavaScript和CSS
  可以被缓存

20、削减JavaScript和CSS
  减少请求的大小

21、用<link>代替@import

22、避免使用滤镜
  完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式来代替

23、把脚本置于页面底部
  阻止了页面的平行下载
  HTTP/1.1 规范建议,浏览器每个主机名的并行下载内容不超过两个
  脚本加载时会阻止页面上所有的元素进行加载,即使是不同域名

24、剔除重复脚本

25、减少DOM访问
  缓存已经访问过的有关元素
  线下更新完节点之后再将它们添加到文档树中
  避免使用JavaScript来修改页面布局

26、开发智能事件处理程序
  delegate 方法绑定

27、减小Cookie体积

28、对于页面内容使用无coockie域名

29、优化图像

30、优化CSS Spirite
  水平排列图片会比垂直要小
  颜色相近的摆放在一起
  空隙不宜过大

31、不要在HTML中缩放图像

32、favicon.ico要小而且可缓存

33、保持单个内容小于25K

34、打包组件成复合文本

时间: 2024-10-13 13:28:54

雅虎前端优化法则【转】的相关文章

雅虎前端优化法则

雅虎前端优化法则 1.尽量减少HTTP请求次数 网页加载中大部分时间都在下载js,css,flash,图片 1.合并文件 css,js,图片(css sprite) 2.内联图像 data:URL scheme 低级浏览器不支持,如过放到页面中会加大html,放到css中最好,因为他可以在客户端进行缓存 2.减少DNS查找次数即减少页面中的主机名(css,js, img,flash等) dns解析时浏览器处于等待状态 大部分浏览器有自己的缓存不会受系统的缓存的影响 1.减少主机名数量,则减少了d

雅虎前端优化

雅虎前端优化法则 1.尽量减少HTTP请求次数  网页加载中大部分时间都在下载js,css,flash,图片 1.合并文件 css,js,图片(css sprite) 2.内联图像 data:URL scheme 低级浏览器不支持,如过放到页面中会加大html,放到css中最好,因为他可以在客户端进行缓存 2.减少DNS查找次数即减少页面中的主机名(css,js, img,flash等) dns解析时浏览器处于等待状态 大部分浏览器有自己的缓存不会受系统的缓存的影响 1.减少主机名数量,则减少了

【转】yahoo前端优化军规

雅虎给出了前端优化的34条法则(包括Yslow规则22条) 详细说明,下载转发 ponytail 的译文(来自帕兰映像). Minimize HTTP Requests 减少http请求 图片.css.script.flash等等这些都会增加http请求数,减少这些元素的数量就能减少响应时间. 把多个JS.CSS在可能的情况下写进一个文件,页面里直接写入图片也是不好的做法,应该写进CSS里,利用 CSS sprites 将小图拼合后利用background来定位. Use a Content D

关于大型网站技术演进的思考(二十)--网站静态化处理—web前端优化—中(12)

Web前端很多优化原则都是从如何提升网络通讯效率的角度提出的,但是这些原则使用的时候还是有很多陷阱在里面,如果我们不能深入理解这些优化原则背后所隐藏的技术原理,很有可能掉进这些陷阱里,最终没有达到最佳的预期效果,今天我在这里分析下浏览器和服务端通讯的一些细节问题,希望通过分析这些细节问题,能给大家一个启迪,能更好的理解这些优化原则背后的隐秘,最终能更好的运用这些原则. 网站的通讯技术是构建在http协议上,http协议底层通讯手段使用的是tcp/ip协议,但是tcp通讯协议在建立连接和断开连接这

Web前端优化最佳实践及工具集锦

前端的性能对于一个Web应用来说非常重要,如果一个Web应用的页面加载速度非常快.对于用户的操作可以及时响应,那么产品的用户体验将会极大地提升.下图显示了页面加载速度对于用户体验的影响. 你的Web页面的速度是否已经足够快了?其实可能还有很多可以提升的地方.Google和雅虎也提出了一些Web应用的前端优化建议,并发布了一些工具,你可以逐一检验你的Web应用,以便达到更高的性能. 这些优化不仅仅可以给用户提供更好的体验,从开发者角度来说,进行优化还可以减少页面的请求数.降低请求所占的带宽.减少资

关于大型网站技术演进的思考(十九)--网站静态化处理—web前端优化—上(11)

网站静态化处理这个系列马上就要结束了,今天我要讲讲本系列最后一个重要的主题web前端优化.在开始谈论本主题之前,我想问大家一个问题,网站静态化处理技术到底是应该归属于web服务端的技术范畴还是应该归属于web前端的技术范畴,要回答清楚这个问题我们要明确下网站应用的本质到底是什么?网站的本质其实就是BS,这里的BS我没有带上架构二字,而就是指Browser和Server即浏览器和服务器,而网站静态化技术的作用目标就是让客户端即浏览器的用户体验更好,但是如果我们想让网站在浏览器上运行的更快,在更快的

前端优化的问题

转自--- 影响用户访问的最大部分是前端的页面.网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢?其实应该是属于功能的表现. 而我们建设网站的目的是什么呢?不就是为了让目标人群来访问吗?所以我们可以理解成前端才是真正和用户接触的. 除了后台需要在性能上做优化外,其实前端的页面更需要在性能优化上下功夫,只有这样才能给我们的用户带来更好的用户体验.不仅仅如此,如果前端优化得好,他不仅可以为企业节约成本,他还能给用户带来

Web 前端优化最佳实践

面向内容的优化规则目前有 10 条. 1. 尽量减少HTTP请求 (Make FewerHTTPRequests) 作为第一条,可能也是最重要的一条.根据 Yahoo! 研究团队的数据分析,有很大一部分用户访问会因为这一条而取得最大受益.有几种常见的方法能切实减少HTTP请求: 1) 合并文件,比如把多个CSS文件合成一个: 2) CSSSprites 利用CSSbackground 相关元素进行背景图绝对定位:参见:CSS Sprites: Image Slicing’s Kiss of De

面向.Net程序员的前端优化

背景 作为web开发人员大家大多了解一些网站的性能优化方法,其实大部分方法都不复杂,例如针对前端js和css的压缩来减少请求大小,通过合并来减少请求次数.这里站在.Net后端程序员的角度来看一下如何最简单快捷的处理这一类需求. 全文分3节 combres,mvc4的Bundle,以及2者的对比和个人的意见观点. 弄了个很张扬的点赞样式,如果觉得很想吐槽请告诉我,我删掉... Combres Combres是一个.NET程序库,能够缩小,压缩,合并,以及缓存的JavaScript和CSS资源,AS