yahoo 前端分析要点

业务层面的逻辑

如何去发现前段页面设计的问题？因为设计不好导致的用户体验差，访问速度不好，浏览器的速度主要在渲染引擎和脚本解析速度方面，这两个弄好了就好，排除了网络关系，你网络本身慢的话就没法了uc浏览器核心竞争力：快！为毛呢？因为它解析处理页面的时候，遇到图片就不去获取图片，速度当然快，或者图片它尽可能的使用小容量图片，

缩略图，或者只加载一部分，速度就起来了哇，速度快了，流量也减小了

所以uc的成功不在于渲染引擎什么的多牛，而在于它主动放弃了页面渲染的一些东西，没有全部去加载和渲染，一招鲜把

pc端的就不会这么考虑，都是原始的去加载，手机上的页面好多都是转码的，比如百度，就是这样，很多设计者不愿意转码，因为这样会破坏格式

注意，顺序的排列也会影响速度，css为什么放在最开始呢？因为它是渲染最早的一部分，你把它放最后，啥都整完了它再来加载渲染就慢了哈，尽量把css和图片尽量都放前面，因为图片会导致重绘，js脚本就不存在太多的渲染加载，它只是一些动态处理什么的，它就可以放后面就好了。这都是前端分析的考虑了，见下：

yahoo前端分析要点：共12点，纯粹前端视角，客户端，浏览器端，完全不care服务器，数据库这些个，但首先要理解网络协议，浏览器工作原理，

1.减少http请求的数量，合并，把所有的css集中到一个css或js，图片合并到一个里面，

2.尽可能的用好缓存，浏览器缓存机制，浏览器会把访问过的静态资源保存起来，当你下次再去访问的时候就是现成的，可以减少不少请求数量，但是有利就有弊，你存多了，以后你更新了新的东西，客户端未必会去加载，反而还是用的之前的，哈哈

3.利用GZIP压缩，只针对文本类资源是有效的，文本类资源：js脚本，html脚本，css脚本，能压缩70%多，图片就不行了，因为图片君已经被压缩了哈

4.把css文件放在html的开头，css文件主要是排版，渲染的，尽可能把它放在头里

5.尽可能把js放在html的结尾，js是页面渲染完了之后进行的一些动态效果，页面渲染完了才会去调用js，你就可以放后面

6.尽量的避免css表达式，是一些逻辑处理，这样就加重了浏览器的负担

7.尽量的减少dns查找，dns域名解析的，用来把域名解析为ip地址，dns本身也消耗时间，尽量在网页中不要dns，所以我们的页面尽量的使用ip地址，不要用域名

8.尽量使用js压缩，比如定义一个变量：var namename，我们直接var n，这样就ok了，字符减少了，容量小了

9.尽量避免重定向，redirect，比如一般你去百度：www.baidu.com.而你访问的实际是一个目录，它的真正网址是www.baidu.com/，用户没有加斜杠，浏览器帮你加了，重定向这就是，我们要注意的是，在网页中的超链接要尽量的减少重定向，加斜杠哇哈哈

10.去除重复的脚本，加减乘除，你可以整出四个函数，也可以只弄一个，多传递一个参数就ok。

11.尽量使用Ajax请求，Ajax局部刷新，我需要什么就请求哪一点，其他的我不去重新加载，就是不需要页面刷新就能获得我需要的东西，比如你注册一个网站，输入一个用户名，这个用户名已经被注册了，ajax就直接加载这一点提醒你，不对！而不是你全部写完都加载了，再去检查去提醒你，这样就节省了很多资源，

12.使用CDN，内容分发网，比如你成都去访问北京的服务器，你一个个去路由就很要命，cdn就是北京这个总服务在各省建立内存缓存服务器，这样你就直接成都到成都，表面上你还是访问的北京，技术细节不需要管，你直接花钱买运营商的服务即可

利用httpwatch，yslow去进行前端分析

httpwatch：

1.time chart：前端性能分析的工具，它是把一个http服务从发起都结束里面的每一步都细分出来，并且分别统计每一步所用的时间，便于你更好的去发现问题，优化你的页面

阻塞：浏览器预处理的时间：1.缓存查找时间（优先去本地找资源）2.浏览器等待可用网络连接，一个请求浏览器最多可用2个线程去访问，所以当你的请求多了，有些就只能等待啦

DNS LOOKUP：域名解析时间，

连接时间：建立http连接的时间

send时间：发请求给服务器的时间

wait时间：基本就是服务器处理的时间，可用用之来预估服务器的性能，时间处理能力，找个时间*0.9，就是服务器处理的时间

文本类资源压缩：

文本类资源都有哪些：html，css，js，页面的内容

过程：

1.不牵扯算法，就是简单的去减少内容本身的大小，去除不必要的字符，空格，不要注释了，变量名，函数名用简单的短的名字等等

2.使用GZIP在传输过程中压缩