jquery - 使用 jQuery 为占位符创建的 CSS 的性能

Question

我想要一个输入占位符。我开始测试 Chrome、Mozilla 和 IE 10(IE8 待定)。

属性占位符在 chrome 和 mozilla 中工作正常。但在 IE 10 中表现很奇怪。当焦点转到输入时，文本甚至在将内容写入输入之前就消失了。

我发现这是 IE 中的错误。后来得到了一个替代@Placeholder using jQuery .这在 IE 10、Mozilla 和 Chrome 中运行良好。不确定它是否也适用于 IE 8。

我的问题在这里:

使用 jQuery 创建的占位符会比内置的 css 属性“placeholder”表现更好吗？如果 jQuery 的性能不好，我会坚持使用 CSS 属性并继续使用有缺陷的 IE 行为。这很重要，因为我正在开发的页面将具有最大负载。另外，我必须在 IE 8 中测试这个 jQuery。

提供答案后的解决方案:我决定使用 jQuery 创建的 CSS，原因如下:

1. IE 8 不支持属性占位符。
2. IE 10 存在占位符行为的错误。
3. 一个小型 jQuery 插件将与 IE、Mozilla 和 Chrome 兼容。可以根据我的方便修改答案。
4. 我正在设计的页面将有最多 4 个输入字段。由于页面上的元素较少，性能不会有太大影响，尽管 CSS 的性能更好。

Answer 1

咨询CanIUse并注意只有 IE9 及以下版本需要占位符属性 polyfill。您可以根据 Modernizr 有效地加载/激活 polyfill对 native 占位符属性支持的检测。

对于IE10，注释是对的，会有一个fix from the IE team很快。

要在没有测试的情况下回答您的实际问题，通常更安全的做法是假设浏览器功能的 native 实现比需要由浏览器解析和解释的 js 版本更快。我的猜测是没有太大的区别，也不值得关心。一个做得好的 polyfill 可以比一个做得不好的本地实现更快。除非动画或事件处理程序被滥用并且运行过于频繁或每次运行时间过长，否则不应该出现糟糕的性能。