zoukankan      html  css  js  c++  java
  • 《高性能网站建设指南》笔记

    js文件什么时候合并?

    css和js到底是内联还是外部引入?

      前者速度快,但没办法缓存,没办法多页面共用;后者速度慢,需要额外的请求,但可以缓存,多页面共享。

      两全其美的办法【内联+预加载+cookie标志判断】:用户第一次打开网页时,没有cookie,服务器返回包含内联css和js的页面和cookie,速度很快,页面空闲下来后执行预加载;第二次打开有cookie了,而且第一次执行了预加载,现在可以返回一个带外部文件的html了,因为之前预加载了,所以速度很快。注意,第一次预加载的时候,要处理内联代码和预加载的代码,防止两者冲突。解决冲突的方式如下(主要是处理js,因为css重复的话没问题,但js重复执行的话可能会造成问题):

      1.创建一个不可见的iframe,里面是空白。iframe标签onload之后,往里面的dom添加script标签或者link标签,因为iframe内外环境是隔离的,所以不会有影响

      2.使用preload、prefetch等属性

      3.最麻烦的方式,处理冲突的逻辑嵌入到业务逻辑中。标志一个全局变量,来判断代码有没有执行过。

    流量跟踪

      对于站内的网站,可以使用refer来的统计。

      但对于站外的地址,就不能使用refer了(没办法获取发给其他服务器的请求),可以对出站地址进行包装,如http://www.mtsite.com?url=www.baidu.com 访问这个地址,实际是访问了站内的网站,进行统计后,再302重定向。

      跟踪出站流量,除了以上重定向的方式外,还有其他变种,本质都是把跳转过程从服务器移到了前端,用js来实现实现跳转而已,方式如下,重写a标签的点击事件(return false),发送请求记录站外的地址(ajax方式、new Image()方式),(回调事件中、img的onload或onerr中)再跳转。

      以上要注意的一点是:a标签如果没有指定target,跳转会导致当前文档被卸载。所以在这种情况下,必须要把location.url=xxx;放到回调事件中执行

      使用重定向的一个目的是:美化url。访问短的好记的url,然后重定向到长的url去。

    配置或者移除Etag

      etag的值与文件大小、修改时间以及inode(或者说文件所在的硬盘序列号)有关。集群服务器中相同的文件会对应不同的etag(inode、硬盘序列号不同)。n台文件服务器中,能命中304的几率只有1/n,效率低下。解决办法是:配置或者移除etag。

      配置etag:对文件服务进行配置,是etag仅仅与文件大小、修改时间相关,这样一来,多台服务器对于同一个文件也能生成同一个etag了。

      移除etag:不使用etag,而使用last-modified来代替。这其实和配置etag的思路一致的,即多台服务器对于相同的文件都能成功标识

      前者标识文件的修改时间和大小,后者标识文件的修改时间。所以总结起来移除etag是最好的选择。


    1.浏览器对同一个主机有固定的并行下载数,如果页面的资源来自于多个主机,则下载的效率可以提高(脚本除外,不管是否来自同一个主机,下载和执行脚本的时候总是阻塞其他资源的下载和dom渲染),但dns查找所消耗的时间也会增加。除了可以增加并行下载数,还可以降低无谓的cookie流量(访问文件也会带上cookie,不同主机的cookie不共享)

    2.典型的预加载图片方式:

    onload = function(){
         if(document.images){
                new Image().src = "xxx.jpg";
         }  
    }

    3.使用iframe是一种清除广告系统与当前页面系统的简单手段,但会增加额外的http请求

  • 相关阅读:
    Java StringBuilder、基本类型的包装类
    立个Flag不学好PHP誓不罢休
    LAMP搭建 转
    CentOS使用yum源中自带的rpm包安装LAMP环境
    CentOS RedHat YUM 源扩展补充(32位、64位均有)
    解决phpmyadmin上传文件大小限制的配置方法
    lanmp v2.5一键安装包发布(包括lamp,lnmp,lnamp安装)
    图像处理 jpg png gif svg
    NAT模式/路由模式/全路由模式 (转)
    网页制作中绝对路径和相对路径的区别
  • 原文地址:https://www.cnblogs.com/hellohello/p/7685812.html
Copyright © 2011-2022 走看看