`
xuanziday
  • 浏览: 4870 次
  • 性别: Icon_minigender_1
  • 来自: 成都
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

kquery - 超快的css3 selector引擎

阅读更多

kquery实现了css3中除伪元素(pseudo-element)外的其他选择器。由于采用的编译缓存,在速度上(通常指不支持QSA的浏览器, 或者禁用掉qsa)明显超越其他选择器引擎。
在结果的准确性上也高于其他引擎(编译器系统只会缓存查询语句而不缓存查询结果, 号称速度最快的peppy则缓存了查询结果)。在支持的选择器种类上也多于其他引擎(这里不得不踢下nwmatcher, 在我所了解的引擎中它是除kquery之外在速度、支持的种类、准确性上都非常棒的引擎)。

kquery有什么特点? 其实上面的介绍已经在三个主要的方面体现出了。

1. 和nwmatcher一样是目前支持的selectors种类最多的
2. 速度上领先于其他引擎(编译系统找出最快的查询语句并缓存), 尤其是在伪类上(其他常用id class tag选择器各个引擎之间的其实差距不是太大)
3. 准确性上优势(理论上,由于不缓存查询结果即使dom在高速的变化,也能保持查询结果的准确)
4. 兼容ie+/chrome/firefox/safari/opera等浏览器(没有在各大浏览器的各个版本都进行过测试,欢迎反馈)
5. 支持扩展自定义伪类

项目地址: https://github.com/yessky/kquery

速度测试: http://test.veryos.com/selector/slickspeed/index.html
速度测试环境:没有禁用querySelectorAll,没有禁用各个引擎的缓存结果

Testsuite: http://test.veryos.com/selector/testsuite.html

如发现任何bug,欢迎反馈至admin@veryos.com或者在github上create ticket

最后,我觉得有必要回答一下"为什么重复造轮子"这个问题。

这里借用某位网友的回答。首先,不断的研究及重复造轮子有利于个人的提高,具体能提高什么,答案显而易见。
其次,正是因为不断地有新论子的造出,使得某一些被视为权威或者处于瓶颈的技术被推翻,重新设计,不断得以提高。

分享到:
评论

相关推荐

    超快的cssselector引擎kquery2.0.zip

    kquery是一款基于javascript完整实现css3选择器引擎. 兼容所有主流浏览器ie6 /chrome/firefox/opera/safari, 压缩和gzip之后仅8kb大小。智能编译引擎优化去除不必要的逻辑, 查询速度远胜于Szizzle, nwmatcher, ...

    Android-Ultra-Photo-Selector多图片选择器的使用.zip

    《Android-Ultra-Photo-Selector:打造高效多图片选择体验》 在移动应用开发中,尤其是在社交、分享类应用中,用户对图片选择功能的需求日益增强。为了满足这一需求,开发者们经常需要集成图片选择器组件。Android-...

    postcss-selector-parser:CSS选择器解析器,与postcss集成,但不需要它

    npm install postcss-selector-parser 快速开始 const parser = require ( 'postcss-selector-parser' ) ; const transform = selectors => { selectors . walk ( selector => { // do something with the ...

    postcss-add-root-selector:PostCSS插件将根选择器添加到所有其他规则

    PostCSS添加根选择器 插件将根选择器添加到所有其他规则中。 输入: . foo { color : red; } a . foo , section { color : red; } @media ( max-width : 700 px ) { # some-id { color : red; } } /* ...

    postcss-selector-namespace:使用postcss命名CSS选择器

    $ npm install postcss-selector-namespace 用法 var postcss = require ( 'postcss' ) var selectorNamespace = require ( 'postcss-selector-namespace' ) var output = postcss ( ) . use ( selectorNamespace ...

    前端开源库-css-selector-extract

    【前端开源库-css-selector-extract】是一个专门用于前端开发的开源工具,它的主要功能是能够从CSS代码中高效地提取出指定的CSS选择器。这个工具对于开发者来说尤其有用,因为它可以帮助他们更好地理解和分析项目中...

    css-selector-tokenizer, 解析和 stringifies CSS选择器.zip

    css-selector-tokenizer, 解析和 stringifies CSS选择器 CSS模块:CSS选择器标记器解析和 stringifies CSS选择器。import Tokenizer from "css-selector-tokenizer";let input = "a#content.act

    Laravel开发-laravel-lang-selector

    3. **视图集成**:将`laravel-lang-selector`提供的视图组件添加到你的布局模板中,这样用户就可以看到并选择语言。这通常是一个HTML下拉菜单,可以通过门面或者助手方法来调用。 4. **路由与控制器**:设置一个...

    grunt-css-selector-limit:封装css-selector-limit模块的Grunt插件

    grunt-css-selector-limit Grunt插件,用于检测集合中的任何CSS文件是否具有比IE的4095限制更多的选择器。包装。入门这个插件需要~0.4.2 如果您以前从未使用过 ,请务必查看《指南》,因为它说明了如何创建以及安装...

    前端开源库-has-id-selector

    `has-id-selector`是一个专门针对这一需求的开源库,它允许开发者检查CSS选择器字符串是否包含特定的ID。这个库对于优化代码和确保选择器的有效性具有显著价值。下面我们将详细探讨这个库的功能、使用方法以及在实际...

    Android 关于多图片选择器Android-Ultra-Photo-Selector的使用

    简单集成了Android-Ultra-Photo-Selector这个框架的使用,非常感谢作者,框架地址:https://github.com/AizazAZ/Android-Ultra-Photo-Selector

    videojs-max-quality-selector:Videojs插件可帮助您列出实时,自适应和渐进流中的分辨率和比特率

    videojs-max-quality-selector Videojs插件可帮助您列出实时,自适应和渐进流中的分辨率和比特率。目录 minHeight :number showBitrates :boolean showSingleItemMenu :boolean 排序:number sortEnabled :boolean ...

    postcss-selector-not:PostCSS插件进行转换

    postcss-selector-not PostCSS插件,将:not() W3C CSS 4级伪类转换为:not()CSS 3级选择器 安装 $ npm install postcss postcss-selector-not 用法 使用此input.css : p : not ( : first-child , . special ) {...

    Android-Ultra-Photo-Selector.zip

    "Android-Ultra-Photo-Selector-master"是项目的主目录,通常包含项目的所有源代码、资源文件、配置文件等。在这个目录下,开发者可以找到Android Studio工程文件(如build.gradle),Activity类(用于处理UI和业务...

    Android代码-android-multiple-images-selector

    Android Multiple Images Selector Easy-to-use library to select images in Android application Features: select images by folders support to set max number of images to be selected allow filter images ...

    angular-material-css-vars:小库使用@angularmaterial来使用CSS变量

    您想用彩虹中的所有颜色动态...// optional$mat-css-dark-theme-selector : ' .isDarkTheme ' ;$mat-css-light-theme-selector : ' .isLightTheme ' ;// init theme@include init-material-css-vars () { // If your

    Laravel开发-aliyun-ems-selector

    【压缩包子文件的文件名称列表】中的 "Aliyun-EMS-Selector-master" 很可能是该项目的源代码仓库主分支,包含了所有必要的文件和资源,如控制器、模型、视图、路由、配置、测试等,以便开发者能够克隆、安装和使用该...

    postcss-prefix-selector:使用选择器为所有CSS规则添加前缀

    $ npm install postcss-prefix-selector 与PostCSS结合使用 const prefixer = require ( 'postcss-prefix-selector' ) // css to be processed const css = fs . readFileSync ( "input.css" , "utf8" ) const out ...

    Bootstrap+BootstrapTable+x-editable(css和js)整合包

    Bootstrap+BootstrapTable+x-editable(css和js)整合包 内含 jq,js Bootstrap+BootstrapTable+x-editable内部的js 和css文件,一个整合包满足你的所有需求

    前端开源库-has-element-selector

    此外,库的源代码(在`has-element-selector-master`文件中)可能包含了实现此功能的各种细节,如错误处理、性能优化等。开发者可以通过阅读源码来学习如何高效地遍历DOM和应用CSS选择器,这对于深入理解前端性能...

Global site tag (gtag.js) - Google Analytics