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

(1) 性能优化的方法?

1.减少http请求数量和体积
    -压缩 css、js 文件
    -合并 js、css 文件，减少 http 请求
    -使用CSS Sprites图，合并多个CSS图片，合理使用图片压缩
    -合理使用http缓存，减少http请求
    -使用外部的css和js以减少服务器的压力
    
2.css和script的位置
    把 css 样式引入放在<head>标签中，把 <script>资源引入放在</body>闭合之前。
    外链脚本在加载时却常常阻塞其他资源，例如在脚本加载完成之前，它后面的图片、样式以及其他脚本都处于阻塞状态，直到脚本加载完成后才会开始加载。如果将脚本放在比较靠前的位置，则会影响整个页面的加载速度从而影响用户体验。所以说尽可能的将脚本往后挪，减少对并发下载的影响
    
3.DOM操作优化
    -要避免在document上直接进行频繁的DOM操作(用innerHTML代替DOM操作)，缓存DOM节点查找的结果
    -使用classname代替大量的内联样式修改
    -对于复杂的UI元素，设置position为absolute或fixed
    -在js动画和css动画之间尽量使用css动画
    -适当使用canvas
    -使用事件代理
    -避免使用eval或Function，每次 eval 或 Function 构造函数作用于字符串表示的源代码时，脚本引擎都需要将源代码转换成可执行代码，这是很消耗资源的操作 
    -避免大量的字符串拼接，可以使用数组的join方法

4.CSS选择符优化
    -避免使用通配符选择器，避免使用后代选择器
    -选择器匹配是从右向左匹配的，选择器语句链越短，浏览器的匹配速度越快
    -避免使用标签和通用选择器作为关键选择器，因为它们会匹配大量的元素，浏览器必须要进行大量的工作
    -搞清楚哪些 CSS 属性会触发重新布局（reflow）、重绘（repaint）。在写样式时，避免触发重新布局的可能
    -减少使用昂贵的属性，所有需要浏览器进行操作或计算的属性相对而言都需要花费更大的代价。box-shadow/border-radius/filter/透明度/:nth-child等
    -不要使用@import
    -尽量减少css表达式的使用  background-color: expression((new Date()).getHours()%2?"#FFFFFF": "#000000" );

//附：重排和重绘的操作
-重排的操作：
    width   height  padding margin
    display border-width    border  top
    position    font-size   float   text-align
    overflow-y  font-weight overflow    left
    font-family line-height vertical-align  right
    clear   white-space bottom  min-height
    offsetTop  offsetLeft  offsetWidth   offsetHeight
    scrollTop   scrollLeft  scrollWidth   scrollHeight
    clientTop   clientLeft   clientWidth  clientHeight 
    getComputedStyle()    (currentStyle in IE)
 -重绘的操作：
    color   border-style    visibility  background
    text-decoration background-image    background-position background-repeat
    outline-color   outline outline-style   border-radius
    outline-width   box-shadow  background-size

(2) HTML常见兼容性问题

1.IE不支持h5新标签和c3媒体查询的问题

引入html5shiv.js在IE浏览器下创建h5标签
引入respond.js让IE浏览器支持C3的媒体查询

2.js代码兼容性问题

根据兼容需求选择技术框架/库(jquery)

var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
var target = ev.srcElement||ev.target

3.css兼容性问题

A.使用Reset CSS或Normalize.css做样式的重置
B.使用autoprefixer添加浏览器前缀
C.使用条件注释针对不同的浏览器引入单独的样式表
D.使用已经处理好兼容问题的库，比如BootStrap
E.渐进增强(progressive enhancement): 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
F.优雅降级 (graceful degradation): Web站点在所有新式浏览器中都能正常工作，然后再针对低版本浏览器进行兼容。
G.使用CSS hack技术做样式兼容

常见的兼容性问题：

display:inline-block（IE7及以下不支持）
需要对低版本IE特殊处理：{display:inline-block;display:inline;zoom:1;}

display:inline-block 什么时候会显示间隙？怎样消除间隙？
父元素font-size设置成0，子元素重新设置font-size

display:inline-block滥用容易出现布局方面的问题，尤其在左中右、左右等布局方面的问题尤为突出。因此如果是左右布局的话，尽量都用浮动来代替

z-index在IE7及以下版本的话，有时会发现不是谁z-index设置的越高谁就显示在最上面。碰到这种问题需要设置父元素有相对定位属性元素的z-index。先比较父元素的z-index再比较子元素的

IE6双边距：IE6中，元素向左浮动并且设置了左侧的外边距出现了这样的双边距bug。同理，元素向右浮动并且设置右边距也会出现同样的情况。同一行如果有多个浮动元素，第一个浮动元素会出现这个双边距bug，其它的浮动元素则不会。只需要给浮动元素加上display:inline;这样的CSS属性就可以了。

margin-top，margin-bottom的bug
父元素的第一个子元素设置了margin-top,会作用于父元素（值为父元素的margin-top与该margin-top两者中的最大值)，而子元素和父元素的边距则没有发生变化。

超链接访问之后hover样式不出现了，被点击后也不具有active和hover样式。
方法：按照顺序写 ：a:link{   }  a:visited{  } a:hover{  } a:active{   }

IE没有办法定义1像素左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08;line-height:1px）

IE5-8不支持opacity
方法：
.opacity{
    opacity:0.4,
    filter:alpha(opacity=60);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"
}

IE6不支持PNG透明管背景色，IE6下使用gif图片,png24的图片在ie6浏览器上显示背景色，做成png8的

IE下even对象只有x,y属性，但是没有pagex和pagey属性，火狐只有pagex pagey属性。

谷歌下默认会将小于12px的文本设置按照12px显示，可是通过加入-webkit-text-size-adjust:none;

posted @ 2020-02-19 20:16 格格123456 阅读(137) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

格格123456

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

(1) 性能优化的方法?

(2) HTML常见兼容性问题

公告