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

关于调优这一方面,有很大的内容,有涉及到前端页面的调优;中间件的调优(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缓存起来
 
 

猜你喜欢

转载自www.cnblogs.com/mrchenyushen/p/12294999.html
今日推荐