性能优化
性能优化的层次:
按照我的理解可以分为需求阶段,设计阶段,实现阶段;越上层的阶段优化效果越明显,同时也更需要对业务、需求的深入理解。
- 需求阶段
需求是为了解决某个问题,问题是本质,需求是解决问题的手段。
需求讨论的前提对业务的深入了解,如果不了解业务,根本没法讨论。即使需求已经实现了,当我们发现有性能问题的时候,首先也可以从需求出发。
需求分析对性能优化有什么帮助呢,第一,为了达到同样的目的,解决同样问题,也许可以有性能更优(消耗更小)的办法。这种优化是无损的,即不改变需求本质的同时,又能达到性能优化的效果;第二种情况,有损的优化,即在不明显影响用户的体验,稍微修改需求、放宽条件,就能大大解决性能问题。PM退步一小步,程序前进一大步。
需求讨论也有助于设计时更具扩展性,应对未来的需求变化.
- 设计阶段
高手都是花80%时间思考,20%时间实现;新手写起代码来很快,但后面是无穷无尽的修bug
设计的概念很宽泛,包括架构设计、技术选型、接口设计等等。架构设计约束了系统的扩展、技术选型决定了代码实现。编程语言、框架都是工具,不同的系统、业务需要选择适当的工具集。如果设计的时候做的不够好,那么后面就很难优化,甚至需要推到重来。
- 实现阶段
实现是把功能翻译成代码的过程,这个层面的优化,主要是针对一个调用流程,一个函数,一段代码的优化。各种profile工具也主要是在这个阶段生效。除了静态的代码的优化,还有编译时优化,运行时优化。后二者要求就很高了,程序员可控性较弱。
代码层面,造成性能瓶颈的原因通常是高频调用的函数、或者单次消耗非常高的函数、或者二者的结合。
从DOM结构和标签上来优化
-
使用语义化的标签,代码清晰简洁;
-
减少Dom节点,增加渲染速度;
-
使用W3C标准书写闭合小写的标签;
-
给图片和table指定宽高,避免缩放;
-
防止src和href值为空,当为空时,浏览器会把当前页面当做属性值重新加载;
-
ss在头部位置,js在body底部位置;
<从CSS样式上来优化