淘优惠

淘优惠

淘宝618超级争霸入口 淘宝618争霸赛在哪里

双十一活动 0

淘宝搜:【天降红包222】领超级红包,京东搜:【天降红包222】
淘宝互助,淘宝双11微信互助群关注公众号 【淘姐妹】

淘宝618超级喵运会一个红包多少钱,淘宝618超级红包什么时候结束,淘宝618超级红包口令,淘宝618超级红包怎么领
推荐
低价的补单价格2.8元起。通过长期收集上百万商家的实践建议,整理的一部分在行业内相对来说性价比以及安全度最高的几个平台,功能也比较全,淘宝、拼多多、京东、抖音都有
2022-05-01 阅读()
推荐
蒋校长从2012年开始电商创业,微博已经被官方认证最具有影响力的电商自媒体之一,在电商行业深耕多年,积累了丰富的经验,下面的内容是由蒋校长亲诉淘宝从零做到年销千万的经验。
2022-05-01 阅读()
淘宝推广
?618大家都已经非常期待了,各个平台也都开始筹备起来了,对于商家来说618确实是一个不错的机会,而对于消费者来说,618购买的商品也非常实惠。淘宝联盟618超级争霸赛是什么时候?
2022-05-24 16:00:07 阅读(6887)
淘宝联盟618超级争霸赛 淘宝联盟618超级争霸赛阶段 淘宝联盟618超级争霸赛是什么时候
淘宝推广
?淘宝联盟现在是很多小伙伴们都比较喜欢的,在淘宝联盟里面同样也是有618活动的,具体的活动就是超级争霸赛,这个活动需要大家组队,淘宝联盟618超级争霸赛如何组队?
2022-05-24 16:01:10 阅读(5005)
淘宝联盟618超级争霸赛 淘宝联盟618超级争霸赛如何组队 淘宝联盟618超级争霸赛奖池瓜分规则
淘宝推广
淘宝联盟618推出了超级争霸赛的活动,该活动由官方出资百万元激励,淘宝客通过促进活跃消费者来提高自己的收益,解锁红包。那淘宝联盟618超级争霸赛有什么奖励?
2022-05-24 13:46:20 阅读(5021)
淘宝联盟618超级争霸赛有什么奖励 淘宝联盟618 淘宝联盟
淘宝推广
淘宝联盟今年618除了推出超级红包,另外还有超级争霸赛,战队排位赛或者个人战力累计优秀的将有机会获得大奖,下面我们一起来看看淘宝联盟618超级争霸赛推广者规则。
2022-05-23 19:38:27 阅读(3938)
淘宝联盟618 淘宝联盟618超级争霸赛 淘宝联盟618超级争霸赛推广者规则
淘宝推广
超级U选专区加入天猫超市商品进行招商,拥有猫超权限以及超级U选权限的团长,也可以通过超级U选专区进行招商并查询猫超商品入选“单单补”的门槛了。
2023-02-23 19:21:05 阅读(8395)
淘宝联盟 淘宝联盟超级U选 淘宝联盟超级U选团团长
淘宝推广
为更好地激励团长们招商,淘宝联盟超级U选单单补佣金补贴争取到大量补贴商品坑位,团长们可多多挖掘符合招商规则的商品,冲刺打榜赛,前350名的成绩优异者将获得下一期“超级U选”IP专区招商资格。
2022-12-19 20:01:43 阅读(5512)
淘宝联盟年货节 淘宝联盟年货节超级U选团长 淘宝联盟年货节超级U选团长招商规则
淘宝推广
淘宝38焕新周活动马上就要开始了,淘宝直播为了能够帮助主播商家吸引更多的粉丝,现在上线了淘宝直播38焕新周新粉1元超级福利购活动,有些商家不理解这是什么活动?下面来我们就来给大家讲解一下。
2023-03-01 20:14:47 阅读(8845)
淘宝直播38焕新周 淘宝直播38焕新周新粉1元超级福利购是什么活动 淘宝直播38焕新周新粉1元超级福利购
淘宝推广
淘宝联盟将在38节期间(2023.3.4-2023.3.8)推出“爆品坑产王”活动,对于团长爆品挖掘和推广的行为进行奖励,多推多得赢大奖
2023-02-28 19:23:07 阅读(7825)
淘宝联盟38节 淘宝联盟38节团长爆品坑产王活动 淘宝联盟38节团长
淘宝推广
淘宝联盟是一个不错的推广方法,有一些朋友在使用淘宝联盟进行推广产品的过程中,发现有一个淘宝联盟收藏夹的玩法,所以想要搞清楚这个淘宝联盟收藏夹是什么?如何使用?
2023-02-24 15:42:59 阅读(6521)
淘宝联盟收藏夹 淘宝联盟收藏夹怎么设置 淘宝联盟收藏夹是什么
淘宝推广
淘宝联盟平台上面的玩法越来越多了,有一些用户朋友最近发现了一个淘宝联盟玩法钱包老账户的玩法,所以想要搞清楚这个淘宝联盟玩法钱包老账户是什么?怎么解绑?
2023-02-24 15:41:51 阅读(8202)
淘宝联盟 淘宝联盟玩法钱包老账户 淘宝联盟玩法钱包是什么
淘宝推广
淘宝直播为了扶持淘宝直主播/商家,推出了各种扶持政策,超级播招募令就是其中一个有超多流量加持的活动,现为大家介绍详细的淘宝直播焕新季超级播活动。
2023-02-23 19:28:20 阅读(5401)
淘宝直播焕新季 淘宝直播焕新季超级播活动 淘宝直播焕新季超级播活动规则
淘宝推广
直播智能讲解功能是淘宝超级直播发布的新产品,旨在为重点商品进行直播讲解录制打点。不知道淘宝超级直播智能讲解是什么的以及如何开启的,可阅读下文。
2023-02-22 19:08:48 阅读(7110)
淘宝超级直播智能讲解是什么 淘宝超级直播智能讲解 淘宝超级直播智能讲解如何开启
淘宝推广
淘宝直播推出38焕新周―超级新品招商活动,那么本次活动招商规则是什么?一起来了解下。
2023-02-21 20:04:24 阅读(5936)
淘宝直播38焕新周 淘宝直播38焕新周超级新品
淘宝规则
为规范招商服务商生态市场,为提升淘宝联盟的招商权限使用效率,淘宝联盟将《招商服务商管理规范》的团长清退规则进行了调整。全部规则内容见《招商服务商管理规范》,更新后的内容上线时间2月16日,本公告重点说明管理规范中调整的内容。
2023-02-16 20:24:28 阅读(3174)
淘宝联盟 淘宝联盟招商服务商 淘宝联盟招商服务商清退规则
淘宝推广
淘宝联盟的时候,使用工具的话可以提高工作效率,同时也可以获得比较好的推广效果,所以产生了一个淘宝联盟工具服务商,那么今天跟大家详细介绍一下这个淘宝联盟工具服务商有什么好处!
2023-02-15 22:20:32 阅读(5074)
淘宝联盟工具服务商 淘宝联盟工具服务商有什么好处 淘宝联盟工具服务商要求什么条件


