码迷,mamicode.com
首页 > 其他好文 > 详细

性能优化

时间:2015-07-27 01:46:59      阅读:148      评论:0      收藏:0      [点我收藏+]

标签:

性能优化:

  1. 网络

    - DNS解析(域名解析服务器)
    - CND(网络节点)
    - 延迟加载
    - 预加载
    
  2. 代码优化

    - HTML(布局)

    - CSS

    - 选择器、(减少复合选择器)
    - Sprites技术、(图片切割,将多张图片合并在一起,减少请求数量来达到优化功能)
    - 合并、(将文件合并后,导入次数会减少)
    - 压缩、(代码压缩后,文件变小,消耗的流量也会减少)
    - 重绘和回流、(重绘--呈现效果,回流--重新布局;有回流一定会重绘,但重绘不一定有回流;尽量减少回流次数)
    - 简单动画可使用ccs3代替JS
    - 图标字体、
    

    - JS

    - 节点缓存(减少DOM操作)、
    - 合并、
    - 压缩
    

    - image

    - 压缩、
    - 合并、
    - 转化为base64(字符串)
    
  3. 浏览器

    - 静态资源缓存

        -  CSS、
        -  JS、
        -  image、
        -  HTML
    

    - AJAX缓存

    - 本地数据库

    - 离线缓存

PS:

根据服务器端的响应header,一个文件对浏览器而言,有几级不同的缓存状态。

   1、服务器端告诉浏览器不要缓存此文件,每次都到服务器上更新文件。

   2、服务器端没有给浏览器任何指示。

   3、在上次传输中,服务器给浏览器发送了Last-Modified或Etag数据,再次浏览时浏览器将提交这些数据到服务器,验证本地版本是否最新的,如果为最新的则服务器返回304代码,告诉浏览器直接使用本地版本,否则下载新版本。一般来说,有且只有静态文件,服务器端才会给出这些数据。

   4、服务器强制要求浏览器缓存文件,并设置了过期时间。在缓存未到期之前,浏览器将直接使用本地缓存文件,不会与服务器端产生任何通信。

       我们要做的是尽量强制浏览器到第四种状态,特别是对于JS、CSS、图片等变动较少的文件。

 

性能优化

标签:

原文地址:http://www.cnblogs.com/yin-yi/p/4679062.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!