web前端性能优化和浏览器兼容问题的基本总结

优化一般分三个阶段：需求阶段，设计阶段，实现阶段

1.需求阶段的优化：需求是解决问题的手段，了解需求的前提是对业务的深入了解，第一，为了达到同样的目的，解决同样问题，也许可以有性能更优（消耗更小）的办法。即不改变需求本质的同时，又能达到性能优化的效果；第二种情况，有损的优化，即在不明显影响用户的体验，稍微修改需求、放宽条件，就能大大解决性能问题。

2，设计阶段：高手都是花80%时间思考，20%时间实现；而新手一开始写起代码来很快，但后面是无穷无尽的修bug，而我之前就深有体会。设计包括：架构设计、技术选型、接口设计等等。架构设计约束了系统的扩展、技术选型决定了代码实现。编程语言、框架都是工具，不同的系统、业务需要选择适当的工具集。如果设计的时候做的不够好，那么后面就很难优化，甚至需要推到重来。

3。实现阶段：实现是把功能翻译成代码的过程，这个层面的优化，主要是针对一个调用流程，一个函数，一段代码的优化。各种profile工具也主要是在这个阶段生效。除了静态的代码的优化，还有编译时优化，运行时优化。后二者要求就很高了，程序员可控性较弱。

从DOM结构和标签上来优化

• 使用语义化的标签，代码清晰简洁；

• 减少Dom操作，增加渲染速度；

从CSS样式上来优化

使用scss，less等嵌套的方式书写css

尽量抽取css的公共样式

使用精灵图（CSS Sprite）把同类图片合成一张，减少图片http请求；

从js上来优化：

减少dom操作，封装常用的Js函数

其他方面进行优化：

1.图片多媒体的压缩（避免直接使用原始高清图片）

2.使用CDN加速（提高网页加载速度）原理基于服务器缓存，缩短传输距离，具体的实现自行百度

3.减少DNS查询，（DNS主要用于映射主机名和IP地址好比如人的身份证）之前经常听到DNS解析，首先了解到的DNS在应用层

二。浏览器兼容问题及处理方法

常见的方法基本都是对css兼容进行一系列的格式化，基本我们做的每个项目的css文件都有

还有就是一些js方法的兼容，具体网上能解决