关于系统调优之前端调优_

关于调优这一方面,有很大的内容,有涉及到前端页面的调优；中间件的调优(Tomcat,Nginx,DNS等)；数据库的调优(分库分表,集群,Redis,索引等)；以及很重要的后端接口的调优。

今天做下笔记复习下前端页面调优的相关知识点，涉及到ySlow这个工具，具体这个工具详细安装教程就不放了。。。。

Install_url：http://yslow.org/

 

Slow主要针对前端的:content、cookie(后台相关)、css、images、javascript、server(后台相关)六大方面评分，并提出相关建议

A-优秀、B-可接受、C-及格、F-极度不合格

 

1、Make  fewer HTTP  requests（尽可能的减少http请求）：

     例如要发送一个10K的请求，尽量一次性请求10K数据量,避免同时发送10条的1K请求(因为这样会涉及到并发)

 

2、Use  a  Content  Delivery  Network(CDN)：

      因为在同一个域名下的图片,最多只能同时加载6张图片，所以尽量把图片/CSS/JS放在CDN服务器上(静态资源服务器)  -不为同一域名

 

3、Avoid  empty  src or href (避免空的src和href)：

      因为如果是空的src和href的话，浏览器会再次向服务器发送src/href空的资源链接请求--<img src=''''''>,<a href=''>，导致耗时

 

4、Add  Expires  headers(加一个缓存过期时间)：

      一般静态资源(gif/png/js/css)，因为浏览器空间有限,所以浏览器会定时清理缓存，所以要尽量避免占用空间，设置缓存过期时间

 

5、Compress components with gzip(对某些资源/文件开启gzip压缩)：

        

    上面例子，红框内就是提示这个JS文件没有开启gzip压缩

 

6、 Put  CSS  at  top(css 文件尽量放在上面/头部)：  

     因为浏览器的渲染顺序是从上到下的，把css放在头部，浏览器会根据css提前渲染样式，这样看页面加载的时候不会挤在一起，加载的时间也很快

 

7、Put  JavaScript  at buttom(js文件尽量放在下面/底部)：

    因为js文件请求的时候，会独占资源，也就是发送js请求的时候，浏览器不会同时请求其他资源(因为JS文件会对页面进行操作-页面冻结)

    像平时浏览器加载页面的时候，页面已经差不多成功显示了，但左上角的加载图标还在旋转，那其实就是在加载JS文件，这时页面功能却已经可以使用了

 

8、Avoid   CSS  expressions(避免css表达式)：

    跟前端知识强相关,跳过

     

9、Make   Javascript    and   CSS(避免把JS，CSS写在HTML里面)：

    如果把Js，css写在html里面，会增加页面的大小,可能会导致请求时间加长、反之如果把Javascript、css单独写成文件，浏览器会去缓存这些静态资源的，就是说用外联的形式，把这些静态资源给缓存住。

 

10、Reduce    DNS    lookups(降低DNS的查找时间)：

    一般浏览器有缓存的话，查找速度就会很快

 

11、Minify    JavaScript    and    css(最小化js和css的体积)：

    很好理解，体积越小，请求速度越快，开启了gzip，速度更快

 

12、Avoid    URL    redirects(避免URL的重定向)：

    因为页面发生重定向的时候，页面会出现白板现象，所以页面的重定向跳转动作会降低用户的体验感，所以要减少避免url的重定向

 

13、Remove   duplicate     JavaScript    and    css(避免js文件和css文件的重名现象)：

    因为如果js/css文件存在重名的情况下，浏览器还是会重新发一次请求到服务器，这样就发生了请求重复，浪费请求时间的现象

 

14、Configure    entity    tags(ETags)：

 

15、Make    AJAX    cacheable(尽量把ajax请求缓存下来)-console：

   总的来说，ajax请求就是异步调用，局部刷新，例如:百度首页，xhr

   ajax也是可以被缓存的，ajax是通过js去发送请求，后台加载数据，提高用户体验性，但不保证ajax的请求速度

 

16、Use  Get  for   AJAX    requests(用get方式发送ajax请求获取数据)：

    因为浏览器Post请求发送分两步，第一步先发送headers，第二步发送data，

    但是，如果是Get请求的话，会一次性发送headers信息和data信息，所以用Get会比Post更快

 

17、Reduce   the   number   of    DOM    elements(尽量减少dom元素)

   因为页面上的元素越多的话，渲染起来越慢，响应页面体积越大，如果页面元素实在是没办法减少，那就要做到DOM层级简单

 

18、Avoid HTTP 404 (Not Found) error

   因为404会损耗系统资源,最好是截获404异常信息，尽量抛出站点定制的异常

 

19、Reduce cookie size(减少cookie的大小)

   因为每一个请求都会带上cookie向服务器提交，cookie如果太大，就会影响传输的速度，最终影响页面的响应速度

 

20、Use cookie-free domains(减少静态资源的cookie的使用)

   默认所有的请求都携带cookie的，类似一些静态资源，因为静态资源是公共资源,谁都可以访问的，所以就不需要cookie做一些身份验证/个性化定制

 

21、 Avoid AlphaImageLoader filter

   跳过，不知道

 

22、Do not scale images in HTML

  避免图片的体积过大，因为如果图片过大的话，还要css去改变大小，所以应该是前端要多大图片，服务器就应该返回多大图片

 

23、Make favicon small and cacheable(减小favicon的体积)

  让favicon尽可能的小，并且加max-age缓存起来