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

性能优化

性能优化的层次：
　　按照我的理解可以分为需求阶段，设计阶段，实现阶段；越上层的阶段优化效果越明显，同时也更需要对业务、需求的深入理解。

1. 需求阶段

需求是为了解决某个问题，问题是本质，需求是解决问题的手段。

需求讨论的前提对业务的深入了解，如果不了解业务，根本没法讨论。即使需求已经实现了，当我们发现有性能问题的时候，首先也可以从需求出发。

需求分析对性能优化有什么帮助呢，第一，为了达到同样的目的，解决同样问题，也许可以有性能更优（消耗更小）的办法。这种优化是无损的，即不改变需求本质的同时，又能达到性能优化的效果；第二种情况，有损的优化，即在不明显影响用户的体验，稍微修改需求、放宽条件，就能大大解决性能问题。PM退步一小步，程序前进一大步。

需求讨论也有助于设计时更具扩展性，应对未来的需求变化.

2. 设计阶段
   　　高手都是花80%时间思考，20%时间实现；新手写起代码来很快，但后面是无穷无尽的修bug

设计的概念很宽泛，包括架构设计、技术选型、接口设计等等。架构设计约束了系统的扩展、技术选型决定了代码实现。编程语言、框架都是工具，不同的系统、业务需要选择适当的工具集。如果设计的时候做的不够好，那么后面就很难优化，甚至需要推到重来。

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

代码层面，造成性能瓶颈的原因通常是高频调用的函数、或者单次消耗非常高的函数、或者二者的结合。

从DOM结构和标签上来优化

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

• 减少Dom节点，增加渲染速度；

• 使用W3C标准书写闭合小写的标签；

• 给图片和table指定宽高，避免缩放；

• 防止src和href值为空，当为空时，浏览器会把当前页面当做属性值重新加载；

• ss在头部位置，js在body底部位置；

从CSS样式上来优化

• 使用link加载样式而不是@import（是css2提供的一种方式，不兼容，只能加载css，而且页面所有组件被加载完后才会被加载，完成前会导致‘闪烁’，link属于XHTML标签，没有兼容问题）；

• 避免使用css表达式；

• 避免使用css filter滤镜；

• 使用css 缩写 如#fff，减少代码量；

• 删除重复的css，css简化；

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

• 减少css查询层级，如.header .log 要好于.header .top .log；

• 减少css查询范围，如header>div获取直系子元素要好于heade div；

• 避免TAG标签与CLASS或ID并存：如a.top、button#submit；

从js上来优化

• js尽量少用全局变量；

• 多个js变量声明合并；

• 不使用eval函数，不安全，性能消耗严重

• 使用事件代理绑定事件，如将事件绑定到body上进行代理（利用冒泡原理将事件加到父级上，能够给动态增加的元素进行数据绑定）；

• 避免频繁的操作DOM节点，使用innerHTML代替

• 减少对象查找，如a.data.box1.name的查找方式非常耗性能，尽可能的将它定义在变量里；

• 类型转换，把数字转字符串使用var str=‘’+1；浮点数转成整形使用Math.floor()或者Math.round();

• js对字符串进行循环操作，譬如替换、查找应该使用正则表达式；

• 删除重复的js

• 使用setTimeout来避免页面失去响应

• 使用hash-table来优化查找

其他方面进行优化

• 尽量合并js和css，对js和css进行压缩，可以缩短文件传输时间；

• 使用CDN加速

• 减少Cookie的大小，使用无cookie的域，客户端请求静态文件的时候，减少 Cookie 的反复传输对主域名的影响；

• 为文件头指定Expirs,使内容具有缓存性；

• 减少DNS查询，权衡；

• 避免在html标签中写style属性

浏览器兼容

1. 到底什么是浏览器兼容问题?

(以下来自百度百科):浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。在网站的设计和制作中，做好浏览器兼容，才能够让网站在不同的浏览器下都正常显示。而对于浏览器软件的开发和设计，浏览器对标准的更好兼容能够给用户更好的使用体验。

2. 浏览器兼容问题说的是啥?

