浏览器的渲染机制

几个概念

DOM：Document Object Model，浏览器将 HTML 解析成树形的数据结构，简称 DOM。
CSSOM：CSS Object Model，浏览器将 CSS 代码解析成树形的数据结构
Render Tree：DOM 和 CSSOM 合并后生成 Render Tree(Render Tree 和 DOM 一样，以多叉树的形式保存了每个节点的 css 属性、节点本身属性、以及节点的孩子节点，display:none 的节点不会被加入 Render Tree，而 visibility: hidden 则会，所以，如果某个节点最开始是不显示的，设为 display:none 是更优的。)

渲染流程

浏览器渲染整个页面的过程，大致分为这几个步骤：

1、Create/Update DOM And request css/image/js：浏览器请求到 HTML 代码后，在生成 DOM 的最开始阶段（应该是 Bytes → characters 后），并行发起 css、图片、js 的请求，无论他们是否在 HEAD 里。注意：发起 js 文件的下载 request 并不需要 DOM 处理到那个 script 节点，比如：简单的正则匹配就能做到这一点，虽然实际上并不一定是通过正则：）。这是很多人在理解渲染机制的时候存在的误区。
2、Create/Update Render CSSOM：CSS 文件下载完成，开始构建 CSSOM
3、Create/Update Render Tree：所有 CSS 文件下载完成，CSSOM 构建结束后，和 DOM 一起生成 Render Tree。
4、Layout：有了 Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的 CSS 定义以及他们的从属关系。下一步操作称之为 Layout，顾名思义就是计算出每个节点在屏幕中的位置。
5、Painting：Layout 后，浏览器已经知道了哪些节点要显示（which nodes are visible）、每个节点的 CSS 属性是什么（their computed styles）、每个节点在屏幕中的位置是哪里（geometry）。就进入了最后一步：Painting，按照算出来的规则，通过显卡，把内容画到屏幕上。

展开全文 >>

Intersection Observer详解

基本定义

Intersection Observer API提供了一种异步检测目标元素与祖先元素或 viewport 相交情况变化的方法。

IntersectionObserver对象的 observe()方法向IntersectionObserver对象监听的目标集合添加一个元素。一个监听者有一组阈值和一个根，但是可以监视多个目标元素，以查看这些目标元素可见区域的变化。调用 IntersectionObserver.unobserve()方法可以停止观察元素。

以上是mdn对IntersectionObserver的定义，通俗一点的话来讲就是，该API可以通过设置一组阈值和根元素，来对目标元素相对于根元素的位置进行监听，从而达到响应变化的目的。

more >>

展开全文 >>

初探WebAssembly

自从第一个网页开发出来以来，web 应用已经发生了翻天覆地的变化。应对日益复杂的页面需求，js——这种 24 年前开发出来的语言无法在解决性能问题的同时满足繁重的系统功能。每次加载网页时，我们都会加载 HTML，CSS 和 JS 数据，然后对其进行解析，创建 AST，对其进行优化，编译或解释。而这是对资源的巨大浪费。

more >>

展开全文 >>

css-虚线边框滚动效果

常常看到一种酷炫的效果，鼠标hover一片区域后，区域显示出虚线边框，并且还有线条动画，那么这种效果具体是怎么实现的呢，本文提供了几种思路仅供参考。

基本HTML

1
2
3
<div class="box">
  <p>测试测试</p>
</div>

Easy-way

通过背景图片实现。

p得垂直居中哦，还记得如何垂直居中吗？详见另一篇博客～

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.box {
  width: 100px;
  height: 100px;
  position: relative;
  background: url(https://www.zhangxinxu.com/study/image/selection.gif);
  p {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: calc(100% - 2px);
    width: calc(100% - 2px);
    background-color: #fff;
  }
}

repeating-linear-gradient

135度repeating线性渐变，p撑开高度，白色背景覆盖外层div渐变。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.box {
  width: 100px;
  height: 100px;
  background: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 4px,
    #000 4px,
    #000 8px
  );
  overflow: hidden;				// 新建一个BFC，解决margin在垂直方向上折叠的问题
  animation: move 1s infinite linear;
  p {
    height: calc(100% - 2px);
    margin: 1px;
    background-color: #fff;
  }
}
@keyframes move {
  from {
    background-position: -1px;
  }
  to {
    background-position: -12px;
  }
}

