前端基础之HTML

DOCTYPE

DOCTYPE 是用来声明文档类型和 DTD 规范的，一个主要的用途便是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出一些差错。HTML 编辑器通常也会在语法高亮的同时提供合法性验证。

通常有以下几种：

  • HTML5(推荐使用，其他的有触发怪异模式和近标准模式的风险)

    1
    <!DOCTYPE html>
more >>

展开全文 >>

前端基础之JS事件循环

背景

JavaScript 从诞生之日起就是一门单线程的非阻塞的脚本语言

单线程是必要的，也是 JavaScript 这门语言的基石，原因之一在其最初也是最主要的执行环境——浏览器中，我们需要进行各种各样的 DOM 操作。试想一下 如果 JavaScript 是多线程的，那么当两个线程同时对 DOM 进行一项操作，例如一个向其添加事件，而另一个删除了这个 DOM，此时该如何处理呢？因此，为了保证不会 发生类似于这个例子中的情景，JavaScript 选择只用一个主线程来执行代码，这样就保证了程序执行的一致性。

more >>

展开全文 >>

前端基础之HTTP/2

简介

HTTP/2 可以让我们的应用更快、更简单、更稳定。

HTTP/2 的目的是通过支持完整的请求与响应复用来减少延迟，通过有效压缩 HTTP 标头字段将协议开销降至最低，同时增加对请求优先级和服务器推送的支持。为达成这些目标，HTTP/2 还给我们带来了大量其他协议层面的辅助实现，例如新的流控制、错误处理和升级机制。

需要注意的是，HTTP/2 仍是对之前 HTTP 标准的扩展，而非替代。HTTP 的应用语义不变，提供的功能不变，HTTP 方法、状态代码、URI 和标头字段等这些核心概念也不变。

more >>

展开全文 >>

前端基础之关键路径渲染优化

浏览器接收到服务器返回的 HTML、CSS 和 JavaScript 字节数据并对其进行解析和转变成像素的渲染过程被称为关键渲染路径。通过优化关键渲染路径即可以缩短浏览器渲染页面的时间。

浏览器渲染页面前需要先构建 DOM 和 CSSOM 树。因此，我们需要确保尽快将 HTML 和 CSS 都提供给浏览器。

more >>

展开全文 >>

前端基础之从输入url到页面呈现的过程

1.用户输入网址

2.浏览器通过 DNS 获取网站的 IP 地址。客户端先检查本地是否有对应的 IP 地址，若找到则返回响应的 IP 地址。若没找到则请求上级 DNS 服务器，直至找到或到根节点。

DNS 查找 IP 地址的顺序: 浏览器缓存、系统缓存、互联网服务提供商（ISP）的 DNS 缓存、递归搜索（从浏览器缓存开始，如果没找到就继续往下一个找）。找到后，浏览器会获得一个 IP 地址。

more >>

展开全文 >>

前端基础之网络

网络模型

Network Model

  • TCP/IP 四层模型

应用层、运输层、网际层和网络接口层。从实质上讲，只有上边三层，网络接口层没有什么具体的内容。HTTP 对应应用层。

  • OSI 七层模型

应用层（Application）、表示层（Presentation）、会话层（Session）、传输层（Transport）、网络层（Network）、数据链路层（Data Link）、物理层（Physical）。HTTP 也是对应应用层。

  • 五层模型

应用层、运输层、网络层、数据链路层和物理层。

more >>

展开全文 >>

前端基础之JS数组

基本用法

  1. push(val1,val2,...)、pop 操作，增加和删除，后进先出。返回数组的长度、弹出的元素。
  2. unshift(val1,val2,...)、shift() 对应在开头添加元素和删除元素。返回数组的长度、弹出的元素。
  3. splice(start,deleteCount,val1,val2,...) 从开始位置删除一定数量的元素，并从这个位置插入新的元素。返回删除的数组。
  4. reverse() 反向。返回数组本身。
  5. sort([orderfunction]) 排序。
  6. slice([start] [,end]) 返回子数组，拷贝后的，复制一个数组简单地 slice()。
  7. join(seperator) 返回以 seperator 作为间隔的字符串，默认为 ,。
  8. concat([arr1][,arr2]...) 连接数组并返回新的数组，concat() 复制数组。
  9. 其他：indexOf(val),includes(val),toString(同 join() 或 join(",")),forEach(),every,findIndex,map,reduce,keys,values。
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

我是谁，我从哪里来，我到哪里去？我就是我，是颜色不一样的吃货…