淘宝详情页切片优化 淘宝详情页如何创建html

淘宝详情页切片每张要多大,淘宝详情页切片怎么切,淘宝详情页切片保存什么格式,淘宝详情页切图方法

对于复杂页面,为了将用户关注的内容尽可能快渲染出来,至少有两种方式:

一、Facebook 的 BigPipe 方式。先输出页面整体布局,然后逐步输出脚本块,一边输出一边执行,将内容渲染回页面布局中。这样可以让服务端的运算、网络传输和浏览器端的渲染变成并行。BigPipe 最主要解决的问题是服务端的运算时间,当服务端的运算时间大于 300 ~ 500ms 时才能体现出优势。当服务端响应非常快(小于 100ms),BigPipe 退化为下面要讲的 【【淘密令】】.

二、淘宝商品详情页的 【【淘密令】】 方式。淘宝的商品详情页,服务端平均响应时间为 52ms, 采用 BigPipe chunked 输出意义不大。这次优化主要在浏览器端。页面下载完毕后,要经过 Tokenization ― Tree Construction ― Rendering. 要让首屏尽快出来,得给浏览器减轻渲染首屏的工作量。可以从两方面入手:

  1. 减少 DOM 节点数。节点数越少,意味着 Tokenization、Rendering 等操作耗费的时间越少。(对于典型的淘宝商品详情页,经测试发现,每增加一个 DOM 节点,会导致首屏渲染时间延迟约 0.5ms)
  2. 减少脚本执行时间。脚本执行和 UI Update 共享一个 thread, 脚本耗的时间越少,UI Update 就能越发提前。

