web前端性能优化

1．理所固然咱们是这样想的

关于减小http请求数,是前端开发性能优化的一个很是重要方面,因此在基本全部的优化原则里,都有这一条原则:减小http请求数.

先不考虑其余的,咱们先考虑为何减小http请求能够优化性能.

减小http请求有这样几个优势:

(1)   减小DNS请求所耗费的时间.

且不说对错,由于从基原本说,减小http请求数的确能够减小DNS请求和解析耗费的时间.

(2)   减小服务器压力.

这个一般是被考虑最多的,也是我用来说解给别人听的最大理由,由于每一个http请求都会耗费服务器资源,特别是一些须要计算合并等操做的服务器,耗费服务器的cpu资源可不是开玩笑的事情,硬盘能够用钱买来,cpu资源可就没那么廉价了.

(3)   减小http请求头.

当咱们对服务器发起一个请求的时候,咱们会携带着这个域名下的cookie和一些其余的信息在http头部里,而后服务器响应请求的时候也会带回一些cookie之类的头部信息.这些信息有的时候会很大,在这种请求和响应的时候会影响带宽性能.

2．让咱们来一一道来

(1) 什么是DNS请求和解析呢?

简单来讲,例如:www.taobao.com这样一个url,其中www部分被称为主机名(hostname),taobao这部分则是二级域,com则是一级域,若是是这样一个网址:www.ali.taobao.com.那么ali就是三级域.

当咱们去请求一个url的时候,首先会到本地服务器里去寻找缓存中是否有解析结果,若是没有解析结果,就去根域名服务器请求,根域名服务器返回给本 地域名服务器一个所查询的域的主域名服务器的ip地址,而后咱们再去请求刚才返回的ip地址的域名服务器,而后返回下一级域名的ip地址,直到咱们找到域 名中所指的服务器ip,而后将结果缓存起来供下次使用,并返回此结果.

一个第一次请求的url的DNS解析过程可能耗费是很高的.可是解析一次以后,结果就会被缓存起来,以后再请求的时候就不用走上面这一套复杂的解析过程了.

关于一个正常的DNS请求到底会耗费多少时间,这个没有定论,要看网速情况和地域,可是考虑一个dns解析解析事后会被缓存起来,像淘宝这样的大网站,来的都是回头客,咱们是否能够忽略DNS解析花费的时间呢?

在前端优化里还有一个优化方法,那就是增长hostname,例如,淘宝图片服务器,分为img01，img02，img03等主机名,这样作是因 为考虑到浏览器对同一个域名下同时进行的http链接数的限制,具体能够见下表:  .而后咱们在一个页面里的图片放在不一样的hostname下,这样就能够同时下载多个图片了,浏览器http链接数的限制能够被缓解一下,可是这样作的后 果就是yslow评分会降低,由于yslow将DNS请求看的比较重要.

Browser   HTTP/1.1       HTTP/1.0 IE 6,7           2                     4 IE 8               6                    6 Firefox 2     2                     8 Firefox 3      6                     6 Safari 3,4     4                     4 Opera 9.61   8                     2

在此,就要引出咱们想讨论的东西,为何yslow评分在合理的状况下分数反而会低,由于yslow只是一个机器程序,它并不知道 咱们的网站是什么类型的,是何种规模的,是内容型仍是应用型,因此咱们能够用异步加载的方式来欺骗yslow对于dom节点的评分,可是异步加载真的适合 咱们的网站么?一样,别人写了一篇文章,出了一个原则,一个最佳实践,可是你肯定他说的状况适合你的状况么?网站有大有小,大小不一样,须要考虑的东西也就 不一样.

为何对于淘宝的图片来讲,使用不一样的hostname是个更优的方案呢?

首先,由于淘宝网的特殊性,淘宝网大多数访问者都是回头客,他们电脑里大多缓存着dns记录.这种状况,若是是小网站或者新兴网站可能要考虑,由于新用户比较多,可能dns请求的消耗更大一些,并且第一印象对于这些网站来讲更为重要.

再者,淘宝里的图片不少,一个页面里一般会用到几十张甚至上百张图片,在这种状况下,咱们更须要突破浏览器的http链接数的限制,以便加快加载速 度,这时候加载速度的考虑优先级远远高于DNS的影响,而yslow中对于DNS的着重考虑可能更偏向中小网站,图片比较少的网站.

对于DNS请求或者tcp(tcp握手之类的也会消耗请求时间)请求之类的分配和解析的消耗,还有一个办法是keeplive,让你的连接保持keeplive,这样能够只创建一次连接,而后传输多个文件,能够有效减小创建链接的时间.

(2) 减小服务器压力

过多的http请求对于服务器来讲是很危险的,若是你的服务器不是很强,请把这一条考虑放在第一位,其余的优化策略都只是优化,而这里涉及到的是服务器,你要保证你的服务器能正常运转.

固然若是你是在淘宝的话,你就能够安心坐下来跟一群牛人谈论为何要忽略http对服务器的影响,由于咱们要记住:咱们是前端开发工程师,咱们是在 作前端优化,后台和咱们无关,由于咱们有足够强大的技术支持和硬件支持,当网站的技术发展到必定程度的时候,咱们的关注点应该向用户那里偏重,由于用户看 到的才是咱们最终要展现的,用户感觉到的体验和速度才是咱们要达到的速度,后台咱们作的再快,前台呈现慢了,咱们的服务器消耗少了,省钱了,可是用户却因 此抛弃了咱们,一切都是白费.因此,当后台足够支撑你不用你去考虑后台压力的时候,那就安心考虑如何作好前台的工做吧.

