总结前端性能优化方案、前端兼容性问题

前端性能优化

1.样式置顶，脚本置底

样式文件的引用（<link />）放在html文档的head标签中，脚本文件的引用（<script />）放在body的底部；
另外尽量减少在页面中出现片段性（内联）的style和script代码。

2.精简资源

• 压缩、合并CSS，JS文件

• 对图片文件进行精简优化，方式如：

  • OptiPNG工具无损优化PNG图片；

  • 使用webp格式；

3.减少http请求次数

• 合并css、js文件；

• 使用css sprites技术；

• icon图片过多的情况下，考虑使用iconfont技术；

4.延迟加载

• 使用reauire.js或sea.js按需加载js模块；

• 使用lazyload.js插件延迟加载图片；

5.删除重复脚本

重复脚本的问题一般出现在规范稀松的团队或者多部门协作开发的团队中，尽量减少这类问题的出现；重复脚本一般在开发时即可发现，因为大多数情况下这会导致变量覆盖（如多次引用jQuery），功能无法正常使用。

6.缓存Ajax

最快的Ajax请求就是没有请求。

7.使用JSON作为数据格式

8.尽量避免重绘(Repaint)和重排(Reflow)的发生

以下情况都会发生：

• 添加或删除可见的DOM元素；

• 元素位置改变；

• 元素尺寸改变（包括：外边距，内边距，边框厚度、宽度、高度等）；

• 内容改变；

• 页面渲染器初始化；

• 浏览器窗口尺寸变化。

重排和重绘不可避免，只能尽量少的发生。

前端兼容性问题

1、html部分

a、最突出也是最容易想到的就是高版本的浏览器用了低版本的浏览器无法识别的元素，从而导致不能解析。这点主要体现在html5的新标签上

解决办法是：htmlshim框架可以让低于IE9的浏览器支持html5

b、img的alt属性，在图片不存在的情况下，各浏览器的解析不一致

在chrome下显示的是一张破损的图片，在ff下显示的是alt的文字，而在IE中显示的是破损的图片加文字

c、ul标签内外边距问题

ul标签在IE6\IE7中，有个默认的外边距，但是在IE8以上及其他浏览器中有个默认的内边距

2、css部分：

a、css的hack问题：主要针对IE的不同版本，不同的浏览器的写法不同

IE的条件注释hack：

<!--[if IE 6]>此处内容只有IE6.0可见<![endif]-->

<!--[if IE 7]>此处内容只有IE7.0可见<![endif]-->

b、IE6双边距问题：IE6在浮动后，又有横向的margin，此时，该元素的外边距是其值的2倍

解决办法：display:block;

c、IE6下图片的下方有空隙

解决方法：给img设置display:block;

d、IE6下两个float之间会有个3px的bug

解决办法：给右边的元素也设置float:left;

e、IE6下没有min-width的概念，其默认的width就是min-width

f、IE6下在使用margin:0 auto;无法使其居中

解决办法：为其父容器设置text-align:center;

g、 被点击过后的超链接不再具有hover和active属性

解决办法:按lvha的顺序书写css样式

h、在使用绝对定位或者相对定位后，IE中设置z-index失效，原因是因为其元素依赖于父元素的z-index，但是父元素默认为0， 子高父低，所以不会改变显示的顺序

i、IE6下无法设置1px的行高，原因是由其默认行高引起的

解决办法：为期设置overflow:hidden;或者line-height:1px;

3、js部分

a、标准的事件绑定方法函数为addEventListener，但IE下是attachEvent；

b、事件的捕获方式不一致，标准浏览器是由外至内，而IE是由内到外，但是最后的结果是将IE的标准定为标准

c、我们常说的事件处理时的event属性，在标准浏览器其是传入的，IE下由window.event获取的。并且获取目标元素的方法也不同，标准浏览器是event.target，而IE下是event.srcElement

d、在低版本的IE中获取的日期处理函数的值不是与1900的差值，但是在高版本的IE中和标准浏览器保持了一致，获取的值也是与1900的差值。

比如：var year= new Date().getYear();

e、ajax的实现方式不同，这个我所理解的是获取XMLHttpRequest的不同，IE下是activeXObject

f、IE中不能操作tr的innerHtml

g、获得DOM节点的父节点、子节点的方式不同

其他浏览器：parentNode parentNode.childNodes

IE：parentElement parentElement.children

前端开发IE下兼容性处理

主流浏览器，IE 6，7 ，chrome ，Firefox, Safari

H5标签兼容：IE6无法兼容H5标签兼容，常见标 签，header，footer,section

.IE6下不支持H5标签，通过原生js方法document.createElement(‘header’)动态创建元素; css

中为元素增加display：block；属性。方可成功加载H5元素样式。或者下载html5shiv.js 插件引入到页面更加直接。

同一个父元素box下面有两个元素left和right, left和right 宽度均设为200px; left

设为float：left，right

不浮动情况下设置margin-left：200px会造成在IE6下面产生空隙，解决办法是不能用margin-left。Left和right均采用

float：

IE6下子元素设置的宽和高都是400px，父元素设置宽高200px, 子元素会撑开而是被父元素包裹住，解决措施不建议子元素宽高超过父元素。

P元素包含块元素规则，P元素下面包裹div在chrome下会出错，h标签和td标签均不能嵌套块元素。

margin-top 传递和margin

上下叠压重合问题。父元素box不设置宽高，两个子元素设置一个margin：50px属性后，会导致上下两个子元素上下margin没有，紧贴父元素显

示。解决margin传递：chrome下面直接给父元素设置，border属性；IE需要设置overflow：hidden和zoom:1(针对

IE6). 上下两个子元素的margin是50px而不是100px,

解决方式是设置样式时候尽量使用同一方向的margin，要么设置margin-top或者margin-bottom。

IE6，7双边距：IE下面多个子元素浮动浮动后再设置margin-left属性，第一个元素会产生双倍边距导致元素换行，解决方案：添加*display：。在IE下设置margin-right属性不受影响。

ul下面的多个li内部子元素浮动后，在IE6 下面多个li会产生4px的间隙，解决方案：针对IE6,7给li元素添加垂直对齐vertical-align:top;

display:inline-block属性让IE6,7兼容，需要添加*display：inline和zoom:1.

IE6 最小高度，div设置height：1px; IE下面高度明显高于解决最小高度可以添加*overflow：hidden；IE6 下最小高度19px，解决加上overflow：hidden。

父级和子级都有定位，且父级宽高是奇数，IE下面子元素会和父级元素有1px偏差，例如父级别相对定位，子元素绝对定位，bottom:0;right:0;此时子元素和父元素会有1px空隙。解决方案：父元素宽高设定避免使用奇数。

IE6 下input 元素会有间隙，解决措施给input 增加float属性。

css hack : \9 属性在IE10及9,8.7.6.5下面都支持， *属性是IE7 以及7以下的版本兼容。

_属性是IE6以及6以下的版本。

IE 6不支持PNG24 图片，方式1

引用DD_belatedPNG_0.0.8a.js文件，调用方法DD_belatedPNG..fix(‘img’); 方式2 用滤镜

background:url(“../images/login_jm.png”) no-repeat center top;_

background-image: none;

_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’static/images/login_jm.png’);

14 .样式优先级：！important 比行间样式厉害，background-color:red !important;