JS事件循环机制（event loop）之宏任务/微任务

原文地址：Tasks, microtasks, queues and schedules
同类文章 这一次，彻底弄懂 JavaScript 执行机制

鉴于上篇文章有提到过 微任务与宏任务，所以，在此做个细致补充： 话不多说，直接进入正文：

  • [1] 本文主要根据网上资源总结而来，如有不对，请斧正。
  • [2] 需要知道的专业名词术语：synchronous：同步任务、asynchronous：异步任务、task queue/callback queue：任务队列、execution context stack：执行栈、heap：堆、stack：栈、macro-task：宏任务、micro-task：微任务
more >>

展开全文 >>

Web前端开发工程师编程能力飞升之路

【背景】

如果你是刚进入web前端研发领域，想试试这潭水有多深，看这篇文章吧；
如果你是做了两三年web产品前端研发，迷茫找不着提高之路，看这篇文章吧；
如果你是四五年的前端开发高手，没有难题能难得住你的寂寞高手，来看这篇文章吧；

web前端研发工程师，在国内是一个朝阳职业，自07-08年正式有这个职业以来，也不过三四年的时间。这个领域没有学校的正规教育，没有行内成体 系的理论指引，几乎所有从事这个职业的人都是靠自己自学成才。自学成才，一条艰辛的坎坷路，我也是这样一路走来。从2002年开始接触web前端研发至今 已然有了9个年头，如今再回首，期间的走了很多弯路。推已及人，如果能让那些后来者少走些弯路，辛甚辛甚！

more >>

展开全文 >>

你应该知道的前端--缓存

web 缓存

web 缓存是可以通过自动保存常见文档副本的 HTTP 设备。当 Web 请求抵达缓存时,如果本地有以缓存的副本,就可以从本地存储设备而不是原始服务器中提取这个文档。

1. 为什么需要缓存

  • 冗余的数据传输

有很多客户端访问一个流行的原始服务器页面时,服务器会多次传输同一份文档,每次传送给一个客户端,一些相同的字节会在网络中一遍遍的传输。这些冗余的数据传输会耗尽昂贵的网络带宽。而通过缓存我们可以保留第一家服务器响应的副本,后继请求就可以由缓存的副本来应对

  • 带宽瓶颈
more >>

展开全文 >>

从输入url到显示网页发生了什么

前言

在浏览器中输入url到显示网页主要包含两个部分： 网络通信和页面渲染

互联网内各网络设备间的通信都遵循TCP/IP协议，利用TCP/IP协议族进行网络通信时，会通过分层顺序与对方进行通信。分层由高到低分别为：应用层、传输层、网络层、数据链路层。发送端从应用层往下走，接收端从数据链路层网上走

more >>

展开全文 >>

浏览器的回流与重绘 (Reflow & Repaint)

写在前面

在讨论回流与重绘之前，我们要知道：

  1. 浏览器使用流式布局模型 (Flow Based Layout)。
  2. 浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了Render Tree。
  3. 有了RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。
  4. 由于浏览器使用流式布局，对Render Tree的计算通常只需要遍历一次就可以完成，但table及其内部元素除外，他们可能需要多次计算，通常要花3倍于同等元素的时间，这也是为什么要避免使用table布局的原因之一。

一句话：回流必将引起重绘，重绘不一定会引起回流。

more >>

展开全文 >>

HTML5-新特性

1.语义化标签

语义化标签 为页面提供了更好的页面结构。

描述 属性
<header></header> 定义文档的头部区域
<footer></footer> 定义文档的尾部区域
<nav></nav> 定义文档的导航区域
<section></section> 定义文档的段落
<article></article> 定义页面独立的内容区域
<aside></aside> 定义页面侧边栏内容
<command></command> 定义命令按钮
<details></details> 标签包含 details 元素的标题
<dialog></dialog> 定义对话框
more >>

展开全文 >>

HTML5-语义化

前言

什么是语义化？就是用合理、正确的标签来展示内容，比如h1~h6定义标题。

语义化优点：

  • 易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
  • 有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
  • 方便其他设备解析，如盲人阅读器根据语义渲染网页
  • 有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。
more >>

展开全文 >>

SEO关键词

title（网站标题）

title，就是浏览器上显示的那些内容，不仅用户能看到，也能被搜索引擎检索到（搜索引擎在抓取网页时，最先读取的就是网页标题，所以title是否正确设置极其重要。）title一般不超过80个字符，而且词语间要用英文“-”隔开，因为计算机只对英语的敏感性较高，对汉语的敏感性不高。

用法：<title>网站标题</title>

more >>

展开全文 >>

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

<div style="padding: 10px;">1.本网站部分资源是搜集整理而成，版权均归原作者所有。本站仅提供一个观摩学习的环境，将不对任何资源负法律责任。<br /><br /> 2.若无意中侵犯到您的版权利益，请联系联系我，我会在收到信息后会尽快给予处理并将处理结果给予答复。！<br /><br /> 3.网站内所有资源仅供学习交流之用，请勿用作商业用途，谢谢。</div>