Yslow真的是一个误导人的工具,只要咱们按照它的原则对网站进行优化,确定最后能够拿到高分来欺骗老板,可是对于有些场景,这些优化每每是一种 对性能的破坏,例如淘宝网的商城首页,为了提升Yslow评分,全部的图片都采用了一个hostname,分数提升了,可是并行加载少了,不过商城首页都 是异步渲染和异步加载的,因此这种影响看起来并不明显.

商城首页有不少针对yslow的优化点,固然大多数优化是正确的,例如:导航那里,原本是所有写在页面里的,不要小看那个导航,里面有N个连接节 点,以致于从浏览器里复制源代码的时候浏览器会卡死,由于字节数太多了,这里yslow确定不会饶过的,后来咱们把导航作成了异步加载的,评分理所固然上 去了.可是这是淘宝网,咱们有足够的速度来提供足够的用户体验.若是你的服务器提供不了这种速度,也承受不了这种频繁的异步请求的话,这种优化就要慎重 了,延迟可能形成导航不可用.这也是针对场景来协调的.

淘宝如今在普遍部署CDN,CDN能够给咱们提供足够的后台资源保障,在CDN和后台环境不断万善的状况下,考虑重点应该更加专一于前台传输速度和展示解析速度的提高.

(3)   合并脚本和样式?

其实在前一篇文章里的那段讨论也是对于不一样应用场景的不一样考虑,

减小http请求数的一个方法,对于前端来讲,那就是合并脚本和样式文件,称为combo,经过将多个文件合并成一个文件,而后一次性传输到客户 端,这样能够减小http请求,的确是个有效的方法,甚至对于一些特殊的页面,例如首页,咱们把样式和脚本都写在了页面里,根本没有分离出来,他们不会产 生http请求,固然,也不会被缓存,这是被牺牲的代价.

为何咱们要这么作,由于首页的访问量很大?这样能够有效减小http请求数?恩,这只是一部分缘由,的确这样作有这样的好处,并且对于assets服务器不够强大的网站来讲,在并发量大的首页上实行这一套是颇有效的.

可是,淘宝访问量最大的页面并非首页,而是detail页面,也就是商品详情页!

这才是咱们讨论的重点,为何首页采用combo甚至写在页面里,而detail则按照正常的样式和脚原本引用.首页是相似静态的页面,detail则是应用型的.首页没有脚本,依然能够起到导向的做用,可是detail页脚本没有运行起来的话,甚至没法购买商品.

其实在这里这样讨论并不能明显看出问题所在,由于淘宝在这些方面也不是很成熟,detail页引用了大量脚本和样式,不少内容是多余的过时的.

这从本质上来讲表明两种网页类型,一种是内容型,一种则是应用型.对于内容型的网站,脚本并非很重要(甚至样式),由于没有脚本,用户仍然能够浏 览页面,只是可能有些效果看不到而已,因此咱们能够把脚本合并起来,一块儿放在body底部,在页面内容都加载完后,再一次性加载进来.而对于应用型的网 页,让应用跑起来才是最重要的,由于没有应用这个网页就变得没有意义了,这时候,按需加载脚本是一种趋势,咱们须要先把应用的基本框架和功能按需加载进 来,让它们分别运行起来,而不是一块儿等脚本加载完再一块儿初始化,咱们须要应用可以快速响应用户,

并且仍是说到CDN,当CDN变得足够强的时候,链接数已经不是瓶颈,咱们应该更多考虑怎么让网页更快的展示给用户,对于无需脚本也能够提供服务的 内容型的网页,将脚本放在页面底部,合并起来(减小链接数,咱们仍然须要减小链接数,在不须要太快的使用脚本的状况下),而对于应用型的网页,咱们须要尽 快让功能运转,甚至让他们一部分一部分按优先级初始化,这时候就要将脚本分开,按需加载.

(4)   减小http请求头

http头是个庞大的家伙,你打开taobao.com的首页,alert一下document.cookie,会发现淘宝网的cookie是如此庞大,甚至比小型网页都大,每次你请求淘宝的服务器都会往返一次这些数据,还有一些其余的头部信息,占用的空间也不小,可想而知这种消耗有多大.

而后其实自从用了CDN,这一切都无需考虑太多,由于CDN和淘宝主站不在一个域名下,cookie不会互相污染,而CDN的域名下基本是没有 cookie和头部信息的,因此每次请求静态资源的时候,不会带着主站的cookie处处跑,而只是传输资源的主题内容,因此这对于性能的影响在使用 cdn以后会变得很小.可是若是你的静态资源服务器和主服务器在一个域名下,那就要控制好cookie和其余头部信息的大小了,由于每次传送都会传送他 们.

最后

总之,优化原则不是绝对的,对于不一样的场景应该考虑不一样的侧重点,别人的解决方案对于你来讲不必定是最优的,应该针对本身的网站规模和类型进行适度的优化,不能盲目追求标准和最佳实践.