文件位置对性能大影响

高性能网站

 

1,css样式表放在顶部比在尾部的优点:

    a.放在顶部能够防止白屏和无样式内容的闪烁---浏览器的内容都是逐步呈现,放在底部时,样式变化带来重绘,所以浏览器会阻塞内容逐步呈现,直至样式表下载完毕.

    b.css加载方式:link优于import.一个style块能够包含多个@import规则,但@import规则必须放在因此规则以前;@import规则会致使组件下载时的无序性,可能致使样式表最后下载.

    c.HTML规范: link只能出如今文档的HEAD节点中,为了兼容老旧页面,放在head节点外仍然可以呈现.

 

 

2.js脚本

 

    a.脚本会阻塞其后内容的呈现

 

    b.脚本会阻塞其后组件的下载.

 

    c.延迟脚本(Defferred),defer属性代表脚本不包含document.write,浏览器能够一步加载(但有此属性的脚本,必定能够放在页面的底部.),在ff中,此属性不起做用,依然会阻塞.

 

       注:js,css代码精简,混淆;  gzip压缩对代码的 精简最明显.

======================

    d.然而这里还有一个问题须要注意，对于外部脚本，还涉及到一个脚本下载的过程，在早期的浏览器中，JavaScript文件的下载不只会阻塞页面的解析，甚至还会阻塞页面其余资源的下载(包括其余JavaScript脚本文件、外部CSS文件以及图片等外部资源)。从IE八、firefox3.五、safari4和chrome2开始容许JavaScript并行下载，同时JavaScript文件的下载也不会阻塞其余资源的下载(旧版本中，JavaScript文件的下载也会阻塞其余资源的下载)。

注：不一样浏览器对于同一个域名下的最大链接数有不一样的限制，HTTP1.1协议规范中的要求是不能高于2个，可是大多数浏览器目前实际提供的最大链接数都多于2个，IE6/7都是2个，IE8提高到了6个，firefox和chrome也是6个，固然这个设置也是能够修改的，详细内容能够参考：http://www.stevesouders.com/blog/2008/03/20/roundup-on-parallel-connections/

    e.所以正常状况下，JavaScript脚本的执行顺序也是从上到下的，即页面上先出现的代码或先被引入的代码老是被先执行，即便是容许并行下载JavaScript文件时也是如此。注意咱们这里标红了"正常状况下"，缘由是什么呢？咱们知道，在HTML中加入JavaScript代码有多种方式，

 

 

======================

 

缓存:

    1.内联样式和脚本没法进行缓存,可是内联的内容加载速度相对更快.所以,适合使用内联方式的例子是主页;

 

    2.experie,cache-control

 

    3.dns解析:  Keep-Alive很重要,默认状况下,一个持久的TCP链接将会一直使用,直到其空闲1分钟为止.因为连接是持久的,所以无需DNS重复查找.

 

    4. 200(From cache)是直接点击连接访问，输入网址按回车访问触发(这两种状况都不会有Etag)；
    304(Not Modified)是刷新页面时触发，或是设置了长缓存、或当Etag没有移除时触发。

先说说304
当你第一次请求一个资源的时候，server会同时生成并返回一个字符串在响应头里，叫Etag。
浏览器接到资源后，缓存资源的同时也会把这个Etag保存下来，成为If-None_Match 。Etag能够看做是一个资源的惟一标识，当你第二次请求这个资源的时候，请求头里会带着这个Etag,server会拿server该资源如今的Etag跟请求头中的If-None_Match作对比，而后看看If-Modified-Since过没过时，若是同样，直接告诉他：你就用本地的吧，我没变，就不给你返回了。因此返回了304，304就是这样。

再说说200 From Cache 这个虽然是200，但他根本就没有跟server作交互，直接拉的本地缓存。 上边已经说了From Cache的触发条件，但若是想一直持续From Cache不想304怎么办？ 能够在Server端配置移除Etag.