如何提升页面性能优化-20130909

1、版本号：什么是版本号

<script src="http://a.tbcdn.cn/s/fdc/index-beacon.js?v=130903" async="async"></script>

在后面的？v=130903就是版本号，每次跟新后更新版本号，如果不能新的话，游览器是由缓存的比如缓存是15天那么更的数据没有版本号的话就只能过15天等游览器重新加载的时候再把当前新的版本在加载进去，或许在15天已经跟新的很多遍了结果没有版本号，一次就更新到最后的一次会让用户有点摸不清楚头脑，要是更新变动的地方少还可以，要是多的话用户甚至都不会用了，那么加一个版本号，游览器就会在读取这个路径的时候把版本号也读进去，当发现当前的版本好与以前缓存里的版本号不同的情况下，就会更新出最新的版本，这样就得到了很好的解决，还有就是强制刷新，但是一般只有程序员在调试程序的时候会去用，用户甚至连知道都不知道。

2、什么是压缩html、css、js

就是省略带所有的空间、回车、和不必要的注释有一个专门压缩的工具这样可以给用户体验页面的时候带页面的速度变得更加的快，让用户减少等待的时间，就算是几毫秒也是时间。

.cc{asdasdadasdasdasdasd}.cc{asdasdadasdasdasdasd}

这个css的大小是50 字节

.cc{
	asdasdadasdasdasdasd
}

.cc{
	asdasdadasdasdasdasd
}

这个css的大小是64 字节

相同的内容却是不一样的大小，在这里面是大了14个字节要是同时1W个人访问的话就是要多出14W的字节，要是每天是10W人访问的话那么这个数字将会很大，还有分高峰期的时间，这样什么都要挂掉的。

3、将css和js归类放进同一个域名的静态服务器里面有什么好处

就是将css和js分别放入相同类别的静态的域名里，各用各的通道，互不影响，在发送请求中都是有先后顺序的，不然放入同一个域名可以避免这个事情，还能在一个发生了错误以后，不会影响到其他的内容，比如css有了问题，不会影响到js他他们全部都分开，互不影响。

<link rel="stylesheet" href="//g.tbcdn.cn/??tb/global/1.1.0/global-min.css,tb/fp/1.3.1/first-screen-min.css,tb/fp/1.3.1/second-screen-min.css?t=20130906">

在这里面就有3个css就是将css让如了相同类型的一个域名里面，要是其他的出错了话就不会影响他们，他们还是可以正常运行的。

4、数据预加载是什么

比如在页面跑一个汽车，需要1000的页面动画，那么前端是不是需要将这1000个页面动画都加载出来再去执行呢，要是以前的只有这个方法但是这个方法会给服务器带来很大负担，说不好一个用户两个用户还可以成熟，要是同时1000个用户同时点击了这个游戏怎么办，一个人是1000个页面动画，1000人在10分钟内同时在玩这个游戏，那么服务器在10分钟内要加载1000000个页面动画，这样很快就死掉了，所以就出现了预加载，当用户打开这个游戏页面，先加载出来的是前面两个页面动画，在用户玩完第一个页面动画后，开始加载第三个页面动画，当用户玩完第二个页面动画的时候，加载第四个页面动画，这就叫做预加载，同样都是加载1000个页面动画，对服务器的加载就减少了太多太多了。

5、icon标识图和背景图的合并为什么

大的图片我们就不用管他，因为到多数的时候都是要进行修改才放在html上面，当如果是背景图或者是标识图的话，一般都放在css里面因为页面是先加载图片，在加载内容这样就会让图片先跑出来，内容后跑出来，对于没有耐心的用户第一眼看不到自己需要的质料，说不定就把你给×掉了，要是把大部分占空间的标识图片或者是背景图片都在css里面那么先加载就会是内容然后再来加载这些图片，让用户第一眼看见自己要的内容，保留用户。

然后是合并既然是已经做到了让内容先加载还要做合并图片做什么，是为了服务器更轻松，为了让用户更快的体验到自己的页面的内容，当10个图片是1000kb，要是合并将10个图片都做到一个到图片里面的话，这个大图片可能是800kb那么用户每次打开这个网站的时候都会下一个1000kb另一个是800kb这样就不用想了，节省了20kb，那么来这个网站10就是200kb。

6、命名的要理

命名就是技术员为id和class命名的，命名这个为什么还要说呢就是取个名字，很简单，不是上面也说道了几个空格和回车标识符都占了那么多的内存就更加不用说命名，一个好的命名一定是其他技术员一看就明白的，而且还非常的简单，在能看明白的基础上，简化的你的命名，这样给服务器减少负担，也可以给后台人家减少不少的压力。

7、就是js的存放位置有什么学问

一般的js都是放在页面的头部，但是有的时候我们可以看到js 的路径被放到页面的尾部，这是为什么呢，那是因为如果把js放在页面的头部的话那么在加载完css后就去加载脚本语言，这样就减慢了你的html5内容展示给用户看的时间，这样哪怕是1秒有可能都有用户×掉你的页面，以后多不用，但是也有例外的那么就是看你要呈现给用户的是什么了，要是想呈现给用户一个很华丽的页面布局的话那么就把js放到尾部，因为放在头部的js会影响页面静态的呈现时间，要是做游戏的要让用户第一眼就被自己页面上绚丽的特效给迷住的话，那就把js放在头部因为让页面html5内容还没有完全展示出来的时候，你的js动态效果就会让用户的眼球离不开你的页面了。

评论

1 楼 萧远山 2013-09-11  

看看这篇文章
http://segmentfault.com/a/1190000000305457