《高性能网站建设指南》笔记

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请求

原文地址:https://www.cnblogs.com/hellohello/p/7685812.html