跨浏览器兼容性和调试技巧

一、简介

       不同的浏览器再解释和渲染网页代码时存在差异，可能导致网页在不同的浏览器上呈现出不同的效果，或者在某些浏览器上根本无法正常显示。所以需要进行浏览器兼容性调试。

二、溯源

      跨浏览器兼容性的定义：指网页在不同浏览器中能够正确显示并保持一致的能力。

      原因：不同浏览器的实现代码和渲染引擎存在差异，导致网页在不同浏览器上呈现效果不同。主要浏览器包括：Chrome/Firefox/Edge/Safari/Opera等。

      2.1、常见分类

1. 1. 软件+硬件平台兼容：操作系统（windows、macos、Android、IOS）；
   2. 软件+软件之间兼容：依赖第三方软件、Web应用浏览器兼容性；
   3. 软件版本兼容：APP升级，老用户和老数据问题。               

三、常见的浏览器兼容问题

      3.1、CSS问题

1. 1. 盒模型差异：不同浏览器对于盒模型的解释存在差异，导致元素的宽度和高度计算不一致。
   2. 浮动和清楚浮动：浏览器对浮动元素的解释不同，可能导致布局混乱。
   3. CSS3属性兼容性：某些浏览器不支持某些新的CSS3属性，需要使用厂商前缀或者降级处理。

     3.2、JavaScript问题

1. 1.  DOM操作差异：不同浏览器对于DOM操作的实现存在差异，可能导致代码出错。
   2. 时间处理差异：不同的浏览器对于时间的处理存在差异。
   3. XMLHttpRequest对象：不同浏览器对于XMLHttpRequest对象的实现存在差异，可能导致Ajax请求的代码兼容性问题。

     3.3、HTML问题

1. 1. HTML5新元素兼容性：某些浏览器不支持HTML5的新元素，需要使用JavaScript进行兼容性处理。
   2. 表单袁术兼容性：不同浏览器对于表单元素的样式和行为存在差异，需要进行相应的处理。
   3. HTML标签语义化：不同浏览器对于HTML标签的解释存在差异，可能导致页面结构出错。

四、解决办法

1. 使用重置样式表或者normalize.css：重置样式表可以将不同浏览器的默认样式统一，减少差异。
2. 浏览器嗅探和特性检测：通过浏览器嗅探和特性检测，根据不同的浏览器来使用不同的JavaScript和CSS代码，从而实现兼容性。
3. 使用CSS Hack或者条件注释：某些特定的CSS Hack和条件注释可以针对不同浏览器或者版本来应用不同的样式。
4. 使用CSS预处理器和前端框架：可以使用CSS预处理器（如SASS或者LESS）以及前端框架（如Bootsrap）来简化开发过程并提高兼容性。
5. 不依赖于特定浏览器的功能：尽可能避免使用某个特定浏览器支持的功能，以免在其他浏览器上出现兼容性问题。        

五、跨浏览器测试

       5.1、手动测试

                应用程序只能在有限的网络浏览器上扩展，从而限制了应用程序的效能，且这个过程既费时又费钱。

       5.2、自动化测试

               跨浏览器测试要求在不同的浏览器上运行相同的测试套件。自动化测试更具成本效益，同时可以有许多工具支持。

1. 1.  HeadSpin：业内领先的跨浏览器测试平台之一。它针对移动和网络应用程序，允许用户同时执行手动和自动化的测试工作。HeadSpin可以同时运行多个测试用例，从而有利于资源优化。HeadSpin 具有专用的设备部署模型，可提高测试过程的安全性和性能。HeadSpin 平台的高级 AI/ML 功能能够对各种参数深入了解，包括网络性能、CPU 负载和电池消耗等设备相关因素、网络优化问题以及音频和视频问题等等。
   2. Cross-browser Testing：Cross-browser Testing是跨平台的测试工具，它功能强大，可以基于云环境针对2050 多个真实的桌面和移动浏览器强制执行手动、视觉和 Selenium 测试。Cross-browser Testing具有惊人的记录重放( Record & Replay )属性，允许记录实时测试并在相应的快速测试中运行记录的测试。
   3. Experitest：Experitest 允许在不同的浏览器和移动设备上实施相应的测试。
   4. Selenium：Selenium 与浏览器事务合作可以帮助测试 Web 应用程序，并毫不费力地解决应用程序之间的不一致问题。它是正在快速发展的浏览器测试自动化工具。
   5. LambdaTest：LambdaTest 用于在各种 Web 浏览器和操作系统的 2000 多种组合上测试 Web 应用程序。它是一个基于云的跨浏览器测试平台，允许在 Selenium 网格上实现 Selenium 自动化测试。LambdaTest有助于对云上的网站和 Web 应用程序进行实时交互式跨浏览器测试。
   6. Browserling：Browserling 是一种用于快速测试的实时交互工具。Browserling 提供了对所有标准浏览器和流行操作系统的快速访问。

    六、   跨浏览器兼容性自动化测试的好处

1. 1. 无缝的用户体验和质量保证：最直接的好处是为最终客户提供理想的用户体验，而这可以进而转化为持续的业务增长，同时降低客户流失率，并让员工的智慧得到更好利用。公司人员无需被跨浏览器调试损坏的用户界面困扰，而是可以将注意力放在开发独特的解决方案上。
   2. 降低风险：QA 小组报告显示，自动化为人们节省了 70% 的时间。通过自动化测试，可用性及功能错误可比手动测试更快地关联起来。这种方式使测试人员能够正确评估对市场的威胁或责任，确定危害的优先级，从而解决它们 。
   3. 缩短发布周期并更快的交付代码：随着新开发路径的推出，测试形势也得到了增强。应用程序测试人员进行无休止的测试几乎是家常便饭，而Selenium 等自动化应用程序可以轻松集成到 DevOps 自动化策略中。测试是 CI/CD 流水线执行的关键阶段，开发团队可以通过永久自动化测试快速交付代码，并缩短新功能的发布周期。

六、实际处理·

          6.1、小众浏览器出现问题，需要做兼容性测试吗？

1. 1. 用户是狗为主要甲方用户：如果是，需要做测试。
   2. 普通用户，考虑性价比，小众不需要做测试。

                 Tips：项目发布后，在发布文档中，文档应该明确支持的 系统或者浏览器类型和版本，建议用户使用官方浏览器。

          6.2、如果一个网站分为前台访问系统、后台管理系统，是否都需要做  兼容性测试？

1. 1. 针对内部人员，有时间的话，做兼容性测试；时间不足不做也没关系；
   2. 面向用户，需要做。