当前位置: 首页 > news >正文

做网站 java c/关键词优化的技巧

做网站 java c,关键词优化的技巧,广告艺术设计,搜款网站一起做网店好了有了之前的词法分析过程,现在我们来到select函数来,这个函数的整体流程,前面也大概说过: 1. 先做词法分析获得token列表 2. 如果有种子集合直接到编译过程 3. 如果没有种子集合并且是单组选择符(没有逗号&#xff…

好了有了之前的词法分析过程,现在我们来到select函数来,这个函数的整体流程,前面也大概说过:

1. 先做词法分析获得token列表

2. 如果有种子集合直接到编译过程

3. 如果没有种子集合并且是单组选择符(没有逗号)

(1)尝试缩小上下文:如果第一个token是ID选择符,则会执行Expr.find["ID"]的方法来找到这个上下文,以后所有的查询都是在这个上下文进行,然后把第一个ID选择符剔除。

(2)尝试寻找种子集合:从右开始往左分析token,如果遇到关系选择符(> + ~ 空)终止循环,否则通过Expr.find的方法尝试寻找符合条件的DOM集合,如果找到了就讲种子集合保存起来。

4. 进入到编译过程

这里面需要讲解下为何要进行筛选的工作,前面也说过,目的就是为了尽量缩小查询范围,首先缩小上下文范围,然后缩小种子集合范围,因为从右向左查询的过程更快,所以我们是从后面开始搜索种子集合,搜索到之后,后面所有的分析过程都是在这些种子集合基础之上进行的。

Expr.find = {
  'ID' : context.getElementById,
  'CLASS' : context.getElementsByClassName,
  'NAME' : context.getElementsByName,
  'TAG' : context.getElementsByTagName
}

Expr.find返回一个函数,这个函数根据当前参数进行验证,看看是否是指定类型的节点,可以查验ID,CLASS,NAME和TAG等等。我们以class为例:

Expr.find["CLASS"] = support.getElementsByClassName && function(className, context) {if (typeof context.getElementsByClassName !== strundefined && documentIsHTML) {return context.getElementsByClassName(className);}
};
 

Expr.find["CLASS"]返回一个函数,这个函数有两个参数,第一个参数className,第二个参数context,在select里面就是通过这个函数来查询指定className的DOM集合,找到以后就是seed种子集合。

select源码如下:

    function select(selector, context, results, seed) {var i, tokens, token, type, find,//解析出词法格式match = tokenize(selector);if (!seed) { //没有指定seed// Try to minimize operations if there is only one group// 单组选择符并且以ID开头,可以做些优化if (match.length === 1) {// Take a shortcut and set the context if the root selector is an IDtokens = match[0] = match[0].slice(0); //取出选择器Token序列//找到context上下文if (tokens.length > 2 && (token = tokens[0]).type === "ID" &&support.getById && context.nodeType === 9 && documentIsHTML &&Expr.relative[tokens[1].type]) {context = (Expr.find["ID"](token.matches[0].replace(runescape, funescape), context) || [])[0];if (!context) {return results;}//去掉以查询的选择符selector = selector.slice(tokens.shift().value.length);}// Fetch a seed set for right-to-left matching//伪类方面,暂不讨论i = matchExpr["needsContext"].test(selector) ? 0 : tokens.length;//从右向左边查询while (i--) { token = tokens[i]; //找到后边的规则// Abort if we hit a combinator// 遇到关系选择符终止                    if (Expr.relative[(type = token.type)]) {break;}//对选择符进行过滤查询,看看能否找到符合条件的节点if ((find = Expr.find[type])) {// Search, expanding context for leading sibling combinators                        if ((seed = find(token.matches[0].replace(runescape, funescape),rsibling.test(tokens[0].type) && context.parentNode || context))) {// If seed is empty or no tokens remain, we can return earlytokens.splice(i, 1);selector = seed.length && toSelector(tokens);
if (!selector) {//如果选择符为空,查询完毕
                                push.apply(results, seed);return results;}
break;}}}}}        compile(selector, match)(seed,context, !documentIsHTML,results,rsibling.test(selector));return results;}

 

走到这里我们发现,我们现在已经拥有了哪些信息:token列表,缩小的context和种子集合,那么剩下的事情是不是对种子集合的每个元素再和token列表一一校验,留下符合条件的,删除不符合条件的是不是查询就完成了?
正常看起来是这样的,我们对每个种子进行边解析边分析的过程符合要求,但是Sizzle做了更进一步的处理,通过空间换时间的方式,提高了查询性能,他采用了一种叫先编译后执行的过程。首先把所有的token元素生成一个嵌套的函数,然后再针对种子集合,去执行这个函数,把符合条件的留下来,由于函数是通过闭包的方式来保存,所以当同一个选择符查询时,可以直接执行函数来查询,从而加快了查询的性能,而不用每次从头解析。

