雅虎前端优化法则 - 思齐_
- - 博客园_思齐1、尽量减少HTTP请求次数. 网页加载中大部分时间都在下载js，css，flash，图片. 1、合并文件 css，js，图片（css sprite）. 2、内联图像 data:URL scheme 低级浏览器不支持，如过放到页面中会加大html，放到css中最好，因为他可以在客户端进行缓存.
雅虎前端优化法则 - 思齐_
标签：
雅虎
前端
优化
| 发表时间：2014-04-09 23:12 | 作者：思齐_
出处：
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、打包组件成复合文本
本文链接： 雅虎前端优化法则，转载请注明。
相关 [雅虎 前端 优化] 推荐：
Web前端优化
- - JavaScript - Web前端 - ITeye博客优点：直接使用浏览器内存的缓存数据，减少网站后台压力，用户体验（速度）好. 缺点：对于时时变化的动态页面，这种情况就不能容忍了，因为每次访问的都是第一次访问的内容，这样即使所请求的页面已经变化了，用户也不可能知道，所以此场景必须要消除这种缓存的影响. 延迟加载，将资源延迟到需要的时候的加载，例如detail页面，相关产品推荐，当用户浏览更多的信息往下拉动滚动时，才进行加载，异步加载可以大幅减少对后端资源的使用，在需要的时候加载，是资源合理使用常用的方式，但是也带来一个问题，当往下拉才去加载，如果性能不够好，用户的体验其实是不好的，“菊花”转动的时间会比较长，同时异步加载对前端性能的作用也是非常明显的，渲染的节点数量大幅减少.
雅虎开源其网页优化工具 YSlow
- - ITeye资讯频道雅虎日前在BSD许可协议下，开源了其YSlow产品. YSlow 是雅虎创建的一个浏览器插件，发布于2007年. YSlow 可以帮助开发者发现其站点上的很多不足，并且可以提供改进和优化建议. 过去的5年中，YSlow的代码一直由雅虎维护. 现在雅虎将这些代码开源出来，基于BSD协议. 我们鼓励你使用这些源代码，学习它或者用它来创建你自己的项目.
前端性能优化
- - JavaScript - Web前端 - ITeye博客 在浏览器(客户端)和服务器发生通信时，就已经消耗了大量的时间，尤其是在网络情况比较糟糕的时候，这个问题尤其的突出. 一个正常HTTP请求的流程简述：如在浏览器中输入" www.xxxxxx.com"并按下回车，浏览器再与这个URL指向的服务器建立连接，然后浏览器才能向服务器发送请求信息，服务器在接受到请求的信息后再返回相应的信息，浏览器接收到来自服务器的应答信息后，对这些数据解释执行.
Web前端优化最佳实践
- Jimmy - 中文热文榜|最新还有 Jason, Bixuan, 曦, 推荐，查看全部 8 个推荐. 博评 - Sting的网经发表于2010-08-08 08:41:10. Google的前端优化最佳实践
Yahoo的前端优化最佳实践. Web前端优化最佳实践之Content篇. 尽量减少 HTTP 请求 (Make Fewer HTTP Requests).
前端开发中的HTML优化
- - 可咔酷 | 网络杂货铺在前端领域中，对Javascript和CSS的优化一直是大家关注的焦点，相应的压缩优化工具也非常丰富，相对而言对HTML优化的关注则显得有些冷淡. 在 Steve Souders的大作《Even Faster Web Sites》中谈到非常多有效的前端优化方法，例如Javascript的加载、CSS选择符、图片优化、gzip、iframe问题等，唯独没有细说HTML优化.
mod_pagespeed：傻瓜式前端优化
- - 知道分子曾经有位朋友自己做了个小网站，刚开始没什么人气，后来不小心把流量搞大了，用户抱怨访问缓慢，就让我帮忙看看哪里可以优化. 那时 Steve Souders 老师的 YSlow 14条军规刚刚新鲜出炉，开宗明义第一句便是：网页性能 80% 消耗在前端. 于是运用 Firefox+Firebug+YSlow 工具，轻松找到那些大图小用、过期时间太短、JS/CSS位置不正确、没有精简压缩的罪恶之源.
前端工程与性能优化
- - FEX 百度 Web 前端研发部每个参与过开发企业级 web 应用的前端工程师或许都曾思考过前端性能优化方面的问题. 我们有雅虎 14 条性能优化原则，还有两本很经典的性能优化指导书：《高性能网站建设指南》、《高性能网站建设进阶指南》. 经验丰富的工程师对于前端性能优化方法耳濡目染，基本都能一一列举出来. 这些性能优化原则大概是在 7 年前提出的，对于 web 性能优化至今都有非常重要的指导意义.
web前端性能优化进阶路
- - 阿里巴巴（中国站）用户体验设计部博客Web前端性能优化WPO，相信大多数前端同学都不会陌生，在各自所负责的站点页面中，也都会或多或少的有过一定的技术实践. 可以说，这个领域并不缺乏成熟技术理论和技术牛人：例如Yahoo的web站点性能优化 黄金法则，以及大名鼎鼎的优化大师 Steve Souders. 本文并非一篇讨论性能优化技术方法的文章，而更多的是对中文站 搜索List页面持续两年多的前端性能优化实践的 思路总结.
前端性能优化最佳实践
- - Web前端 - ITeye博客如今浏览器能够实现的特性越来越多，并且网络逐渐向移动设备转移，使我们的前端代码更加紧凑，如何优化，就变得越来越重要了. 开发人员普遍会将他们的代码习惯优先于用户体验. 但是很多很小的改变可以让用户体验有个飞跃提升，所以任何一点儿小小的优化都会提升你网站的性能. 前端给力的地方是可以有许多种简单的策略和代码习惯让我们可以保证最理想的前端性能.