linear-gradient&&background

通过线性渐变以及background-size画出虚线，然后再通过background-position将其移动到四边。这种方式比较好的地方在于可以分别设置四条边的样式以及动画的方向，细心的同学应该会发现上一种方式的动画并不是顺时针或者逆时针方向的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(0deg, transparent 6px, #e60a0a 6px) repeat-y,
    linear-gradient(0deg, transparent 50%, #0f0ae8 0) repeat-y,
    linear-gradient(90deg, transparent 50%, #09f32f 0) repeat-x,
    linear-gradient(90deg, transparent 50%, #fad648 0) repeat-x;
  background-size: 1px 12px, 1px 12px, 12px 1px, 12px 1px;
  background-position: 0 0, 100% 0, 0 0, 0 100%;
  animation: move2 1s infinite linear;
  p {
    margin: 1px;
  }
}
@keyframes move2 {
  from {
  }
  to {
    background-position: 0 -12px, 100% 12px, 12px 0, -12px 100%;
  }
}

linear-gradient&&mask

mask属性规范已经进入候选推荐规范之列，会说以后进入既定规范标准已经是板上钉钉的事情，大家可以放心学习，将来必有用处。

这里同样可以使用mask来实现相同的动画，并且可以实现虚线边框渐变色这种效果，与background不同的是mask需要在中间加上一块不透明的遮罩，不然p元素的内容会被遮盖住。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(0deg, #f0e, #fe0);
  -webkit-mask: linear-gradient(0deg, transparent 6px, #e60a0a 6px) repeat-y,
    linear-gradient(0deg, transparent 50%, #0f0ae8 0) repeat-y,
    linear-gradient(90deg, transparent 50%, #09f32f 0) repeat-x,
    linear-gradient(90deg, transparent 50%, #fad648 0) repeat-x,
    linear-gradient(0deg, #fff, #fff) no-repeat;		// 这里不透明颜色随便写哦
  -webkit-mask-size: 1px 12px, 1px 12px, 12px 1px, 12px 1px, 98px 98px;
  -webkit-mask-position: 0 0, 100% 0, 0 0, 0 100%, 1px 1px;
  overflow: hidden;
  animation: move3 1s infinite linear;
  p {
    height: calc(100% - 2px);
    margin: 1px;
    background-color: #fff;
  }
}
@keyframes move3 {
  from {
  }
  to {
    -webkit-mask-position: 0 -12px, 100% 12px, 12px 0, -12px 100%, 1px 1px;
  }
}

具体demo点这里

PS

今天有一个人来我们这边面试，五年工作经验，上来头头是道说自己参与过多少项目，独自一人架构一个什么前端项目，熟练css、js、html、vue等等等，听得我瑟瑟发抖。

然后问了个简单的如何垂直居中，答曰：用flex；再问怎么用flex，答：不太了解；问还有什么方式，答曰：transform；再问为何transform，答：不太了解。。。

等等等，问了许多基础的东西，大多不了解，更不用说vue的相关原理，diff算法之流。

最后问期望薪资，答：已有18k的offer，期望不要低于18k。

是我不了解行情了，还是现在压根就不是寒冬了，拿着微薄薪水的我求个内推～～南京或杭州地区。

个人博客求友链～

电子简历～

参考

张哥虚线边框

mask教程

展开全文 >>

git subtree的使用

  • git subtree add --prefix=<子目录名> <子仓库名> <分支> --squash
1
git subtree push --prefix=dist origin gh-pages

意思就是把指定的dist文件提交到gh-pages分支上，前提是dist在原分支中存在。

展开全文 >>

vscode一些配置 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.wordWrapColumn": 120,
  "prettier.printWidth": 120,
  "vetur.format.defaultFormatterOptions": {
    "prettyhtml": {
      "printWidth": 120, // No line exceeds 120 characters
      "singleQuote": false // Prefer double quotes over single quotes
    }
  }
}

vetur插件更多配置详情

展开全文 >>

关于伪元素

提起伪元素，大家首先想到的就是::before和::after这两个，它俩其实就是在其附属的选择器命中的元素上插入第一个子节点和追加最后一个子节点，简单的来讲就是在该元素内部添加第一个和最后一个子元素。那其他还有什么伪元素，它们各有什么作用呢？

伪元素

  • ::first-line：只能用于块级元素。用于设置附属元素的第一个行内容的样式。可用的CSS属性为font,color,background,word-spacing,letter-spacing,text-decoration,vertical-align,text-transform,line-height,clear。
  • ::first-letter：只能用于块级元素。用于设置附属元素的第一个字母的样式。可用的CSS属性为font,color,background,marin,padding,border,text-decoration,vertical-align,text-transform,line-height,float,clear。
  • ::selection：匹配选中部分的内容。可用的CSS属性为background,color。
  • ::before：在其附属的选择器命中的元素上插入第一个子节点。
  • ::after：在其附属的选择器命中的元素上追加最后一个子节点。

除了selection无法使用:前缀，其余的都可以使用:以获取更好的兼容性

操作伪元素

元素仅位于CSSOM中，因此我们仅能通过操作CSSOM API——window.getComputedStyle来读取伪元素的样式信息，注意：我们能做的就是读取，无法设置的哦！

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.target[title="hello world"]::after{
  display: inline-block;
  content: attr(title);
  background: red;
  text-decoration: underline;
}
const elTarget = document.querySelector(".target")
const computedStyle = window.getComputedStyle(elTarget, "::after")
const content = computedStyle.getPropertyValue("content")
const bg = computedStyle.getAttribute("backgroundColor")
const txtDecoration = computedStyle["text-decoration"]
console.log(content) // "hello world"
console.log(bg)      // red
console.log(txtDecoration) // underline

::before&&::after

使用注意事项

::before和::after的注意事项

  1. 默认display: inline；
  2. 必须设置content属性，否则一切都是无用功；
  3. 默认user-select: none，就是::before和::after的内容无法被用户选中的；
  4. 伪元素和伪类结合使用形如：.target:hover::after。
  5. 它们作用于元素内部，并不是在该元素前后插入内容

Content属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
div::after{
    content: "普通字符串";
    content: attr(父元素的html属性名称);
    content: url(图片、音频、视频等资源的url);
    /* 使用unicode字符集，采用4位16进制编码
     * 但不同的浏览器显示存在差异，而且移动端识别度更差
     */
    content: "\21e0";
    /* content的多个值可以任意组合，各部分通过空格分隔 */
    content: "'" attr(title) "'";
    
    /* 自增计数器，用于插入数字/字母/罗马数字编号
     * counter-reset: [<identifier> <integer>?]+，必选，用于标识自增计数器的作用范围，<identifier>为自定义名称，<integer>为起始编号默认为0。
     * counter-increment: [<identifier> <integer>?]+，用于标识计数器与实际关联的范围，<identifier>为counter-reset中的自定义名称，<integer>为步长默认为1。
     * <list-style-type>: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha
     */
    content: counter(<identifier>, <list-style-type>);
    
    /* 以父附属元素的qutoes值作为content的值
     */
    content: open-quote | close-quote | no-open-quote | no-close-quote;
}

伪元素的好处

  • HTML的代码量减少，对SEO有帮助；

  • 提高JavaScript查询元素的效率。

伪元素并不存在于DOM中，而是位于CSSOM，HTML代码和DOM Tree中均没有它的身影，而seo时并不是收录网页所有内容，因此将不是关键的内容使用伪元素来显示可以为重要的内容提供空间。

与伪类的异同

  • 伪类与伪元素都是用于向选择器加特殊效果
  • 伪类与伪元素的本质区别就是是否抽象创造了新元素
  • 伪类只要不是互斥可以叠加使用
  • 伪元素在一个选择器中只能出现一次，并且只能出现在末尾
  • 伪类与伪元素优先级分别与类、标签优先级相同

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

gentlecoder，<br>寻找世界的真相<br><br>热爱读书和游戏，<br/>目前是一枚前端<br/><br/>想做一个温柔的人，想做一桌好吃的饭<br>欲买桂花同载酒，终不似，少年游。