【总结】网站性能分析-前台优化

背景：对于一个大型网站来说，前台的性能直接影响用户的操作体验，直接影响的就是网站的用户活跃度和业务质量。那么如何评测一个网页的性能至关重要。虽然不能得知所有用户访问一个页面的加载流畅情况，但是至少要满足80%的用户操作可用性。从一个页面让用户访问开放的渠道比较多，签入到app移动端,wap端，web端等端应用场景，一般注重移动端性能场景较多，毕竟目前用户手机的内存和性能都比pc小的太多。所以解决移动端访问页面的性能是重中之重。我们从快速从6个维度来衡量一个页面的标准来看，能够解决大部分的网页性能问题。然后再从具体的标准中，去处理相关优化。也就是第二章，网页优化所写的主要内容。后面有几个工具可以简单参考使用。

衡量标准

1.首次加载，弱网<200k,强网<300k，页面二次加载<50k。
2.请求数<20
3.wifi条件下页面渲染时间<1s
4.页面帧率>50
5.弱网Q值配置，
6.资源压缩与域名收敛。

网页优化

content优化与分析

1).减少https请求，尽量将数据在服务端尽量少的接口中返回。
2).减少DNS查找。即页面资源不同的域名尽量少。
3).避免URL重定向。在重定向之间，页面不会下载任何资源，整体到页面渲染延迟较高。
4).尽量让ajax使用缓存，缓存可以是写入本地的缓存也可以是自己自定义的缓存区域，减少没有必要服务端的请求。
5).尽量减少DOM元素，避免不必要的资源下载。
6).避免请求之后返回到404，避免浪费服务器资源。

cookie优化与分析

1).减少没有必要的cookie，以减少传输网络流量
2).静态资源请求以及不需要cookie的请求，尽量减少或不带上cookies。

css优化与分析

1).尽量将css样式文件放到head里面。
2).避免使用css表达式
3).js/css尽量独立成外链文件，避免融合在html。外链的文件可以利用缓存，避免做不必要的请求。
4).js,css脚本尽量压缩，避免多余的网络传输。
5).尽量减少复制或者移除的js,css，减小请求流量
6).避免使用阿尔法图片过滤器，由于是针对每个元素级别的处理，会增大消耗内存。

images优化与分析

1).尽量使用符合要求的图片资源。即不要加载过大的图片，然后使用元素缩小图片尺寸。
2).常用的不变更的图片尽量使用缓存技术处理。避免不必要的请求。

javaScript优化与分析

1).js尽量放到html底部，以保证整个页面会提前被渲染。
2).js/css做成外链文件，可以被浏览器缓存利用，减少不必要的服务端请求。
3).减小js,css文件大小，即压缩文件，减小网络传输。
4).尽量避免，复制或者移除的js,css内容，优化样式或者脚本大小。

Server优化与分析

1).尽量将响应的内容部署到地址位置不同的机器，即CDN上。增加响应速度。
2).避免空的图片链接。减少网络流量。
3).将图片，脚本等静态资源在Headers里面标记过期时，缓存数据，避免每次都需要请求。
4).合并响应请求，开启gzip压缩。
5).开启ETags(entity tags)，避免无用的网络请求。
6).尽量使用Get模式的ajax请求，cookie不能太长，最长url在IE6不超过2kb,减少不必要的字节传输，post模式会带有其他信息。

常用工具

页面性能评分工具

1.Yslow

图片合并工具

1.图片合并:css sprite(css精灵)+css sprite样式生成工具
.bg_sprite{background-image:url(/整图地址); background-repeat:no-repeat}
引用该类 .. 然后在元素中逐一定义背景坐标 .. 以下为关键属性 ..

ico1 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}

压缩脚本工具

1.压缩js工具,Minify JS