减少浏览器兼容性问题

简介:

做为一个前端工程师,不少时间都在处理浏览器兼容性问题。本文对如何减少浏览器兼容性问题的方法做了些总结。


  确定运行环境


  在开发前,我们要确定页面的运行环境:要兼容哪些浏览器,以及哪些屏幕分辨率。

  如果我们不了解我们的运行环境,兼容性也无从谈起。也只有在确定来运行环境后,我们才可以选择合适的方式。我们可以借助 HTML5 与 CSS3 技术应用评估来选择用哪些技术。


  查询特性的兼容性

  在使用某个特性前,我们可以使用 Can I Use 来查询某特性在各个浏览器上的兼容性情况。也可以在代码中用 Modernizr 进行特性探测。


  下面是一些查询兼容性的网站

  es5规范浏览器兼容性表格

  es6规范浏览器兼容性表格

  html5 移动端兼容性速查


  如果实在想用某个特性,但某个想兼容的浏览器不支持,可以找找有没库来做支持的

  HTML5 Cross Browser Polyfills

  HTML5 POLYFILLS


  了解哪些写法会产生兼容性问题


  有时候一些兼容性问题的产生并不是因为我们的写法问题,而是浏览器自身的 bug(如 IE 6 的双边距问题),或者浏览器对标准的支持不一致。所以我们要了解哪些写法会产生兼容性问题,然后避免那样写。

  推荐认真研究浏览器兼容性-根本原因内容列表。


  充分的测试

  推荐使用 爱测试iTest平台。它是阿里巴巴研发的前端自动化测试工具,支持主流浏览器的JS错误检测,支持页面截图,一键验证,坏死链接检测等。

  现在一些多浏览器自动化测试的工具,服务(如 Sauce LABS)也很多,暂时还没怎么研究,以后研究后可以给大家分享~


  一些技巧


  让用 IE 访问页面时,尽可能用最新的 IE 渲染引擎。通过加在 HTML 中加标签 <meta http-equiv="X-UA-Compatible" content="IE=edge">。

  让双核浏览器(如 360,搜狗等国产浏览器)访问本网页时,用 webkit 内核来渲染。通过加在 HTML 中加标签 <meta name="renderer" content="webkit">。(注:目前只有 360 浏览器支持)

  用 HTML5 的 DocType:<!DOCTYPE html PUBLIC>。避免使用有问题的 DocType 而导致的浏览器用怪癖模式来渲染页面。


  一些 CSS 属性记得要加浏览器前缀


  有时页面的元素改变后,应该被重绘,但浏览器没有重绘,可以用让元素隐藏,然后再显示的方式来让浏览器重绘

相关文章
|
9月前
|
前端开发 JavaScript UED
前端性能优化:从加载速度到用户体验的技巧大揭秘
在当今互联网时代,用户对于网页加载速度和交互体验的要求越来越高。作为前端开发者,我们应该重视性能优化,通过一系列技巧来提升网页的加载速度、响应速度和用户体验。本文将介绍一些实用的前端性能优化技巧,帮助开发者打造高效、流畅的网页应用。
90 1
|
9月前
|
缓存 前端开发 JavaScript
前端开发中的性能优化技巧——从页面加载速度到用户体验
在当今互联网时代,用户对于网站的访问速度和体验要求越来越高,而前端开发中的性能优化技巧则成为了不可或缺的一部分。本文将从页面加载速度、代码压缩与合并、图片优化、缓存策略以及浏览器渲染优化等几个方面,为大家详细介绍如何提升网站的性能和用户体验。
130 1
|
9月前
|
缓存 JavaScript 前端开发
JavaScript 性能优化:如何减少页面加载时间?
JavaScript 性能优化:如何减少页面加载时间?
116 0
|
3月前
|
存储 缓存 前端开发
如何优化 SSR 应用以减少服务器压力
优化SSR应用以减少服务器压力,可采用代码分割、缓存策略、数据预加载、服务端性能优化、使用CDN、SSR与SSG结合、限制并发请求、SSR与CSR平滑切换、优化前端资源及利用框架特性等策略。这些方法能有效提升性能和稳定性,同时保证用户体验。
|
3月前
|
Web App开发 前端开发 JavaScript
如何在不牺牲动画效果的前提下,优化 CSS3 动画的性能?
如何在不牺牲动画效果的前提下,优化 CSS3 动画的性能?
148 58
|
3月前
|
JavaScript 前端开发
如何在不影响性能的前提下使用JavaScript库来实现复杂的动画效果?
如何在不影响性能的前提下使用JavaScript库来实现复杂的动画效果?
|
4月前
|
存储 缓存 前端开发
如何优化 SSR 应用以减少服务器压力?
如何优化 SSR 应用以减少服务器压力?
|
4月前
|
缓存 前端开发 JavaScript
网页布局中,如何增加页面加载速度?
## 提升网页加载速度的关键策略 网页加载速度对用户体验和网站性能至关重要。本文介绍六种优化方法:优化图片与媒体文件(如使用WebP格式和懒加载),精简代码并压缩CSS/JavaScript,利用CDN加速;减少HTTP请求,如合并文件和使用CSS Sprites;合理配置浏览器缓存;优化服务器响应,选择高性能服务器并使用Gzip压缩;谨慎管理外部资源,考虑异步加载。根据网站具体情况调整这些策略,可显著提升加载速度。
|
5月前
|
存储 缓存 前端开发
优化 SSR 应用以减少服务器压力
优化 SSR 应用以减少服务器压力
|
5月前
|
缓存 监控 前端开发
多个异步操作对网页性能的影响及优化建议
多个异步操作会影响网页性能,主要体现在网络请求延迟、资源竞争及浏览器限制等方面,可能导致页面加载缓慢。为优化性能,可采用 `Promise.all()` 并行处理、请求合并、懒加载、缓存利用、CDN 托管、请求优化及性能监控等策略,从而提升用户体验。