对于 BigPipe 来说,初始输出的只有页面布局,DOM 节点数不多。首屏的 DOM 节点数主要取决于首屏脚本块中,字符串化的 html 代码:

big_pipe.onPageletArrive({ "【【微信】】": {  } })

这种方式下,页面中的 DOM 节点是逐步增加的。尚未渲染的 DOM 节点,不会影响 TTI 区域。

对于 【【淘密令】】 来说,减少 DOM 节点数的方式有:

  1. 和 Facebook 的 BigPipe 一样,调整页面代码为 页面布局 + 脚本块。BigPipe 是服务器 chunked 输出 html 内容,【【淘密令】】 是服务器一次性输出,其他都是一样的。
  2. 尽量少调整页面代码,但通过某种方式,将首屏不需要的 html 代码先存放起来。渲染好首屏后,再将存储好的 html 代码逐步渲染出来。

最容易想到的一种方式是学习 Facebook 好榜样,用 js 字符串来存放:

<【【微信】】;【【微信】】="<p>some data</p>...";</【【微信】】;

这种方式对于 【【淘密令】】 来说,并不是很好:

  • 由于存放在 js 字符串变量中,需要对双引号或单引号转义。
  • 由于 【【微信】】 是内嵌的,需要对 【【微信】】ETAGO转义。
  • 服务器端需要将 html 代码转化为一行。(也可以不转成一行,用续行符来做。)
  • 当 html 代码中含有 【【微信】】 时,需要先去除 【【微信】】 中的单行注释,否则转化成一行时,会出问题。这一步,看似简单,实际上很不容易,特别是对于淘宝旺铺这种有第三方代码的情况。(移除注释的方法可以参考:Simple but Safe Comment Removal, 使用正则的方式很难做到 0 bug, 不用正则的话,需要引入 html parser 和 java【【微信】】 parser, 效率更低。)

    把代码规范做好,把校验工作做好,再加上预处理和缓存,js 字符串的方式也是非常不错的。但对于淘宝详情页来说,目前用 js 字符串的方式需要做的改动比较多,增加的服务器消耗不少,不是很合适。

    我们这次优化的目标是:

    1. 大幅度减少首屏渲染时间。
    2. 尽量不改变原有开发习惯。
    3. 用尽量少的代码做尽量多的优化。

    为了便于获取注释内容,添加一层包裹:

    <div id="【【微信】】"><!-- html code--></div>

    这样,获取代码很简单:

    【【微信】】=document.getElementById('【【微信】】').childNodes[0].nodeValue;

    缺点是:

  • 服务端,html 中的 要替换为某种特殊标记。(不能简单转义为 )
  • 服务端,html 中的也要替换为某种特殊标记。否则在 Firefox 低版本中存在bug.
  • 浏览器端,得到 htmlCode 后,要将上面的特殊标记替换回原值。
  • 当 html code 很大时,替换的效率不高。依赖特殊标记的替换理论上也不完美。

    还有什么存放方式呢?

    HTML 元素分为五大类:

    1. 【【微信】】. 像 hr, br, base 这种。
    2. Raw text elements. 有两个:【【微信】】 和 style.
    3. RCDATA elements. 也有两个:textarea 和 title.
    4. Foreign elements. 来自 MATHML 和 SVG 的元素。
    5. 【【微信】】. 除了以上四种类型之外的所有元素,比如 p, div, 【【微信】】 等。

    显然,【【微信】】 和 Foreign elements 不适合用来存放 html 代码。

    对于 【【微信】】, 里面的 < 字符会被当做 tag open 来解析,有一个方式是通过 display:none 来避免渲染:

    <di【【微信】】="display:none">html code</div>

    这样做,减少的只是可见的 DOM 节点数,DOM 总数依旧不变。Tokenization ― Tree Construction 等操作的耗时并没减少。

    我们将重点放到 Raw text elements 和 RCDATA elements 上来。

    先了解下 CDATA(Character Data) 的相关知识点。

    在 XML 中,不包含子元素的元素的内容默认必须是 PCDATA(Parsed Character Data):

    <data><p>some text</p></data>

    “Parsed” 是指 < 和 & 字符要转换成 < 和 & 实体字符形式。如果不想写一大堆 &xx;, 可以直接标记为 CDATA:

    <data><![CDATA[<p>some text</p>]]></data>

    这是 XML 的习惯,很严格,但对用户并不友好。在 HTML 中,如果要兼容 XML, 得像如下一样:

    <【【微信】】;//<![CDATA[var t="<p>";//]]></【【微信】】;

    增加的 <![CDATA[ 很无聊。【【微信】】 中本就是 CDATA.

    为了让用户更舒心,让代码更自然,HTML 将 【【微信】】 和 style 定义为 Raw text elements. 也就是说,这两个元素里面的内容是 raw text, 里面出现的 > 就表示 > 字符本身,不会被当作 tag open 来解析;> 也不会根据实体字符来转义,就表示 > 字串自身。这就是 CDATA.

    Raw text elements 有一个限制:里面的内容不能有自身的ETAGO标记,也就是说,【【微信】】 里的内容不能含有 </【【微信】】(\s|\\|>), 否则就会导致 【【微信】】 提前结束:

    <【【微信】】;[xss_clean]('<【【微信】】;alert("O HAI")</【【微信】】;');</【【微信】】;

    上面的代码会出错,必须打破 </【【微信】】 组合:

    <【【微信】】;  // Using string 【【微信】】ion:  [xss_clean]('<【【微信】】;alert("heh")<' + '/【【微信】】;'); // Lame.  // Using a string literal escape:  [xss_clean]('<【【微信】】;alert("huh")<\x3C【【微信】】;'); // Lame.  // Simply escaping the solidus character with a re【【微信】】 (\):  [xss_clean]('<【【微信】】;alert("O HAI")</【【微信】】;'); // Awesome!</【【微信】】;

    style 也类似,不多说。

    除了 Raw text elements, 还有 RCDATA elements. 我们来看看。

    RCDATA(Replaceable Character Data) 表示里面可以有 &xx; 等实体字符,也可以包含 < 字符而不会被当作 tag open 来解析。比如:

    <textarea><p><</p></textarea>

    在 RCDATA 里,< 可替换为 < (Replaceable 的含义),拿到值(比如 textarea.value)后,是无从得知源码里是否有 < 等实体字符的。

    回到正题。在 Raw text elements 里,可以用 【【微信】】 来存放数据:

    <【【微信】】 type="text/html" id="【【微信】】-data"><p>some text</p></【【微信】】;

    获取也很简单:

    【【微信】】=document.getElementById('【【微信】】-data')[xss_clean];

    这个方案比用注释来存放的方案更好,但依旧存在以下缺点:

    1. 服务端,要将 【【微信】】 里 html 中的 </【【微信】】 替换为某种特殊标记。
    2. 浏览器端,得到 htmlCode 后,要将上面的特殊标记替换回原值。

    注意:特殊标记不能是 </【【微信】】, 因为有可能存在以下代码:

    <【【微信】】 type="text/html" id="【【微信】】-data"><【【微信】】;【【微信】】='</【【微信】】;';</【【微信】】;</【【微信】】;

    这样替换回原值时,会误伤 str 字符串。

    textarea 中的内容会按照 RCDATA 规则来解析:

    1. 遇到 & 时,会尽可能得到实体字符。
    2. 遇到 </textarea(\s|\\|>) 时,会结束解析。
    3. 其他都直接作为 textarea 的内容。

    <textarea id="area-data"><p>some text</p></textarea>

    获取非常简单:

    【【微信】】=document.getElementById('area-data').value;

    缺点:

    1. 服务端,要将 html 中的 & 转义成 &
    2. 服务端,要打破 ETAGO, 将 </textarea 转义成 </textarea

    优点很明显,在浏览器端,只需通过 textarea.value 取值即可,无需进行任何转义替换操作。并且理论上不会出现任何 bug.

    经过上面的分析,结果已经很明显,用 RCDATA elements 来存放数据是最妥当的。title 元素明显不合适,因此最后的选择就剩下一个了:textarea. 并且从语义上讲,用 text area 来存放 html text 也说得过去^o^

    可以根据实际情况,将页面划分成几大区域。非首屏区域,简单转义后,直接用 textarea 包裹起来。这样,DOM 数立刻就减少了。浏览器在拿到 html 代码时,首次 Tokenization ― Tree Construction 的速度就会大大加快。

    完整的优化,还需要:

    1. 给浏览器合理的喘息(UI Update)时间,等首屏真正在显示器上绘制出来后,再进行下一步操作。
    2. 得到 textarea.value, 填充回 DOM 树时,得妥善处理内嵌的 【【微信】】 代码。
    3. 对内嵌 【【微信】】 代码中的 [xss_clean] 要妥善处理。
    4. 通过 textarea 回填,里面的非 defer 和 async 脚本会从同步变成异步。要妥善处理依赖关系,不破坏原有脚本逻辑。
    5. 对于优化项目来说,完备的测试和监控非常重要。
    6. 这次还做了 AssetsTransfer. 用户第一次访问时,会将首屏相关的脚本和样式内嵌,并做预加载。用户再次访问时,则改成外链方式,这样能充分利用浏览器缓存,并减少 html 传输量。

    最后,给一张优化成果图:

    这是一个典型的淘宝详情页的首屏时间趋势图。可看出,首屏时间从优化前的 3s 降低到了优化后的 1.5s 左右,快了一倍!

    更深度的优化需要对页面内容(包括脚本)做进一步的细粒度模块化,区分出优先级,然后根据需求,灵活自由地控制各个模块的下载和执行等等

    这篇博客写得比较杂,关于 【【淘密令】】 优化的更多细节,以后有机会再细说。欢迎反馈、拍砖。欢迎业界各位朋友尝试 【【淘密令】】 优化,希望国内的站点速度都越来越快!

    CDATACDATA ConfusionHTML5 TokenizationThe end-tag open (ETAGO) delimitertokenization of htmlhtml 实体字符值

    2011-09-23:在业界,【【微信】】 经常用来存放 template 数据:

    <【【微信】】 type="text/template"><h1>{{title}}</h1><p>I am {{name}}...</p></【【微信】】;

    绝大部分情况下,template 里不会出现 </【【微信】】 . 这样,服务端和浏览器端都无需做任何 replace, 是目前用来存放 template 的最佳实践。

    2011-09-24:举例说明下 textarea 中为何要转义 &. 假设原代码为:

    <p>&lt; represents <</p><p></p></p>

    如果直接放到 textarea 中,

    <textarea><p>&lt; represents <</p><p></p></p></textarea>

    由于 textarea 是 RCDATA 元素,上面的代码等价于:

    <textarea><p>< represents <</p><p></p></p></textarea>

    获取 textarea.value,回填到 DOM 树的代码为:

    out[xss_clean]=textarea.value;

    这时页面中的显示效果明显和原来不一样了。如果将所有 & 都转化成 & 则可以保持原样。

    注意:理论上,并不需要将所有 & 转化成 &, 只需要将与 HTML 语法冲突的字符串 < > &   中的 & 转化成 & 即可。但这样做,还得处理 &#xx 等数值表示,比如 & 还有 & & 两种表现形式,这样替换起来更麻烦,不如将所有 & 替换成 & 来得快捷高效。

    举报/反馈