这个函数包括两种情况:

1. 关系选择器:如果token是关系选择器,则生成函数的时候需要同上一个选择器共同生成。

2. 非关系选择器:如果是非关系选择器,则直接判断种子是否满足条件即可。

比如 div > a 我们生成函数1 父节点是否是div 函数2 本身是否是a标签 函数1+函数2 就是我们最终生成的Match匹配函数,对每个种子进行执行Match匹配函数即可。

 我们看看compile的整体思路

1. 从缓存查询是否已经编译过,有的话直接拿出来

2. 判断是否tokenize过,没有的话,补一下

3. 对group的每个元素进行matcherFromTokens方法,获得该token组的组合函数,如果是包含伪类,则添加到setMatchers数组,否则添加到elementMatchers数组

4. 最后对setMatchers和elementMatchers执行matcherFromGroupMatchers方法。

这里要解释下matcherFromTokens和matcherFromGroupMatchers方法,生成最终的包含非伪类和伪类的最终匹配函数:

matcherFromTokens: 将一组token数组转换为一个Match匹配函数,比如div > a 就生成一个包含两个函数的Match匹配函数。

matcherFromGroupMatchers:由于存在伪类和非伪类选择符两种情况,这个函数的目的是融合这两种情况,最终生成一个超级匹配函数。

    compile = Sizzle.compile = function(selector, group /* Internal Use Only */ ) {var i,setMatchers = [],elementMatchers = [],cached = compilerCache[selector + " "];if (!cached) {//看看是否有缓存// Generate a function of recursive functions that can be used to check each elementif (!group) {group = tokenize(selector);}i = group.length;//对每个分组进行遍历while (i--) {//获得Match匹配函数cached = matcherFromTokens(group[i]);if (cached[expando]) {//包含伪类的添加到setMatchers数组setMatchers.push(cached);} else { //否则添加到elementMatchers数组
                    elementMatchers.push(cached);}}// Cache the compiled function// 最终融合成一个超级匹配函数返回cached = compilerCache(selector, matcherFromGroupMatchers(elementMatchers, setMatchers));}//return cached;};

 下面介绍下matcherFromTokens这个方法:输入参数是tokens,然后对每个token进行处理,这里需要了解一个知识点:

非伪类的选择符 有普通选择符和关系选择符两种,关系选择符包括以下几种情况:> 空格 + ~

保存在Expr.relative对象中

> : 表示是父子关系 对应DOM属性parentNode 是元素的第一个节点所以 first为true

空格:表示是后代关系 对应DOM属性parentNode

+:表示附近兄弟关系 对应DOM属性previousSibling 是元素的第一个节点所以 first为true

~:表示普通兄弟关系 对应DOM属性previousSibling

在matcherFromTokens方法中就会对非关系型和关系型分部处理:

matchers是存放各个选择符过滤函数的数组

1. 非关系型运算符:把该类型的过滤函数拷贝一份push到matchers数组中即可,比如前面#div_test > span input[checked=true]中的 input span等等

2. 关系型运算符:把当前的关系选择符和前面的选择符一起共同组成一个过滤函数,push到matchers数组中。

最后把matchers数组统一通过elementMatcher函数来生成一个最终的过滤函数

elementMatcher方法的作用是将一个函数数组,生成一个过滤函数,这个函数会遍历执行各个函数

