如何负责任地使用现代化

负责任地使用 Modernizr：提升网站性能的策略

Modernizr，一个 JavaScript 库，能够检测浏览器是否支持特定功能。然而，为了避免减慢网站速度，务必谨慎使用。本文探讨如何负责任地使用 Modernizr，以及其他类似库，例如 jQuery。

为何关注 Modernizr 的加载方式？

一个关键问题：您愿意等待数秒才能访问网页吗？答案是否定的，您的访客也一样。漫长的加载时间会直接影响用户体验，导致访客流失。因此，即使追求炫酷的功能，也必须兼顾网站性能。

关键在于加载方式。许多 JavaScript 文件在页面加载完毕后才执行，将其放在 中毫无意义，反而会阻塞页面渲染。大型脚本放在 中，访客必须等待脚本加载完毕才能看到页面内容。

Modernizr 用于检测 CSS transitions、transformations 等现代特性。除了特殊情况，这些特性并非显示页面内容的必要条件。大多数情况下，Modernizr 可以放在 的末尾加载，而非 。

优化并非只针对单个资源

如果一个使用 Modernizr 的网页加载缓慢，仅仅负责任地加载该库可能不足以解决性能问题。负责任的方法意味着每次包含 JavaScript 文件或其他大型资源时都需仔细考虑。优化单个资源的效果可能不明显，但优化所有资源则能显著提升性能。

明确需求

在使用 Modernizr 之前，务必明确需求。Modernizr 提供许多测试，但并非所有测试都对您的项目有用。Modernizr 官网提供自定义构建工具，您可以仅选择必要的测试，生成更小的自定义版本，从而减少下载时间。

建议在项目开发阶段使用完整版 Modernizr，发布时再生成自定义版本。更好的方法是使用自动化工具，例如 grunt-modernizr，它会扫描您的 CSS 和 JavaScript 文件，找出所有用到的特性，并生成相应的自定义 Modernizr 构建。

并非所有测试都必要

例如，Modernizr 可以测试浏览器是否支持 text-shadow CSS 属性。如果不支持，该属性会被忽略，不会导致网站崩溃。因此，除非 text-shadow 对您的网站至关重要（例如，用于提升文本可读性），否则该测试可能没必要。

对于需要回退方案的情况，您仍然需要进行测试，但并非所有回退方案都需要 Modernizr。一些 CSS 回退方案本身就不需要测试。

html5shiv 用于在旧版 Internet Explorer 中支持 HTML5 元素。Modernizr 可以包含它，但如果您不兼容旧版 IE，则不需要。建议使用 html5shiv，但并非必须通过 Modernizr 加载，可以考虑通过条件注释或内联脚本的方式加载。

部分功能可以延迟加载

大多数 Modernizr 特性可以延迟加载到页面底部。这不会阻止用户看到页面内容，而是先显示基本内容，再加载增强体验。

然而，某些特性，例如 html5shiv，必须放在 中，才能在渲染 HTML5 元素之前加载。但您可以通过条件注释或内联脚本的方式优化其加载方式，减少 HTTP 请求。

决定是否将 Modernizr 放在 中，取决于您的页面结构和功能。如果测试结果不会影响页面布局，则可以延迟加载。

效率考量

虽然将 Modernizr 放在页面底部可以提高加载时间，但 Paul Irish 指出，许多 Modernizr 的测试（尤其是 CSS 测试）会引起重排（reflows），导致浏览器重新计算样式，这可能会抵消延迟加载带来的好处。

这取决于您的 DOM 树的复杂性。在 DOM 树较简单的情况下，测试执行速度较快。建议进行测试，评估在不同浏览器和版本下的执行时间。自定义构建可以减少不必要的测试，进一步提高效率。

总结

本文探讨了如何负责任地使用 Modernizr，以及在不同情况下如何选择合适的加载位置。无论选择哪种方法，都应尽量减少不必要的资源下载，为用户提供良好的体验，尤其是在网络连接较慢的情况下。 这种负责任的开发方法不仅适用于 Modernizr，也适用于其他库，例如 jQuery。 避免下载无用数据，是每个开发者都应遵循的原则。

以上是如何负责任地使用现代化的详细内容。更多信息请关注PHP中文网其他相关文章！