Yslow是雅虎开荒的依据网页品质分析浏览器插件，从年终自家利用了YSlow后，更动了博客模板大量冗余代码，不仅提高了网页的开采速度，这款插件还扶助本身分析了累累别样网址的代码，从前我还特地写了加强网址速度的孤本，便是经过那款插件分析得出的。互连网上①度有广大Yslow使用验证了，本文我想介绍下自身使用Yslow的主意和局地别人没涉及的小才能。
Yslow是雅虎开拓的基于网页品质分析浏览器插件，从年初自个儿使用了YSlow后，退换了博客模板大批量冗余代码，不仅荣升了网页的展开速度，这款插件还推抢作者分析了广大其余网址的代码，在此之前自身还专程写了增加网址速度的孤本，正是通过那款插件分析得出的。互连网上早已有为数不少Yslow使用验证了，本文笔者想介绍下自个儿使用Yslow的章程和有个别外人没涉及的小本领。
Yslow的设置方式
Yslow的装置格局
Yslow是雅虎开垦的基于网页质量分析浏览器插件，从年头自己使用了YSlow后，更换了博客模板多量冗余代码，不仅进步了网页的张开速度，这款插件还扶持本身分析了无数其余网站的代码，之前笔者还特地写了增强网址速度的孤本，正是通过那款插件分析得出的。互连网上壹度有多数Yslow使用验证了，本文小编想介绍下小编动用Yslow的方式和局地外人没涉及的小才干。
目前Yslow已经有数不完版本了，本文介绍的是3.0.四新型版，张开Yslow官网就能来看有七个本子可供选拔：火狐（firefox）浏览器、谷歌（Google）（chrome）浏览器、欧朋（opera）浏览器和移动版。
最近Yslow已经有无数版本了，本文介绍的是三.0.四前卫版，张开Yslow官网就能观望有四个本子可供选拔：火狐（firefox）浏览器、谷歌（谷歌）（chrome）浏览器、欧朋（opera）浏览器和移动版。
Yslow的设置格局
安装Yslow要先安装
Firebug（本地址以火狐为例），三种艺术运转Yslow：一、展开Firebug窗口，采取Yslow选项。二、直接点击火狐右下角的Yslow运转开关。
安装Yslow要先安装
Firebug（本地址以火狐为例），三种办法运营Yslow：壹、展开Firebug窗口，选取Yslow选项。二、直接点击火狐右下角的Yslow运行按键。
今天Yslow已经有成都百货上千本子了，本文介绍的是3.0.肆新星版，张开Yslow官网就能观察有多个版本可供采纳：火狐（firefox）浏览器、谷歌（谷歌）（chrome）浏览器、欧朋（opera）浏览器和移动版。
安装Yslow要先安装
Firebug（当地址以火狐为例），三种艺术运行Yslow：一、展开Firebug窗口，选拔Yslow选项。二、间接点击火狐右下角的Yslow运维按键。
（图一：Yslow的开发银行分界面）
（图一：Yslow的起步分界面）
点击 Run Test 运营Yslow，也足以点击 Grade, Components,
或Statistics选项伊始对页面包车型客车剖析，假诺在 Autorun YSlow each time a web
page is loaded 上打上对勾，它将电动对之后打开页面实行分。
点击 Run Test 运维Yslow，也得以点击 Grade, Components,
或Statistics选项初始对页面包车型大巴剖析，假诺在 Autorun YSlow each time a web
page is loaded 上打上对勾，它将自行对之后张开页面举行分。
（图壹：Yslow的开行分界面）
留意图中的红框，那里是规则集，YSlow
（V二）包括了具有二十三个测试的规则，YSlow
（V一）包蕴原始一三平整，小网址或博客-那一个规则集带有十四个规则，适用于小型网址或博客，提出对号落座。
小心图中的红框，那里是规则集，YSlow
（V二）包蕴了具备二十多少个测试的平整，YSlow
（V壹）蕴涵原始1叁条条框框，小网址或博客-这些规则集带有14个规则，适用于小型网址或博客，提出对号落座。
点 击 Run Test 运转Yslow，也得以点击 Grade, Components,
或Statistics选项开头对页面包车型大巴分析，倘诺在 Autorun YSlow each time a web
page is loaded 上打上对勾，它将活动对之后张开页面进行分。
雅虎评估网址品质的二三条军规
雅虎评估网址品质的二叁条军规
留神图中的红框，那里是规则集，YSlow
（V贰）包涵了具备二14个测试的条条框框，YSlow
（V壹）包涵原始一三规则，小网址或博客-这几个规则集带有16个规则，适用于小型网址或博客，建议对号落座。
雅虎曾经针对网址速度提议了十一分资深3四条轨道：《Best Practices for
Speeding Up Your Web
Site》。而未来将3肆条精简为更直观的二三条，并针对性每一条给出从F~A的评分以及最后的总分。
雅虎曾经针对网址速度提议了要命资深3四条轨道：《贝斯特 Practices for
Speeding Up Your Web
Site》。而前几日将34条精简为越来越直观的2三条，并针对每一条给出从F~A的评分以及最后的总分。
雅虎评估网址质量的二三条军规
而现行反革命二3条网址品质优化提出在YSlow的官方网站首页就能看到，当然也能够不看，在动用Yslow后，在调节面板里就会给您评分提醒，和改进提出。
而明日23条网址品质优化建议在YSlow的官方网址首页就能收看，当然也足以不看，在动用Yslow后，在调整面板里就会给您评分提醒，和立异建议。
雅虎曾经针对网址速度提议了充裕闻明3四条轨道：《Best Practices for
Speeding Up Your Web
Site》。而前几日将3肆条精简为进一步直观的23条，并针对性每一条给出从F~A的评分以及尾声的总分。
Grade(等级视图)—Yslow的第3个选项卡
Grade(等第视图)—Yslow的第三个选项卡
而方今2三条网址质量优化建议在YSlow的官方网站首页就能收看，当然也得以不看，在动用Yslow后，在调整面板里就会给您评分提醒，和革新提议。
…
（图二：Yslow给出的网址质量评分）
（图2：Yslow给出的网址品质评分）
Yslow给出的网站质量评分，从F~A，A是最棒的，通过测试卢松松博客来看，网址有四处得分最低，举个例子图第22中学的最低分提示：笔者博客的HTTP请求太多。个中使用了十多个外表JS、1个CSS文件（从前自个儿已从多少个统1为一个）、17个CSS背景图片。
Yslow给出的网址质量评分，从F~A，A是最棒的，通过测试卢松松博客来看，网址有4处得分最低，举例图第22中学的最低分提醒：笔者博客的HTTP请求太多。其中使用了15个外表JS、三个CSS文件（从前自身已从伍个统一为一个）、1四个CSS背景图片。
Yslow的提出是让本人联合那么些，至于合并CSS引用图片笔者在“升高网址张开速度的7大法门”中牵线过。
Yslow的提出是让小编联合这一个，至于合并CSS引用图片小编在“升高网址展开速度的7大法门”中介绍过。
Components（组件视图）—Yslow的首个选项卡
Components（组件视图）—Yslow的第几个选项卡
（图叁：通过Components考验查看网页种种要素占用的长台湾空中大学小）
（图三：通过Components考验查看网页各类要素占用的长台湾空中大学小）
透过Components考验查看网页各样要素占用的半空中尺寸，举例笔者博客有个别页面，有23二十一个images（图片），占用了48九.2K，通过详细查看，开采来自gravatar（商酌头像）的引用图片一点都十分的大，在增添本身博客省外批评量就打，每种头像就据有几K，几百个就攻陷了总体网页50%的轻重缓急，而且图片依然引用的，加载就更加慢。
透过Components考验查看网页各种要素占用的空中山高校小，比方作者博客有个别页面，有238个images（图片），占用了48九.2K，通过详细查看，开采来自gravatar（抵触头像）的引用图片极大，在累加自个儿博客本省批评量就打，各类头像就吞没几K，几百个就占用了任何网页3/陆的轻重缓急，而且图片依然引用的，加载就更加慢。
故此，笔者得出的结论是：gravatar即使提升了互动性和个性，但也结结实实影响了网址速度。
之所以，作者得出的下结论是：gravatar即便提升了互动性和性格，但也结结实实影响了网址速度。
Statistics（总计消息视图）—Yslow的第几个选项卡
Statistics（总括音讯视图）—Yslow的第八个选项卡
（图4：Yslow的总计信息视图）
（图肆：Yslow的计算音信视图）
左边图表展现是页面成分在空缓存的加载情形，左侧为页面成分接纳缓存后的页面加载意况。从图中得以直观的收看（越发是我标的红框），那一个网页二6二个HTTP请求，网页的大大小小达到77叁.九K，意味着展开没张开贰个页面差不离要求下载1M的东西，而经过应用缓存后大家能够看到效率图片核心靠缓存，而网页的总大小压缩到4三.2K。
左手图表显示是页面元素在空缓存的加载意况，左边为页面成分运用缓存后的页面加载景况。从图中能够直观的观察（越发是作者标的红框），这么些网页贰陆十五个HTTP请求，网页的分寸达到77三.玖K，意味着展开没张开二个页面大约供给下载1M的事物，而透过利用缓存后大家得以见见功用图片中央靠缓存，而网页的总大小压缩到4叁.2K。
Statistics这些计算新闻视图工具和Components（第二选项卡）同样，只是效果越来越直观，如若要获取属性优化提出仍然要看Grade（第三选项卡）的详实建议。
Statistics那些总括音讯视图工具和Components（第三选项卡）一样，只是效果越来越直观，假如要获取属性优化提议依旧要看Grade（第二选项卡）的详实建议。
Tools（补助理工科程师具）—Yslow的第陆个选项卡
Tools（协理理工科程师具）—Yslow的第陆个选项卡
（图五：Yslow提供的小工具）
（图5：Yslow提供的小工具）
JSLint是七个无敌的工具，它能够查看HTML代码以及内联的Javascript代码，通过JSLint开掘了google
analytics上的3个js错误。
JSLint是3个精锐的工具，它能够查看HTML代码以及内联的Javascript代码，通过JSLint开采了google
analytics上的一个js错误。
ALL JS：查看你这几个网页上累计引用了有点JS。
ALL JS：查看你那一个网页上累计引用了不怎么JS。
All JS
Beautified：把全体JS放在张开的页面中，利用站长统一检查（作者感觉功效非常小）。
All JS
Beautified：把装有JS放在张开的页面中，利用站长统壹检查（作者以为效果非常小）。
All JS
Minified：同上，但它显得的是压缩过的js代码，即使你要JS优化，它早已给您优化好了，来过来直接用。
All JS
Minified：同上，但它显得的是削减过的js代码，假诺你要JS优化，它已经给您优化好了，来苏醒直接用。
All CSS：展现你网页全体CSS文件。
All CSS：呈现你网页全数CSS文件。
YUI CSS Compressor：呈现网页压缩后的CSS文件，也是拿过来能够一向用的。
YUI CSS Compressor：突显网页压缩后的CSS文件，也是拿过来能够一向用的。
All
Smush.it™：图片在线优化网址，点击它后会自动跳到smushit网站上给你活动优化CSS图片，该网址提供了优化前与优化后的对待，点击直接下载优化后的图纸，在覆盖到温馨网址上就能够了，强烈推荐。
All
Smush.it™：图片在线优化网址，点击它后会自动跳到smushit网站上给您活动优化CSS图片，该网址提供了优化前与优化后的比较，点击间接下载优化后的图形，在覆盖到温馨网址上就足以了，强烈推荐。
Printable
View：那些是打字与印刷用的，部门开会、前端设计员商讨、向业主反映时揣摸用的上。
Printable
View：这么些是打字与印刷用的，部门开会、前端设计师研讨、向业主反映时估量用的上。
来源： <>
、23条军规
- 减弱HTTP请求次数
集结图片、CSS、JS，创新第三次访问用户等待时间。
- 使用CDN
相近缓存==>智能路由==>负载均衡==>WSA全站动态加快
- 防止空的src和href
当link标签的href属性为空、script标签的src属性为空的时候，浏览器渲染的时候会把最近页面包车型大巴U途睿欧L作为它们的属性值，从而把页面包车型地铁剧情加载进来作为它们的值。测试
- 为文件头钦赐Expires
使内容有着缓存性。制止了接下去的页面访问中不须求的HTTP请求。
- 采纳gzip压缩内容
压缩其余贰个文件类型的响应，包含XML和JSON，都是值得的。旧小说
-
把CSS放到顶部
-
把JS放到底部
防止js加载对以后能源产生堵塞。
-
幸免选取CSS表明式
-
将CSS和JS放到外部文件中
目标是缓存，但偶尔为了减小请求，也会直接写到页面里，需依赖PV和IP的比重权衡。
- 衡量DNS查找次数
减弱主机名能够节省响应时间。但与此同时，要求注意，缩小主机会压缩页面中互相下载的数码。
IE浏览器在平等时刻只可以从同壹域名下载四个公文。当在四个页面展现多张图纸时，IE
用户的图片下载速度就会遭遇震慑。所以天涯论坛会搞N个二级域名来放图片。
-
精简CSS和JS
-
幸免跳转
同域：注意防止反斜杠 “/” 的跳转；
跨域：使用Alias或者mod_rewirte建立CNAME（保存域名与域名之间涉及的DNS记录）
- 删去重复的JS和CSS
双重调用脚本，除了扩大额外的HTTP请求外，数十次运算也会浪费时间。在IE和Firefox中不管脚本是不是可缓存，它们都留存双重运算JavaScript的难题。
- 配置ETags
它用来决断浏览器缓存里的因素是或不是和原来服务器上的一律。比last-modified
date更富有弹性，比方某些文件在一秒内修改了13次，Etag能够综合Inode(文件的索引节点(inode)数)，MTime(修改时间)和Size来精准的举行推断，避开UNIX记录MTime只可以准确到秒的标题。
服务器集群使用，可取后多少个参数。使用ETags减弱Web应用带宽和负载
- 可缓存的AJAX
“异步”并不意味“即时”：Ajax并无法保障用户不会在等候异步的JavaScript和XML响应上费用时间。
- 使用GET来完成AJAX请求
当使用XMLHttpRequest时，浏览器中的POST方法是四个“两步走”的长河：首首发送文书头，然后才发送数据。由此采用GET获取数据时特别有意义。
- 缩减DOM元素数量
是否存在2个是更方便的价签能够动用？人生不仅仅是DIV+CSS
- 避免404
稍许站点把404错误响应页面改为“你是还是不是要找***”，那即使创新了用户体验可是同样也会浪费服务器财富（如数据库等）。最倒霉的状态是指向外部
JavaScript的链接出现难点并再次来到40四代码。首先，那种加载会破坏并行加载；其次浏览器会把试图在回来的40四响应内容中找到也许使得的一些当作JavaScript代码来推行。
-
减少Cookie的大小
-
使用无cookie的域
譬如说图片 CSS 等，Yahoo!
的静态文件都在主域名以外，客户端请求静态文件的时候，收缩了 Cookie
的多次传输对主域名的震慑。
- 毫无采纳滤镜
png贰肆的在IE陆半透明那种东西，别乱使，淡定的切成PNG八+jpg
-
并非在HTML中缩放图片
-
缩小favicon.ico并缓存
来源：
<>