//将mathcers数组的所有方法合并成一个单独的函数,这个函数会挨个执行数组中的方法。
function elementMatcher(matchers) {return matchers.length > 1 ?//如果是多个匹配器,循环判断function(elem, context, xml) {var i = matchers.length;//从右到左开始匹配while (i--) {//如果有一个没匹配中,返回falseif (!matchers[i](elem, context, xml)) {return false;}}return true;} ://单个匹配器的话就返回自己即可matchers[0];}

addCombinator为关系选择符生成过滤函数,将上一个选择符和关系选择符联合起来查询

//关系选择器过滤函数生成器,根据关系选择符的类型,返回一个关系选择符过滤函数
function addCombinator(matcher, combinator, base) {var dir = combinator.dir,checkNonElements = base && dir === "parentNode",doneName = done++;return combinator.first ?// Check against closest ancestor/preceding element、//如果first为true表示是 > 或者 + 选择符 取最近的一个元素即可,一次查询function(elem, context, xml) {while ((elem = elem[dir])) {if (elem.nodeType === 1 || checkNonElements) {//找到第一个节点,直接执行过滤函数即可return matcher(elem, context, xml);}}} :// Check against all ancestor/preceding elements//否则就是空格或~需要查询所有父节点function(elem, context, xml) {var data, cache, outerCache,dirkey = dirruns + " " + doneName;// We can't set arbitrary data on XML nodes, so they don't benefit from dir cachingif (xml) {while ((elem = elem[dir])) {if (elem.nodeType === 1 || checkNonElements) {if (matcher(elem, context, xml)) {return true;}}}} else {while ((elem = elem[dir])) {//一直向上查找,直到找到一个为止if (elem.nodeType === 1 || checkNonElements) {outerCache = elem[expando] || (elem[expando] = {});if ((cache = outerCache[dir]) && cache[0] === dirkey) {if ((data = cache[1]) === true || data === cachedruns) {return data === true;}} else {cache = outerCache[dir] = [dirkey];cache[1] = matcher(elem, context, xml) || cachedruns; //cachedruns//正在匹配第几个元素if (cache[1] === true) {return true;}}}}}};}

有了上面两个函数的支持后,matcherFromTokens的作用就遍历tokens数组

//将tokens数组转换成一个过滤函数,略过伪类部分
function
matcherFromTokens(tokens) {var checkContext, matcher, j,len = tokens.length,leadingRelative = Expr.relative[tokens[0].type],implicitRelative = leadingRelative || Expr.relative[" "],i = leadingRelative ? 1 : 0,// The foundational matcher ensures that elements are reachable from top-level context(s)matchContext = addCombinator(function(elem) {return elem === checkContext;}, implicitRelative, true),matchAnyContext = addCombinator(function(elem) {return indexOf.call(checkContext, elem) > -1;}, implicitRelative, true), matchers = [function(elem, context, xml) {return (!leadingRelative && (xml || context !== outermostContext)) || ((checkContext = context).nodeType ?matchContext(elem, context, xml) :matchAnyContext(elem, context, xml));}];for (; i < len; i++) {// 如果是关系型选择符,执行addCombinator方法if ((matcher = Expr.relative[tokens[i].type])) {matchers = [addCombinator(elementMatcher(matchers), matcher)];} else {否则直接找到选择器的过滤函数matcher = Expr.filter[tokens[i].type].apply(null, tokens[i].matches); matchers.push(matcher);}}return elementMatcher(matchers);}

下面我们来看看Expr.filter,前面说过他总共有

ID:ID选择符

Class:类选择符

Tag:标签选择符

ATTR:属性标签

CHILD:包括(only|first|last|nth|nth-last)-(child|of-type)等等对子类的标签

PSEUDO:其他伪类选择符

这几种类型,那Expr.filter里面包含的分别是各种类型的过滤函数,比如Expr.filter["ID"]

      Expr.filter["ID"] = function(id) {var attrId = id.replace(runescape, funescape);
                return function(elem) {
                    return elem.getAttribute("id") === attrId;};};

这个函数的作用就是通过参数ID返回新的函数FUNC_ID,这个函数参数传入一个DOM元素(其实就是之前的seed集合),判断这个DOM元素的ID是否是指定ID,也就是判断seed集合是否是选择符指定的ID元素。

      "TAG": function(nodeNameSelector) {var nodeName = nodeNameSelector.replace(runescape, funescape).toLowerCase();return nodeNameSelector === "*" ?function() {return true;} :function(elem) {return elem.nodeName && elem.nodeName.toLowerCase() === nodeName;};},

TAG的函数的作用就是通过参数nodeNameSelector生成一个新的函数FUNC_NODE,这个函数判断传入的DOM元素是否是指定的nodeNameSelector类型标签。

总之就是一组过滤函数,判断DOM节点是否符合选择符的条件,满足就留下,否则剔除掉。

     
           
终于要对我们的Seed进行过滤了!前面我们通过matcherFromTokens方法生成了一个包含所有选择符过滤函数的统一过滤函数,下面还需要对seed集合进行挨个过滤,就是matcherFromGroupMatchers要做的事情:
matcherFromGroupMatchers函数主要针对伪类和非伪类综合处理,我们暂不考虑伪类情况matcherFromGroupMatchers可以简化许多:
可以看到整个代码最关键的地方就是有一个双层循环,把所有的seed集合拿出来对所有的过滤函数进行执行,把返回true的集合保留下来,就是我们最终要查询的结果:

    function matcherFromGroupMatchers(elementMatchers) {        var matcherCachedRuns = 0,byElement = elementMatchers.length > 0,return function(seed, context, xml, results, expandContext) {var elem, j, matcher,setMatched = [],i = "0",unmatched = seed && [],outermost = expandContext != null,contextBackup = outermostContext,//可以看到如果没有seed集合就会把所有的DOM节点查询出来当做seed (Expr.find["TAG"]("*")) 所以我们在写选择符的时候最好不要在末尾写*
                    // We must always have either seed elements or contextelems = seed || byElement && Expr.find["TAG"]("*", expandContext && context.parentNode || context),// Use integer dirruns iff this is the outermost matcherdirrunsUnique = (dirruns += contextBackup == null ? 1 : Math.random() || 0.1),len = elems.length;if (outermost) {outermostContext = context !== document && context;cachedruns = matcherCachedRuns;}//
                // Add elements passing elementMatchers directly to results// Keep `i` a string if there are no elements so `matchedCount` will be "00" below// Support: IE<9, Safari// Tolerate NodeList properties (IE: "length"; Safari: <number>) matching elements by id
         //遍历所有seed节点
for (; i !== len && (elem = elems[i]) != null; i++) {if (byElement && elem) {j = 0;//遍历所有过滤函数 while ((matcher = elementMatchers[j++])) {// if (matcher(elem, context, xml)) {results.push(elem);break;}}if (outermost) {dirruns = dirrunsUnique;cachedruns = ++matcherCachedRuns;}}}// Override manipulation of globals by nested matchersif (outermost) {dirruns = dirrunsUnique;outermostContext = contextBackup;}return unmatched;};}
至此,$("#div_test > span input[checked=true]") 从头到尾的流程就基本走通了。为此我们可以得出几个优化选择器的结论:

1. 尽量在选择器以ID来查询,或者至少开头是以ID来查询:这样可以快速缩小查询的根节点。

2. 在Classe前面使用Tags:因为getElementsByTagName方法是第二快的查询方法

3. 在选择器最后尽量指定seed元素(千万不能用*):因为Sizzle会从最后的选择符开始寻找符合条件的seed集合

4. 尽量使用父子查询来代替后代查询:后代查询需要循环查找,父子查询范围小很多。

5. 缓存已查询的jQuery对象:通过空间换时间的方式,不要每次都要执行过滤函数。



 

转载于:https://www.cnblogs.com/zhusheng2008/p/6624764.html

http://www.jmfq.cn/news/4732453.html

相关文章:

  • wordpress 消息队列/成都网站seo厂家
  • 网站建设seo视频/seo核心技术排名
  • 大连云购物app下载安装到手机/百度ocpc怎么优化
  • 网站建设 上海交大/网站管理系统
  • 全面的网站建设/网络营销方案总结
  • 外贸网站建设和seo/成都调查事务所
  • 深圳贸易网站开发/竞价推广工作内容
  • 有专门做序列图的网站/免费b站推广网址有哪些
  • 原生态旅游网站开发需求分析/疫情最新政策最新消息
  • iis默认网站 建设中/安卓优化大师官网
  • 河北提供网站建设公司电话/推广seo网站
  • 做爰午夜福利全过程视频网站/无锡seo
  • 网站建设经验材料/表白网页制作免费网站制作
  • 长春有什么好的网站制作公司/网络营销推广方案3篇
  • 南京大型网站建设/seo的含义是什么意思
  • 做网站需要准备什么东西/品牌软文营销案例
  • 珠海建站模板源码/营销技巧美剧
  • 温州网站建设honmau/如何优化
  • 网站的动态新闻数据库怎么做/推广专员
  • 高端网站建设服务商/google网页版登录入口
  • 网站建设_免费视频/百度百家号官网登录
  • 济南做网站哪好/朋友圈产品推广文案
  • 建筑公司网站首页/直通车推广技巧
  • 大邯郸网站/360网站关键词排名优化
  • 智汇团建网站登录平台/百度指数官网入口登录
  • 做网站先用dw还是asp/办公软件速成培训班
  • 企业做网站需要那些条件/头条热点新闻
  • 科技企业网站/百度24小时人工客服电话
  • js网站跳转代码/谷歌代运营
  • 西安正规网站建设公司/杭州网站优化搜索