网站优化经验(一) - 在浏览器键入url按回车后发生了啥

前言

本文的经验是小熊根据jser.in开发而总结,在当今这个社会上需要把握自己网站在客户端打开自己网站直到呈现的一幕的效率,在腾讯一面也特别考过我,于是总结下我所知道的经验,也希望跟各位分享更需要注意的地方。

原理剖析

我们要理解网站优化,但这的范围太广,包括各种方面,诸如后台优化、前端优化、SEO优化、UED等,那么咱先一步步理解,从底层来理解网站的底层实现,接下来我就总结在浏览器键入url按回车后究竟发生了啥,手头笔记挺多,没整理过,正好现在整理,有兴趣请耐心看完哈。
PS:鄙人文笔不好,可能比喻曲解或者理解错误,如果哪里错了也希望高手指点小弟,在此谢过。

按下回车后的一系列反应

  1. DNS解析
    首先咱遇到的应该是DNS解析(域名解析),客户端会从DNS服务器上指向对应的IP地址主机进行访问,如果是输入绝对地址的话(IP),则直接访问IP对应的主机(一般OS下还有个hosts文件,是可以改变本机DNS映射的,另外有些浏览器也会缓存DNS解析)。为了让新手能简单的理解,接下来的每行的粗体字是比喻,高手请跳过,请新手体会(鄙人文笔不好,要哪儿用词不当,请留言)。
    PS:DNS解析就好比你现在的房子租期到了,不过运气好的是你朋友提供一个新的住房给你,不过再怎么样咱还是逃不过搬家这关,同时你打算拿公司的车来运输(这比喻龊了点- -),并假设有足够的空间来运输,你是通过自己驾车过去(类似直接IP访问),还是把住房地址给搬家公司来搬过去(类似DNS解析后找到地址)。
  2. 进行HTTP协议会话
    与对应的主机建立TCP链接(由IP协议搭建起internet),然后进行HTTP会话(TCP协议相对HTTP协议属于更底层的部分唷),并且HTTP(1.1)协议不会断开链接直至浏览器跳转或关闭页面后,服务器主动断开HTTP协议。
    PS:搬家用的运输车辆完好无损咱才能运家具啊(在这里车没了那等于HTTP协议也没了 - -)。
  3. 客户端发送报头(请求报头)
    开始HTTP协议了,这时候浏览器会准备HTTP报头发送给主机,报头内容如下:

    1. Request-Line 请求方式(GET/POST) URI 以及 HTTP协议版本
    2. Accept 客户端能处理的数据范围(MIME)
    3. Accept-Encoding 客户端能抗得住的内容编码类型 (gZip、deflate)
    4. Accept-Language 客户端首选语种
    5. Connection 表示客户端能够保持HTTP连接
    6. host信息 标识请求主机名及端口(默认80是不显示的)
    7. cookie信息 客户端保存的一些信息
    8. UA-CPU && User-Agent 客户终端相关(CPU位版本、OS操作系统、浏览器)

    PS:你要告诉你的搬家公司,你的住宅地和家具所在处,让他们运过去。

  4. 服务器回馈报头(响应报头)
    客户端发送报头后,服务器会反馈一个报头给客户端,报头内容如下:

    1. Status-Line 俗称状态行或状态号,也听过有人称请求号,多见 200(一切正常)304(缓存)404(迷路了- -)
    2. Accept-Ranges 数据单位没啥说的(bytes)
    3. Age 缓存计算的基础值
    4. Cache-Control 缓存指令标志,告诉客户端啥条件允许使用缓存,内部包含max-age
    5. Connection Tcp请求连接
    6. Content-Type 实质本数据的MIME类型(直观上讲类似于你看到的*.css/*.js,不过是种通用标识)
    7. Date 发送HTTP请求的时间
    8. Etag 一种实体头标,类似于发送数据的唯一ID
    9. Expires 实体的有效期,到时不需要缓存 (Expires, Etag作为HTTP1.1的验证器所在)
    10. Last-Modified 该请求数据最后修改的时间
    11. Server 服务器类型 比如Apache / Nginx

    PS:搬家公司告诉你,地址已经找到了,家具也已经搬到了楼下。

  5. html文档开始下载(动态页面由后台生成,静态页面不解释)
    说到这里不知道亲分心了没 - -,确实有点枯燥,不过这是客户端与服务端建立请求桥梁必经之路,咱也无奈思密达啊,嗯如果这个时候服务器反馈给你200的请求代号,恭喜你,说明亲需要访问的地址已经正确找到了。(唐僧:“偶找到了西经之路”)
    PS:噢,搬家公司已经进到了你的家,并且准备把车内东西一步步搬到你的家里。
  6. 文档树建立,根据标记请求所需指定MIME类型的文件
    此时html文档正在下载ing,浏览器将根据正确的doctype来建立文档树建立,对标记进行结构包装,并对html代码内部的需要请求文件(css / js / image / ico / 其他富媒体 )再逐一向服务器作出请求(每个细小文件的请求重复3~4的动作)。
    PS:搬家公司现在正忙碌着把一个个物件的搬到你家。
  7. 文件就位
    请求的文件一旦在html文档就位(此时文档可能尚未下载完成),便会根据其类型正确执行,比如css文件一旦就位,浏览器将会根据其样式表的规则来呈现对应选择器结果的标记,js文件一旦就位则会执行本身的代码,img就位则会呈现自身。
    PS:搬家公司正在根据你的要求把物件放到正确的地方(CSS),然后插上电源(JS)以保证可以运行,把你需要的挂画挂好(img + CSS)。

噢,这里已经差不多了,恭喜你能耐着性子看到这里,那么这些个原理一旦你能理解了,接下来的优化就好讲了。

第1~2条只是让我们了解传输的必经之路,平时或许你碰不上,姑且当长见识理解就好了;

第3~4条通常会抓包的人会很了解,这对网络环境及流量大小及服务器回馈速度都息息相关;

第5条主要是后台优化上,要生成一个html静态文档,避不了各种sql各种函数、循环的执行,以保持最终代码输出;

第6条跟数据大小还有需要请求的文件数量(同域浏览器请求并发数相关),如果你用firebug或其他能查看本站网络状态的插件,可以看到本站只有2个js、1个css、和7个用于css 背景的img等;
所以这里属于前端优化,请尽量减少你的js/css/image等的请求数量,通常的方法有以下几点:

  1. js应合并&&压缩到一个文件上(本站2个js一个是本站应用js,一个是ga用的js);
  2. css文件也应该合并并压缩到一个文件上;
  3. 背景 image可以使用sprite对齐进行图片合并,再配合css背景负向定位来显示;
  4. 另外小的css 背景图片在IE8+以及其他现代浏览器下可以使用base64来进行储存。
    (有人又要问IE6/7怎么办?听说有mhtml的手法吧,不过很遗憾的说微软似乎更新了针对mhtml协议的补丁,非本地下已经不能正确显示图片(本人测试得出),这在99css上秦歌那边说过了。PS:微软:“mhtml协议存在漏洞,现在除了本地以外封了 - - ”)
  5. 这里还有一个值得前端优化的地方,那就是缓存的研究:
    在客户端执行上述第三步客户端发送报头时,会优先查看本地缓存,具体根据这个资源当时的响应报头来查找相关信息,将核算max-age来确定是否允许使用缓存,再者验证是否过期,具体计算根据响应报头的Cache-Control 来计算,随后是Expires的验证,之后再验证浏览器自身启发式缓存计算公式,关于公式这里就不讨论了,如果没有过期,则从自身资源提取所需资源,标识304的状态行并不再从服务端请求数据,否则过期或者浏览器禁用缓存的情况下,将重新向服务器进行HTTP请求。

PS:关于不懂怎么压缩以及合并css、js文件和使用base64图片的亲们,后续会放出文章。

第7条中主要讲的是css以及js,我们常说css放置于头部,js放置于尾部,这样对文档加载好,为啥呢?这里就说了~css一旦就位,浏览器将其规则获取并转交给呈现引擎来对应规则呈现元素,这在未下载完成的页面中会很明显,如果放在头部,每正确获取一段html代码,则会根据其css样式来呈现其标记,如果你放在尾部,在网速慢的访客眼中,会有几秒钟的页面裸奔现象,这也就不奇怪解释文档逐步下载以及解析对应MIME文件的关键了;

再者是js文件放尾部,为什么?放在头部如果你的js文件可能比较大,丢个夸张的值,如果是2MB的js文件,放在头部,你的html加载会先等待js文件的请求加载(同步,并发),而使得内容在访客眼前呈空状态,自然观感上就会慢,另外如果js代码并没有在ready后执行代码,可能导致某些元素找不到而报错,所以放到尾部何乐而不为呢?

(如果亲用了ready/load手段则相安无事),这之后css的执行效率以及js的执行效率了,今天先讲到这里。码着码着就过了几个小时,在家宅着滴偶伤不起啊啊 - -。

  1. avatar
    _proto#509

    讲得好,但是例子欠妥。希望楼主想个更好的例子。

  2. avatar
    Spout#508

    虽然比喻有点牵强,但是都说到点子上拉,希望你能更深入下详细讨论哦~

  1. 目前还没有trackbacks.

  2. Trackbacks被禁用了

发表评论 进楼快捷键: ctrl+Enter取消回复

电子邮件地址不会被公开。

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>