• 其实说白了,就是我们的css和html在发展,推出了很多新的东西,比如css3和html5,而我们进步缓慢的IE浏览器是跟不上这个节奏的,所以就会出现不识别的东西,很多东西,在新的浏览器会识别,旧的就不会被识别(这里特别提醒一下,注意 window和mac,哪怕同样的版本的浏览器,也会不一样哦)

• 再就是虽然识别了.但定义的范围或者一些默认的参数会不同,因为浏览器内核差异,最值得吐槽的是IE浏览器和别的很多浏览器都不一样,这样也不会兼容.

其实就是基于以上2个原因,才会导致无论怎么找工作,都会问到,会用原生的js写东西吗?,毕竟很多新的js框架里封装的东西,老的浏览器就是因为上面的原因而不识别

3. 浏览器兼容的重要性。
   1）网站做好了浏览器兼容，能够让网站在不同的浏览器下都正常显示
   2）浏览器兼容能够抓住更多的网站访客
   3）浏览器兼容能够给客户更好的体验
   4）兼容工作的重点已经从几年前的样式统一转变为在PC端和移动端对新特性的支持和妥协

4. 浏览器兼容问题及处理方法

不同浏览器的标签默认的样式
{ margin: 0; padding: 0; }

ie9 以下浏览器对 html5 新增标签不识别的问题
< script type=“text/javascript” src=“https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js”>< /script>

ie9 以下浏览器不支持 CSS3 Media Query 的问题
< script src=“https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js”>< /script>

解决 IE 9 10 11 等浏览器不支持 < picture> 标签的问题
< script src=“https://cdn.bootcss.com/picturefill/3.0.3/picturefill.min.js”>< /script>

浏览器 CSS 兼容前缀
-o-transform:rotate(7deg); // Opera
-ms-transform:rotate(7deg); // IE
-moz-transform:rotate(7deg); // Firefox
-webkit-transform:rotate(7deg); // Chrome
transform:rotate(7deg); // 统一标识语句

6.清除浮动 最佳实践
一般常用的方法有三种：
A. 在浮动元素后面添加带有clear属性的空元素
B. 给容器添加属性overflow: hidden或者overflow: auto，在IE6中还需触发haslayout，所以还需添加zoom: 1。
C. 使用:after伪元素（万能清除浮动法）
.clearfix:after { display: block; clear: both; content: “”; visibility: hidden; height: 0; }

BFC 解决边距重叠问题
当相邻元素都设置了 margin 边距时，margin 将取最大值，舍弃小值。为了不让边距重叠，可以给子元素加一个父元素，并设置该父元素为 BFC：overflow: hidden;

IE6 双倍边距的问题
设置 ie6 中设置浮动，同时又设置 margin，会出现双倍边距的问题
display: inline;

解决 IE9 以下浏览器不能使用 opacity
opacity: 0.5;
filter: alpha(opacity = 50);
filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

IE6不支持min-*
IE6不支持min-height该属性。即使定义了元素高度，如果内容超过元素的高度，IE6在解析时，会自动延长元素的高度。
解决方法：利用IE6不识别!important，给元素设置固定高度，并且设置元素高度自动

td 自动换行的问题
问题：table 宽度固定，td 自动换行
解决：设置 Table 为 table-layout: fixed，td 为 word-wrap: break-word

图片默认有间距
使用float属性为img布局

li之间有间距
解决方法：li 设置vertical-align:middle;

滚动事件的兼容
scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

事件对象的兼容：
e = evt||window.event

阻止冒泡的兼容：
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble=true;
}

阻止默认行为的兼容:
if(e.preventDefault){
e.preventDefault();
}else{
e. returnValue = false;
}

添加事件监听器的兼容
if(target.addEventListener){
target.addEventListener(“click”,fun,false);
}else{
target.attachEvent(“onclick”,fun);
}

解除事件监听器的兼容
if(target.removeEventLisener){
target . removeEventListener(“click” , fun , false);
}else{
target . detachEvent(“onclick”, fun);
}

ajax创建对象的兼容
var xhr = null；
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject(“Microsoft XMLHTTP”);
}

关于选取样式的属性的兼容
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}