laizimo/zimo-article

网页性能优化漫谈(三)【缺图】

laizimo opened this issue · 0 comments

laizimo commented

前言

上篇写到：
在网页性能优化的过程中，我们可以通过在服务器配置cdn或者缓存来达到优化性能的作用。
cdn有些专门的网站提供这类的服务，而缓存在整个过程中起到很大的作用，相信我们之后还能了解这个东西的用处。

正文

这篇文章主要了解一下压缩文件，以及一些写法上的规范来优化网页的性能。

  1. gzip压缩

    gzip压缩是http协议上的gzip压缩编码技术。首先，我们应该要清楚的是压缩可以达到怎样的目的。比如说纯文本内容进行压缩之后，大小可以缩小大概40%左右。大小减小了最直接的就是传输的速度将会加快，以及流量将会减少。尤其是对于大流量类网站来说，压缩文件内容大小，减少流量是很有必要的(毕竟省钱嘛！)，另一方面，压缩过的内容将减少存储空间。

    那一般gzip压缩需要如何实现呢？一般会在www服务器上配置服务，然后将压缩过的文件传输到客户端，由客户端进行内容的显示。比方说nginx服务器就可以进行gzip配置，默认会压缩text/html的文件进行压缩，当然了，对于图片资源也是可以进行压缩的，这需要进行一下配置。

    //first to open gzip service
gzip on
gzip_http_version 1.0;
gzip_disable "MSIE [1-6].";
gzip_types text/plain application/x-javascript text/css text/javascript application/x-httpd-php image/jpeg image/gif image/png;

    需要注意的是：

    1. gzip_http_version默认是1.1的，即只有http/1.1的协议才能进行gzip压缩。如果使用了proxy_pass进行反向代理，那么nginx和后端的upstream server之间是用HTTP/1.0协议通信的。如果使用nginx通过反向代理做Cache Server，前端的nginx没有开启gzip，且后端的nginx上未设置gzip_http_version为1.0，那么Cache的url将不会被gzip压缩。
    2. IE6对于部分的gzip压缩文件由兼容性的问题(其实，这个可以不谈，因为IE6感觉都不用了)。

    在HTTP1.1中使用gzip的方式：
    .
    请求头：

    Accept-Encoding: gzip, deflate

    响应头：

    Content-Encoding: gzip

  2. css、script标签位置规范的问题
    如何正确的使用css标签和script标签？css标签应该放在head标签内，而script标签应该放在body标签的末尾。

    <html>
    <head>
        <title>citerion</title>
        <link href="./test.css" ref="stylesheet"/>
    </head>
    <body>
         <!--dom内容-->
         <script src="./test.js"></script>
    </body>
</html>

    在搞清楚为什么这两个标签要这么去放置之前，我们先来了解一下网页文件的渲染过程：

    • 处理html标签构成DOM树
    • 处理css标签构成CSSOM树
    • 处理js文件，对于DOM树的样式进行重新计算
    • 将DOM树和CSSOM树进行合并成渲染树
    • 根据渲染树，计算每个节点的布局
    • 最后将渲染树绘制在浏览器界面上

    渲染图
    这里有还有两个点需要搞清楚的是：

    1. css在解析过程中是不会阻塞DOM树的处理的。但是，一旦将css文件放到html尾部的时候，整个情况就变了。在html文件的末尾，DOM树几乎已经处理完成了，但是，这个时候刚刚解析到css的标签，需要下载css文件，以及构建CSSOM树，这些都是需要时间的。如果在头部时，DOM树和CSSOM树可以一起处理；反之，在尾部，需要等待CSSOM的处理，整个DOM渲染的进程会被阻塞(这样做是为了避免渲染树的重新排版)，这样就会导致性能的下降。
    2. js文件又是另外的一种情况。js文件在处理过程中，会阻塞DOM的处理。如果将js放在头部，那么将会影响DOM的处理，而CSSOM的渲染完成之后，也将会影响整个DOM构建的时间。如果放在尾部，就可以节省之前阻塞的部分时间，这样可以进行网页的优化。

总结

该篇总结了优化网页的两种方法：1. gzip压缩 2. css文件放在头部、js文件放在尾部