金沙国际官网_金沙国际平台登录

因为这个金沙国际官网_金沙国际平台登录网站与很多的大型澳门赌场都有合作,金沙国际官网_金沙国际平台登录尽职尽责,高效执行,保持好奇心,不断学习,追求卓越,点击进入金沙国际官网_金沙国际平台登录马上体验吧,所以现在也正式地开始了营业。

您的位置:金沙国际官网 > web前端 > 无线性能优化,标签与搜索引擎优化

无线性能优化,标签与搜索引擎优化

发布时间:2019-11-06 08:19编辑:web前端浏览(122)

    word-break:break-all 和 word-wrap:break-word 的区别

    2015/11/19 · CSS · 2 评论 · word-break

    原文出处: 张鑫旭   

    无线性能优化:Composite

    2016/04/26 · 基础技术 · 无线

    原文出处: 淘宝前端团队(FED)- 冬萌   

    图片 1

    一个 Web 页面的展示,简单来说可以认为经历了以下下几个步骤。

    图片 2

    • JavaScript:一般来说,我们会使用 JavaScript 来实现一些视觉变化的效果。比如做一个动画或者往页面里添加一些 DOM 元素等。
    • Style:计算样式,这个过程是根据 CSS 选择器,对每个 DOM 元素匹配对应的 CSS 样式。这一步结束之后,就确定了每个 DOM 元素上该应用什么 CSS 样式规则。
    • Layout:布局,上一步确定了每个 DOM 元素的样式规则,这一步就是具体计算每个 DOM 元素最终在屏幕上显示的大小和位置。web 页面中元素的布局是相对的,因此一个元素的布局发生变化,会联动地引发其他元素的布局发生变化。比如,`` 元素的宽度的变化会影响其子元素的宽度,其子元素宽度的变化也会继续对其孙子元素产生影响。因此对于浏览器来说,布局过程是经常发生的。
    • Paint:绘制,本质上就是填充像素的过程。包括绘制文字、颜色、图像、边框和阴影等,也就是一个 DOM 元素所有的可视效果。一般来说,这个绘制过程是在多个层上完成的。
    • Composite:渲染层合并,由上一步可知,对页面中 DOM 元素的绘制是在多个层上进行的。在每个层上完成绘制过程之后,浏览器会将所有层按照合理的顺序合并成一个图层,然后显示在屏幕上。对于有位置重叠的元素的页面,这个过程尤其重要,因为一旦图层的合并顺序出错,将会导致元素显示异常。

    当然,本文我们只来关注 Composite 部分。

    Meta 标签与搜索引擎优化

    2016/01/08 · HTML5 · Meta

    原文出处: 静子(@静-如秋叶)   

    当谈及到<meta>标签对搜索引擎排名的影响,很多人都存在误解。在过去,许多已经失去作用的标签仍然被频繁使用。所以哪些标签对搜索引擎优化(SEO)有作用,哪些没有呢?

    一、CSS是门重经验重积累的学科

    下面这张截图是我转发一篇z-index相关文章时候的评论,因为我加了一句“学习了”,在我看来其实很正常的,因为我确实不知道opacitytransform等新属性会影响元素的z-index

    图片 3

    CSS的学习,就我个人看来,是有别于JavaScript这张传统程序语言的学习的。本身属性就多,值也多,不同属性在一起表现也不一样,不同属性和不同类型的HTML标签在一起又不一样,再加上兼容性差异和未定义行为。就像是很多个不确定因素,有着无穷多的组合和可能性。掌握这些不确定性,看书是绝对不够的,一定是要多多实践,多多思考,多多积累。对于底层机理的理解,也是需要一定的天赋的。

    因此,就是自己很多年一直与CSS密切打交道,学习它,也有很多不知道的,理解不透彻,或者说因为要学习和思考的东西太多,还来不及估计到一些属性或者声明。

    比方说本文要介绍的word-break:break-allword-wrap:break-word, 虽然都有使用,都照过面,实际上,却一直没有机会能够好好看看这两个到底有什么区别,各个浏览器的兼容性如何,等等。换句话说,就是深入理解。

    浏览器渲染原理

    在讨论 Composite 之前,有必要先简单了解下一些浏览器(本文只是针对 Chrome 来说)的渲染原理,方便对之后一些概念的理解。更多详细的内容可以参阅 GPU Accelerated Compositing in Chrome

    注:由于 Chrome 对 Blank 引擎某些实现的修改,某些我们之前熟知的类名有了变化,比如 RenderObject 变成了 LayoutObject,RenderLayer 变成了 PaintLayer。感兴趣的看以参阅 Slimming Paint。

    在浏览器中,页面内容是存储为由 Node 对象组成的树状结构,也就是 DOM 树。每一个 HTML element 元素都有一个 Node 对象与之对应,DOM 树的根节点永远都是 Document Node。这一点相信大家都很熟悉了,但其实,从 DOM 树到最后的渲染,需要进行一些转换映射。

    图片 4

    什么是Meta标签

    Meta标签给搜索引擎提供了许多关于网页的信息。这些信息都是隐含信息,意味着对于网页自身的访问者是不可见的。

    你可以在网页的 <head>元素中发现<meta>标签。在过去,有人曾经问我它是否可以放在网页的<body>,最好不要这样做。如果<meta>标签被放在<body>位置,某些浏览器可能无法识别它们,也就相当于你创建了无效的标签。

    通常情况下,<meta> 标签会包含一个name属性,用来设置元数据。元数据的值放在content属性里面。你可以在<meta>标签中使用各种名称/值对,让我们来看看其中的一些。

    二、了解word-break属性

    MDN上展示的语法为:

    CSS

    /* 关键字值 */ word-break: normal; word-break: break-all; word-break: keep-all; /* 全局值 */ word-break: inherit; word-break: initial; word-break: unset;

    1
    2
    3
    4
    5
    6
    7
    8
    9
    /* 关键字值 */
    word-break: normal;
    word-break: break-all;
    word-break: keep-all;
     
    /* 全局值 */
    word-break: inherit;
    word-break: initial;
    word-break: unset;

    几个关键字值的含义如下:

    normal
    使用默认的换行规则。

    break-all
    允许任意非CJK(Chinese/Japanese/Korean)文本间的单词断行。

    keep-all
    不允许CJK(Chinese/Japanese/Korean)文本中的单词换行,只能在半角空格或连字符处换行。非CJK文本的行为实际上和normal一致。

    其中,break-all这个值所有浏览器都支持。但是keep-all就不这样了,虽然有一定的发展和进步 – Chrome44正式支持了,但是,iOS下的Safari8/9都还不支持(下表黄绿色的表示不支持keep-all)。换句话说,基本上现在移动端还不适合使用word-break:keep-all.图片 5

    上面的兼容性数据最小面那行文字很有意思:

    Chrome, Safari and other WebKit/Blink browsers also support the unofficial break-word value which is treated like word-wrap: break-word.

    翻译成简体中文就是:

    Chrome, Safari以及其他WebKit/Blink浏览器还支持费官方标准的break-word值,其表现就和word-wrap: break-word一样。

    OK,另外一个男主角登场了,word-wrap.

    从 Nodes 到 LayoutObjects

    DOM 树中得每个 Node 节点都有一个对应的 LayoutObject 。LayoutObject 知道如何在屏幕上 paint Node 的内容。

    你可以会遇到一些Meta标签

    让我们运行一下在一个网页中发现的几个不同的 <meta> 标签。

    三、了解word-wrap属性

    MDN上展示的语法为:

    CSS

    /* 关键字值 */ word-wrap: normal; word-wrap: break-word; /* 全局值 */ word-wrap: inherit; word-wrap: initial; word-wrap: unset;

    1
    2
    3
    4
    5
    6
    7
    8
    /* 关键字值 */
    word-wrap: normal;
    word-wrap: break-word;
     
    /* 全局值 */
    word-wrap: inherit;
    word-wrap: initial;
    word-wrap: unset;

    几个关键字值的含义如下:

    normal
    就是大家平常见得最多的正常的换行规则。

    break-word
    一行单词中实在没有其他靠谱的换行点的时候换行。

    word-wrap属性其实也是很有故事的,之前由于和word-break长得太像,难免会让人记不住搞混淆,晕头转向,于是在CSS3规范里,把这个属性的名称给改了,叫做:overflow-wrap. 哎呀,这个新属性名称显然语义更准确,也更容易区别和记忆。

    但是呢,恕我赵某咳两声,也就Chrome/Safari等WebKit/Blink浏览器支持。

    所以,虽然换了个好看好用的新名字,为了兼容使用,目前,还是乖乖使用word-wrap吧。兼容性见下表(黄绿色的表示不支持overflow-wrap新的标准属性的):图片 6

    从 LayoutObjects 到 PaintLayers

    一般来说,拥有相同的坐标空间的 LayoutObjects,属于同一个渲染层(PaintLayer)。PaintLayer 最初是用来实现 stacking contest(层叠上下文),以此来保证页面元素以正确的顺序合成(composite),这样才能正确的展示元素的重叠以及半透明元素等等。因此满足形成层叠上下文条件的 LayoutObject 一定会为其创建新的渲染层,当然还有其他的一些特殊情况,为一些特殊的 LayoutObjects 创建一个新的渲染层,比如 overflow != visible 的元素。根据创建 PaintLayer 的原因不同,可以将其分为常见的 3 类:

    • NormalPaintLayer
      • 根元素(HTML)
      • 有明确的定位属性(relative、fixed、sticky、absolute)
      • 透明的(opacity 小于 1)
      • 有 CSS 滤镜(fliter)
      • 有 CSS mask 属性
      • 有 CSS mix-blend-mode 属性(不为 normal)
      • 有 CSS transform 属性(不为 none)
      • backface-visibility 属性为 hidden
      • 有 CSS reflection 属性
      • 有 CSS column-count 属性(不为 auto)或者 有 CSS column-width 属性(不为 auto)
      • 当前有对于 opacity、transform、fliter、backdrop-filter 应用动画
    • OverflowClipPaintLayer
      • overflow 不为 visible
    • NoPaintLayer
      • 不需要 paint 的 PaintLayer,比如一个没有视觉属性(背景、颜色、阴影等)的空 div。

    满足以上条件的 LayoutObject 会拥有独立的渲染层,而其他的 LayoutObject 则和其第一个拥有渲染层的父元素共用一个。

    Meta Description

    Meta description标签可能是最有用的标签之一。顾名思义,它会给搜索引擎提供关于这个网页的简短的描述。代码如下:

    JavaScript

    <meta name=”description” content=”Everything you need to know about meta tags for search engine optimization”/>

    1
    <meta name=”description” content=”Everything you need to know about meta tags for search engine optimization”/>

    这个标签曾经在搜索排名中占有很大的权重,但随着算法的不断的更新升级,它的地位也逐渐降低。它虽然不会提高网站排名,但是,因为它会被用在搜索引擎的结果页,所以依然有用。

    这也就意味着它仍然可以提高你的网页点击率。毕竟,当用户搜索的关键词与之相匹配时,会以粗体显示突出显示。这就是为什么一个好的页面说明 (利用关键字的) 可以显示更多与用户相关的信息,进而提高了点击率。推荐的description长度为160 个字符。

    但是如果你没有使用description标签或者description标签为空时,会发生什么呢?搜索引擎仍会在搜索结果页显示出自己创键的一小段文字。大多数的结果都不是用户需要的,也就意味着你将失去用户点击网页的机会。

    四、回归重点,word-break:break-all和word-wrap:break-word的区别

    尼玛,说这两个声明不是兄弟都没人信,都有word都有break,位置都还一样,一个有2个break, 一个有2个word, 妥妥儿的用来迷惑大家的。我是花了好多年才没有把这两个记混淆,之前,每次用到都要查一下,晕死人的要~

    图片 7

    这两个声明都能是连续英文字符换行,那区别在哪里呢?

    您可以狠狠地点击这里:word-break:break-all和word-wrap:break-word的区别demo

    会发现类似下图的效果:
    图片 8

    可以发现,word-break:break-all正如其名字,所有的都换行。毫不留情,一点空隙都不放过。而word-wrap:break-word则带有怜悯之心,如果这一行文字有可以换行的点,如空格,或CJK(Chinese/Japanese/Korean)(中文/日文/韩文)之类的,则就不打英文单词或字符的主意了,让这些换行点换行,至于对不对齐,好不好看,则不关心,因此,很容易出现一片一片牛皮癣一样的空白的情况。

    OK, 应该很容易get这个tips的。

    至于如何记忆这两个CSS声明呢?

    首字母走起:wbba(微博吧), wwbw(我五百万).

    从 PaintLayers 到 GraphicsLayers

    某些特殊的渲染层会被认为是合成层(Compositing Layers),合成层拥有单独的 GraphicsLayer,而其他不是合成层的渲染层,则和其第一个拥有 GraphicsLayer 父层公用一个。

    每个 GraphicsLayer 都有一个 GraphicsContext,GraphicsContext 会负责输出该层的位图,位图是存储在共享内存中,作为纹理上传到 GPU 中,最后由 GPU 将多个位图进行合成,然后 draw 到屏幕上,此时,我们的页面也就展现到了屏幕上。

    渲染层提升为合成层的原因有一下几种:

    注:渲染层提升为合成层有一个先决条件,该渲染层必须是 SelfPaintingLayer(基本可认为是上文介绍的 NormalPaintLayer)。以下所讨论的渲染层提升为合成层的情况都是在该渲染层为 SelfPaintingLayer 前提下的。

    • 直接原因(direct reason)
      • 硬件加速的 iframe 元素(比如 iframe 嵌入的页面中有合成层)demo
      • video 元素
      • 覆盖在 video 元素上的视频控制栏
      • 3D 或者 硬件加速的 2D Canvas 元素
        • demo:普通 2D Canvas 不会提升为合成层
        • demo:3D Canvas 提升为合成层
      • 硬件加速的插件,比如 flash 等等
      • 在 DPI 较高的屏幕上,fix 定位的元素会自动地被提升到合成层中。但在 DPI 较低的设备上却并非如此,因为这个渲染层的提升会使得字体渲染方式由子像素变为灰阶(详细内容请参考:Text Rendering)
      • 有 3D transform
      • backface-visibility 为 hidden
      • 对 opacity、transform、fliter、backdropfilter 应用了 animation 或者 transition(需要是 active 的 animation 或者 transition,当 animation 或者 transition 效果未开始或结束后,提升合成层也会失效)
        • demo:animation
        • demo:transition图片 9
      • will-change 设置为 opacity、transform、top、left、bottom、right(其中 top、left 等需要设置明确的定位属性,如 relative 等)demo
    • 后代元素原因
      • 有合成层后代同时本身有 transform、opactiy(小于 1)、mask、fliter、reflection 属性 demo
      • 有合成层后代同时本身 overflow 不为 visible(如果本身是因为明确的定位因素产生的 SelfPaintingLayer,则需要 z-index 不为 auto) demo
      • 有合成层后代同时本身 fixed 定位 demo
      • 有 3D transfrom 的合成层后代同时本身有 preserves-3d 属性 demo
      • 有 3D transfrom 的合成层后代同时本身有 perspective 属性 demo
    • overlap 重叠原因为什么会因为重叠原因而产生合成层呢?举个简单的栗子。图片 10蓝色的矩形重叠在绿色矩形之上,同时它们的父元素是一个 GraphicsLayer。此时假设绿色矩形为一个 GraphicsLayer,如果 overlap 无法提升合成层的话,那么蓝色矩形不会提升为合成层,也就会和父元素公用一个 GraphicsLayer。图片 11此时,渲染顺序就会发生错误,因此为保证渲染顺序,overlap 也成为了合成层产生的原因,也就是如下的正常情形。图片 12当然 overlap 的原因也会细分为几类,接下来我们会详细看下。
      • 重叠或者说部分重叠在一个合成层之上。那如何算是重叠呢,最常见和容易理解的就是元素的 border box(content + padding + border) 和合成层的有重叠,比如:demo,当然 margin area 的重叠是无效的(demo)。其他的还有一些不常见的情况,也算是同合成层重叠的条件,如下:
        • filter 效果同合成层重叠 demo
        • transform 变换后同合成层重叠 demo
        • overflow scroll 情况下同合成层重叠。即如果一个 overflow scroll(不管 overflow:auto 还是 overflow:scrill,只要是能 scroll 即可) 的元素同一个合成层重叠,则其可视子元素也同该合成层重叠 demo
      • 假设重叠在一个合成层之上(assumedOverlap)。这个原因听上去有点虚,什么叫假设重叠?其实也比较好理解,比如一个元素的 CSS 动画效果,动画运行期间,元素是有可能和其他元素有重叠的。针对于这种情况,于是就有了 assumedOverlap 的合成层产生原因,示例可见:demo。在本 demo 中,动画元素视觉上并没有和其兄弟元素重叠,但因为 assumedOverlap 的原因,其兄弟元素依然提升为了合成层。需要注意的是该原因下,有一个很特殊的情况:如果合成层有内联的 transform 属性,会导致其兄弟渲染层 assume overlap,从而提升为合成层。比如:demo。

    Meta Robots

    我们在之前的教程中已经接触过Meta robots标签。如果你没有机会回去阅读它,这里有一段简短的介绍:

    Meta robots标签管理着搜索引擎是否可以进入网页,你可以用它来允许或不允许搜索引擎来获取你的网页、进入你网页中的子链接或对你的网页存档。例如:

    JavaScript

    <meta name=”robots” content=”noindex, nofollow” />

    1
    <meta name=”robots” content=”noindex, nofollow” />

    这个 meta 标签告诉搜索引擎不要获取网页,并且阻止其进入链接。如果你不小心使用了两个矛盾的术语 (例如noindex 和index),谷歌会选择最具限制性的选项。

    为什么这个标签会对搜索引擎优化(SEO)起作用呢?首先,它可以防止对拷贝内容的冗余抓取,例如页面的打印版页面。它也可能会对那些内容不完整的页面或者而存在私密信息的网页起作用。

    本文由金沙国际官网发布于web前端,转载请注明出处:无线性能优化,标签与搜索引擎优化

    关键词: