性能优化

1.前端性能优化的方法:

    1)请减少HTTP请求

    2)理解 Repaint 和 Reflow(也就是重绘和重排)

    Repaint就是一个元素的外观被改变。如果Reflow的过于频繁,CPU使用率就会噌噌的往上涨

3)减少对DOM的操作:提高网页性能就是要降低“重排”和重绘的频率和成本,尽量少触发重新渲染

4)使用JSON格式来进行数据交换:json轻量级别的数据交换格式,独立于语言的文本格式,同时json是原生JavaScript原生格式,意味着在JavaScript中处理json不需要任何特殊的api或工具包。

5)高效使用HTML标签和CSS样式

6)使用CDN加速(内容分发网络):"其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络,CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。

7)将css和js放到外部文件中引用,CSS放头部,JS放尾

8)精简CSS和JS文件

9)压缩图片和使用图片的Sprite技术

图片压缩的方式有:缩小图片分辨率、改变图片格式、降低图片保存质量

图片精灵(Sprite)合并成雪碧图减少图片的请求数量

10)注意控制Cookie的大小和污染:

因为Cookie是本地的磁盘文件,每次浏览器都会去读取相应的Cookie,所以建议去除不必要的Coockie,使Coockie体积尽量小以减少对用户响应的影响;

使用Cookie跨域操作时注意在适应级别的域名上设置coockie以便使子域名不受其影响

Cookie是有生命周期的,所以请注意设置合理的过期时间,合理地Expire时间和不要过早去清除coockie,都会改善用户的响应时间。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • AJax 优化 缓存 Ajax 请求尽量使用GET, 仅取决于cookie数量 Cookie 优化 减少Cooki...
    KeKeMars阅读 9,397评论 5 89
  • 性能优化的话大致有以下几个部分:加载优化图片优化CSS优化脚本优化渲染优化 加载优化 1.减少http请求 基本原...
    进击的蒸汽机阅读 426评论 0 0
  • 前端的页面主要包括xhtml,css,js。其实xhtml就是现实中所谈到的内容,页面的内容:文字,图片,flas...
    shonn_zhang阅读 433评论 0 7
  • 前端优化是复杂的,针对方方面面的资源都有不同的方式。那么,前端优化的目的是什么? 1.从用户角度而言,优化能够让页...
    西瓜w阅读 313评论 0 0
  • 本文首发于kmac007.me 资源压缩合并,减少HTTP请求 由于HTTP是无状态协议,意味着每次HTTP请求都...
    kmac007阅读 567评论 1 1