网址最主要的东西是啥?

网址最主要的东西是啥?
——內容?SEO(seo优化)?UE(客户体验)?也不对!是速率!
內容再丰富多彩的网址,假如慢到无法打开也是毫无价值的; SEO做的再比较好的网站,假如检索搜索引擎蜘蛛抓不上也是白费; UE设计的再个性化的网址,假如客户连看都看不见也是空话。
因此网页的效率肯定是最需要留意的层面。怎样才能提升一个网页的效率呢?Steve Souders(Steve Souders的材料http://www.oreillynet.com/pub/au/2951)明确提出的提升网页效率的14条准则,而这种准则也将是大家续篇中详细介绍到的YSlow专用工具的理论基础:

* Make Fewer HTTP Requests
* Use a Content Delivery Network
* Add an Expires Header
* Gzip Components
* Put CSS at the Top
* Move Scripts to the Bottom
* Avoid CSS Expressions
* Make JavaScript and CSS External
* Reduce DNS Lookups
* Minify JavaScript
* Avoid Redirects
* Remove Duplicate Scripts
* Configure ETags
* Make Ajax Cacheable

这儿大家将逐一的介绍这种准则,对在其中开发人员息息相关的准则我将详尽解读。小兄弟本人技术性确实比较有限,不正确和愚昧无可避免,还请高人指点。

第一条:Make Fewer HTTP Requests 尽量的降低HTTP的Request要求数。

80%的客户反应时间全是消耗在前面。而这种時间关键又是由于保存图片、css样式表、JavaScript脚本制作、flash等文件导致的。降低这种資源文件的Request要求数将是提升网页表明效率的关键。
这儿仿佛有一个分歧,便是假如降低了许多的照片,款式,脚本制作或是flash,那麼网页难道不是光溜溜的,这多不好看呢?实际上这是一个误会。大家仅仅说尽可能的降低,并没说彻底无法应用。降低这种文件的Request要求数,自然还有一些小技巧和提议的:
1:用一个大的图片替代好几个小图片。
这确实有点儿改变传统的逻辑思维了。之前大家一直认为好几个小图片的网络速度之和会低于一个大的图片的网络速度。可是如今运用httpwatch专用工具的对好几个页面开展研究后的结果显示客观事实并不是这样。
第一张图是一个尺寸为40528bytes的337*191px的大的图片的研究結果。
第二张图是一个尺寸为13883bytes的280*90px的小图片的研究結果。
2:合拼你的css文件。
合并,合拼平面图
图:合拼与结合
我之前犯了一个不正确,你在看我《样式表的组织与规划》的系列产品文章内容中会了解。那时候,我为了更好地便捷机构和整体规划css样式表,将用以不一样应用领域的css样式表文件分离出来起来,产生不一样的css文件。随后在页面中按照必须引入好几个css文件。依据“尽量的降低HTTP的Request要求数”准则我们知道,那般确实是不规范的,由于这样会造成大量的HTTP的Request要求数。进而减少网页的效率。因此,从提升网页效率的方向上来讲,大家依然应当将全部的css写在同一个 css文件中。可是问题来了。那麼如何来非常好的结构和整体规划css样式表呢?这确确实实是个分歧。现在我的作法是选用2套版本号。编写版和公布版。编写版依然应用好几个 css文件便于于整体规划和机构。而直到公布的情况下,再将好几个css文件合拼到一个文件中去,进而实现降低HTTPRequest要求数的目地。
3:合拼你的javascript文件。
缘故和加工处理办法跟上面一样,不会再赘言。

第二条:Use a Content Delivery Network 应用CDN

这一看起来似乎很令人深思的模样,可是只需融合我国的互联网特点,这一便不难理解了。“北方地区网络服务器”、“南方地区网络服务器”、“电信服务器”、“网通服务器”……这种词听起来是那麼了解和压抑感。假如,一个北京市的中国电信客户尝试从广东省的网通服务器上开启一个相近《壁纸合集》贴子的网页时,你也就能很难忘的了解。
由于这一并不是大家开发者有意义的事的准则,因此这儿也就很少言了。
第三条:Add an Expires Header 加上周期时间头

这一也并不是开发者来操纵,反而是网络服务器管理人员的岗位职责。因此,假如做为开发者的你没掌握和搞清楚也没有关系。或是把这个准则告知企业的网络服务器管理人员。
第四条:Gzip Components 开启Gzip压缩
八条:Make JavaScript and CSS External 将javascript和css单独成外界文件

这一条仿佛和第一条有点儿分歧。确实,假如从HTTP的request要求数而言得话,那样做确实是减少了效率。可是往往这样做,是由于此外一个主要的考量要素——缓存文件。由于外面的引入文件会被浏览器缓存,因此假如javascript和css容积很大的情况下,大家将他们单独成外界文件。那样当客户只需访问一次之后,这种容积很大的js和css文件就能被缓存文件起來,进而极堡垒提升客户再度浏览时的效率。
第九条:Reduce DNS Lookups 降低DNS查看

DNS解析域名系统软件。我们都知道大家往往能记牢那么多的网站地址,是由于大家记牢的全是英语单词,并非http://202.153.125.45那样的东西,而帮大家把这些英语单词和202.153.125.45那样的ip详细地址联络在一起的便是DNS。那这一条对大家究竟有哪些真真正正的意义上的现实意义呢?实际上有两根:
1:要不是务必,请不要把网址放进两部网络服务器上。
2:网页中的照片、css文件、js文件、flash文件这些,不必过多的散落在不一样的网络环境中。这就是为何那类只发一个网站中的手机壁纸图片的贴子,要比手机壁纸图片来自不一样站点的贴子表明要快得多的缘故。
第十条:Minify JavaScript and CSS 降低JavaScript和CSS文件的容积

这一点非常好了解。在你的最后公布版本号中把沒有必需的空白行、空格符和注解所有除掉。显而易见手工制作去解决效率太低,好在网络上到处都是用以缩小这种东西的专用工具。缩小JavaScript编码容积的专用工具经常可以看到,我便不会再例举了,这儿我只给予一个用以缩小css代码容积的代码转换器网址——http://www.cssdrive.com/index.php/main/csscompressor
它保证了多种多样压缩方式,可以融入多种多样规定。
第十一条:Avoid Redirects 防止自动跳转

我只从网页开发者的方面来讲解此条。那麼我们可以理解到哪些东西呢?2点——
1:“此网站域名过期,5秒左右之后,页面将自动跳转到http://www.xxxxxx.com/index.html页面”,这样的话看上去确实很了解。可是,我便怪异了,为什么不立即连接到那一个页面呢?
2:一些连接详细地址请更清晰的写出去。例如:将http://justinyoung.cnblogs.com/ 写出http://justinyoung.cnblogs.com (留意最终面一个“/”标记)。确实,这两个网站地址都能浏览到我的网站,可是,实际上,他们是有差异的。http://justinyoung.cnblogs.com 的結果是个301回应,它会被再次偏向http://justinyoung.cnblogs.com/ 。可是显而易见,正中间多消耗了一些時间。
第十二条 Remove Duplicate Scripts 清除反复的脚本制作
对反复说不
图:对重复说“不!”

这一准则的大道理很易懂,可是真真正正在工作上,很多人却由于“新项目時间紧”、“太累了”、“前期沒有规划好”……那样的原因推辞过去。你,确实可以找许多的原因没去解决这种不必要相同的代码编码,假如你的平台不用更高一些的效率和中后期维护保养得话。
也恰好是这一点,我提示大伙儿一些,一些javascript架构、javascript包一定要谨慎使用。最少要问一下:用了这一js kit 究竟给大家是多少便捷,提升了是多少工作中效率。随后,再与它由于不必要的、反复的编码产生的消极实际效果较为一下。
第十三条:Configure ETags 配备你的实体线标识

最先来讲下什么叫Etag吧。Etag(Entity tags )实体线标识。这一tag与你在网络上常常见到的标签云那类tag有点儿差别。这一Etag并不是给客户用的,反而是给浏览器缓存用的。Etag是网络服务器告知浏览器缓存,缓存文件中的信息是不是早已产生变化的一种体制。根据Etag,电脑浏览器就可以了解如今的缓存文件中的信息是否全新的,要不要再次从服务器上重新免费下载。这和 “Last-Modified”的定义有点儿相近。很遗憾做为网页开发者对于此事束手无策。他仍然是网络服务器工作人员的工作中范围。假如,你对于此事有兴趣爱好,可以资询贵司的网络服务器管理人员。
第十四条:Make Ajax Cacheable 上边的准则也适用Ajax
Ajax
图:Ajax的运用要适当

如今的Ajax仿佛有点儿被神话传说了,仿佛网页只需Ajax了,那麼就不会有效率问题了。实际上这也是一种误会。拙劣的应用Ajax不容易使你的网页效率更高一些,反倒会减少你的网页效率。Ajax确实是个好东西,可是请不要太过的神话传说它。应用Ajax的过程中还要考虑到上边的这些准则。
续篇:

自然,上边的那些也仅仅供你参照的理论上的准则。实际的情形或是要实际的去看待。基础理论和准则仅仅用于具体指导实际工作中的,则是万万不可死记硬背软套。
这一我们应当较为了解。Gzip的观念便是把文件先在服务端开展缩小,随后再传送。这针对容积很大的文字型的文件有动画特效。由于这也并不是开发者,反而是网络服务器管理人员的工作中范围,这儿便不详尽介绍了。假如你对于此事有兴趣,可以新闻资讯贵司的网络服务器管理者。
第五条:Put CSS at the Top 把CSS款式放到页面的上边。

不论是HTML或是XHTML还是CSS全是表述型的语言表达,并非编译程序型的。因此CSS到上边得话,那麼电脑浏览器分析构造的情况下,就早已可以对页面开展3D渲染。那样就不可能发生,页面构造光溜溜的先出去,随后CSS3D渲染,页面又忽然绮丽起來,那样太具备“戏剧化”的页面访问感受了。
第六条:Move Scripts to the Bottom 将代码放到底端

缘故同第五条一样。仅仅脚本制作一般是用于于客户互动的。因此假如页面都还没出去,客户连页面都不清楚什么样子,那谈互动真是便是扯谈。因此,脚本制作和CSS恰好反过来,脚本制作应当放到页面的底端。
第七条:Avoid CSS Expressions 防止应用CSS中的Expressions

if语句,expression,分辨句子平面图
图:CSS中的Expressions实际上也是一种if分辨
最先必须先表明一下CSS Expressions是什么一个东西。实际上它如同其他语言中的if……else……句子。那样在CSS中就可以开展简洁的逻辑推理了。举个简便的事例——
<style>
input{background-color:expression((this.readOnly && this.readOnly==true)?"#0000ff":"#ff0000")}
</style>
<INPUT TYPE="text" NAME="">
<INPUT TYPE="text" NAME="" readonly="true">
那样css就可以根结一些状况各自采用不一样的款式了。假如你对这一有兴趣可以到我的网站上阅读文章有关的好文章—— 《CSS中的expression系列文章》。可是CSS中Expressions 的结果则是非常高的。如果你的页面必须依据分辨来3D渲染实际效果的原素许多的情况下,那麼你的电脑浏览器将长时间处在假死状态,进而给消费者产生偏差的客户体验。

热搜词

asp空间和云服务器admin服务器android向服务器发送数据onres安卓系统云服务器地址android测试服务器连接android 获取所有服务器按天算的服务器安装数据库提示wmi服务器aspx网站配置服务器android 设置wifi代理服务器安卓全局代理服务器安卓系统怎么访问ftp服务器地址安卓服务器上传图片ac ap 网关 服务器android注册多个服务器地址安庆服务器托管安全传输网关服务器的作用armlinux搭建web服务器aspweb程序ansible控制远程服务器android 定时向服务器发送请求安卓服务器接口ajax请求设置代理服务器ad域控服务器配置安装phpmyadmin的云服务器apache服务器安全软件app的web服务器安全和服务器地址angular4服务器链接android 同步服务器时间app云上部署服务器吗android视频上传服务器安卓配置本地web服务器asp 网站服务器配置apache服务器套件安卓云服务器系统ac服务器 无线apache服务器无服务android 客户端 服务器 安全android 网盘服务器apache解析域名apache与服务器配置android 服务器返回400 bad request按秒计费云服务器安卓版vpn服务器android和服务器通讯录安卓手机搭建云服务器android dns 服务器按量计费服务器鞍山市云服务器报价android 登录服务器android客户端访问服务器安卓与服务器连接失败怎么办aspnet 打开服务器文件android 移动网络定位服务器地址apache文件服务器 权限ad证书服务器安装与设置dhcp服务器app的web后台服务器atom做服务器android studio http 服务器安卓总 显示云服务器app store 游戏服务器asp下载服务器文件ASPNET服务器控件的生命周期分析安卓连接到服务器apache服务器作用安装linux ftp服务器配置apache搭建文件服务器无法访问安全服务器地址税务安顺市弹性云服务器价格安卓手机怎么连接云服务器As直接提交git远程服务器apache 服务器 windowsandroid 网络代理设置代理服务器apache服务器缓存模块有哪些ansys可以用云服务器吗安顺云服务器租用安徽亳州移动dns服务器地址android手机当服务器安卓服务器端怎么开发android mysql 服务器安卓链接云服务器应用app的服务器会被ddosapp开发云服务器配置安卓设置代理服务器抓包app云服务器搭建要求安徽联通dns服务器地址aix系统查询服务器的配置文件android不能连接网络连接服务器android socket服务器搭建app服务器地址安装文件服务器apache服务器开机启动命令ai云时代流量变现服务器阿根廷云服务器apache是服务器吗安装软件需要云服务器ad域证书服务器api接口需要服务器支撑吗