在过去几年中，我们与许多Web开发人员进行了深入的交流，并发现他们面临的最大挑战是创建一个能够在各种浏览器版本和设备上顺畅运行的网站。作为jQuery项目的参与者，我们也有同感。因此，我们总结了20条编码模式和经验，以帮助您在构建网站时节省时间和避免麻烦。这些经验来自于我们参加的各种会议以及阅读的大量相关文章。希望这些提示能够帮助您轻松地创建出高效且具有响应性的网站。
不同浏览器间的兼容性
对于许多开发者而言，确保网站在所有浏览器中渲染一致性是一大挑战。然而，现实是并不需要在所有浏览器中做到完全一致。更实际的做法是，为较旧的浏览器提供一个可靠的工作基线，同时为现代浏览器用户提供更丰富的用户体验。
借助于现成的模板
为了简化开发过程，你可以借助像HTML5 Boilerplate这样的开发模板，这些模板已经包含了一套经过实践检验的准则和技巧，对于现代和旧版浏览器都具有良好的兼容性。
关注稳定的Web标准
当一个新的、令人激动的特性出现时，虽然它可能仍处于实验或开发阶段，但重要的是要记住，在标准的早期发展阶段，这些特性很可能会发生改变，这可能会影响到你的网站稳定性和用户的体验。因此，关注稳定的标准能确保你的用户获得他们期待的体验，并使你的网站更容易维护。
使用IE兼容性检测工具
微软的IE兼容性检测工具是一个很好的工具，可以帮助你找出代码中的问题并给出解决方案。将一段简单的JavaScript代码添加到你的网页中，这个工具就能提供一个可视化的结果，同时也可以集成到Fiddler HTTP分析工具中。
慎用polyfills和模拟API
如果你需要在不同的浏览器中实现相同的体验，可以使用polyfills和模拟API。然而，需要记住的是，引入这些代码需要谨慎，确保它们能够满足你的需求并且易于维护。
跨浏览器测试
虽然现代浏览器已经越来越接近Web标准的统一，但仍然存在一些差异。因此，进行跨浏览器的测试是非常重要的。这可以帮助你避免在最后一刻才发现问题，甚至在网站上线后也能发现潜在的问题。你应该查看所有浏览器的开发者工具，检查是否有警告或错误信息。对于一些老版本的浏览器，比如IE7，它们并没有内置的开发者工具，这时你可以使用Firebug Lite来进行调试。你也可以使用像BrowserStack这样的跨浏览器测试解决方案。
利用工具提高代码质量和性能
有许多工具可以帮助你检测代码中的错误，增强代码质量并减小文件大小。例如，HTML验证器、CSS验证器、Uglify、JSHint和GruntJS等工具都可以在开发过程中找到潜在的问题并提高代码的标准性，同时减小文件大小以提高性能。如果你的IDE或代码编辑器支持这些工具，那么这些步骤就不会成为你开发过程中的障碍。例如，Visual Studio提供了在创建过程中运行外部工具以及合并/压缩脚本文件的能力。
HTML
坚持使用标准模式，避免使用怪癖模式。使用<!DOCTYPE html>可以让你的网站更加现代化，不需要考虑兼容90年代中期的老旧浏览器，例如IE6和FireFox 2。在怪癖模式下，很多网页要么文档声明无效，要么出现无关文本。这容易导致布局异常，并且难以调试。
对于HTML标签的理解和有限向后兼容的使用。虽然新推出的HTML5标签，例如<section>、<header>和<footer>改善了标签的语义化，但这些标签在老旧的浏览器中可能不被支持。因此，在这些情况下，使用<div>标签是一个更为可靠的选择。
将CSS样式放在HTML文件的头部。如果将CSS放在文档的body中，页面将一片空白，直到CSS加载完成后才会显示。因此，应该将CSS文件放在HTML文档的head中，以便浏览器尽早读取它们。
将JavaScript脚本放在HTML文件的底部。浏览器通常会先检索、解析和执行加载的脚本，然后渲染剩余的页面内容。如果脚本放在底部，浏览器可以一直渲染页面，直到脚本加载完成，以便用户尽快加载页面显示出来。
尽量避免在HTML中嵌入脚本标签。与引入脚本不同，脚本标签需要浏览器停止渲染（处理脚本），这会阻碍后续资源文件的分析和下载。这可能导致页面初始加载速度变慢，甚至出现“空白页”体验。此外，将脚本分散在多个内联标签中难以维护。
不要在HTML元素中使用内联脚本事件。例如，不要使用<button οnclick="validate()">Validate</button>这种写法。这种做法违反了标签、表示和行为之间的清爽原则。此外，如果相关的脚本在文档底部加载，用户可能会先点击了页面触发事件，从而尝试调用脚本程序，但此时脚本可能还未加载，从而引发错误。
CSS
理解和应用CSS的层叠规则，除了使用简单的id和class选择器之外，还应该利用标签、子元素标签、同列标签等以及小部分的id和class标签组合，使CSS更简洁、更通用，避免使用“!important”。
面向未来使用带有前缀的特定属性，以便浏览器厂商可以通过添加前缀来实现可能支持的标准。
处理CSS兼容性问题时，采用优雅的方法，而不是使用hack技巧。为html或body标签添加特定浏览器的class，并在CSS规则中使用，是一种可靠的解决方法。条件注释也可以在特定浏览器版本时使用需要的CSS文件。
JavaScript
优先探测功能而非浏览器
判断一个浏览器是否存在某个特定功能或错误时，通过解析用户代理字符串（userAgent）并不是一个可靠的方法。因为用户代理字符串易受伪造，且不同浏览器版本可能被错误地识别。因此，我们应该直接探测功能或问题，以确保准确性和可靠性。在这里推荐使用Modernizr，它是一种简单实用的功能探测库。
在Ready后立即执行脚本
使用jQuery的$(document).ready()方法可以确保在HTML页面加载完成后立即执行脚本。然而，如果脚本过于复杂，可能会导致页面加载速度变慢，甚至阻止用户立即操作页面。因此，对于某些需要在需要时初始化的功能，如提示框和对话框等，应该在需要时再进行初始化，以改善用户体验。
尽早发起Ajax请求
Ajax请求的时间花费相对较长，并且不需要等待HTML页面渲染完成就可以发起。因此，将$(document).ready()放在Ajax请求的完成回调函数中会更合适，可确保尽早发起请求以加快页面响应速度。
延迟加载非必要脚本
尽管许多人都希望在他们的网页上添加流行的社交网络按钮，如Facebook Like、Google +1和Twitter等，但是这些脚本可能会很大，从而导致页面加载速度变慢。为了提高页面响应速度，我们可以考虑在页面加载完成后再加载这些脚本。更好的是重新考虑这些按钮的必要性，以及它们是否能够改善页面的整体体验。
京公网安备11010502053053号
| Copyright 2025 就爱源码网 版权所有
