浏览器不兼容问题和浏览器优化

Posted 2020-12-17 yjf713

-1、html 兼容性问题

问题：HTML5新的语义标签在低版本的老IE浏览器中存在兼容性问题

解决方案：引用第三方解析库

<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

-2、css兼容问题

1、图片问题

a、图片下方有间隙

解决方案：

　　（1）img{display：block}

b、图片的右侧有间隙

解决方案：

　　（1）不换行继续写

　　（2）设置浮动属性：float：left；

c、img和input一起使用垂直方向不对齐

解决方案：

　　（1）给img一个{vertial-align：center}

d、图片添加超链接，带边框（仅在IE浏览器中存在）

解决方案：

　　（1）img添加{border：none}

2、间距问题（margin和padding）

a、浏览器默认的内外边距不同

*{
       maegin：0；
       padding：0；        
  }

b、两个块级元素竖向的margin值不会叠加，其间距取最大值

c、给子元素加margin-top，但是作用在父元素上

解决方案：

　　（1）给父元素添加padding：0.1px；

　　（2）给父元素添加浮动；

3、行高和高度问题

a、浮动的副作用：父元素的高度塌陷

解决方案：

　　（1）给父元素添加高度

　　（2）在浮动的元素后面添加一个空白的div，给div清除浮动

　　（3）给父元素添加overflow：hidden；

4、鼠标手势

问题症状：FireFox的cursor属性不支持hand，但是支持pointer，IE两个都支持

解决方案：cursor：pointer

 

-3、浏览器优化方法：

 优化原则：

　　DNS是否通过缓存减少查询时间

　　网络请求走最近的网络环境

　　相同的静态资源缓存

　　减少请求的大小

　　服务器渲染优化

1、减少HTTP请求，合理设置HTTP缓存

2、应用浏览器缓存

　　cookie，loactStorage（一般用于存储ajax返回的数据）；

3、启用压缩

在服务器端对文件进行压缩，在浏览器端对文件进行解压缩，这样可以有效的减少通信传输的数据量。

4、CSS Sprites

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

CSS Sprites为一些大型的网站节约了带宽， 提高了用户的加载速度和用户体验，不需要加载更多的图片

5、LazyLoad Images -图片懒加载

对于图片而言，在页面刚加载的时候可以只加载第一屏，当用户继续往后滚屏的时候才加载后续的图片。

• jqueryLazyload方式 　（ 依赖Jquery）　
• echo.js方式 （Echo.js 是一个独立的延迟加载图片的 JavaScript 插件） 

6、css放在页面最上部，javascript放在页面最下面