why what or how

Css - background 终极探究

前言作为程序员,技术的落实与巩固是必要的,因此想到写个系列,名为 why what or how 每篇文章试图解释清楚一个问题。这次的 why what or how 主题:如何使用背景,或者说如何将背景使用到极致?背景,作为 css 中的老牌属性,相信大家并不陌生,相关属性有的也不少,希望大家在看这篇文章时,先放下对背景的固有印象,跟着下面的思路来深入的了解下浏览器是如何使用这些属性的。既然想要深入了解,cosplay 成浏览器体验一把背景绘制是再好不过的了。那么我们正式成为浏览器,拿起画笔,画出代码所规定的背景。绘制假设浏览器也就是我们,

  • aco Yang
    aco Yang
14 min read
why what or how

Css - 如何使用 Flex ?

前言作为程序员,技术的落实与巩固是必要的,因此想到写个系列,名为 why what or how 每篇文章试图解释清楚一个问题。这次的 why what or how 主题:如何使用 Flex ?是什么?Flex - 一种布局方式在深入了解前,先来看看浏览器的支持情况吧:一片绿色,那还等什么呢?赶紧掌握呀~先了解了解布局的发展史,在了解历史的基础上在回头来看看 Flex ,以史为镜,可以知兴替嘛~布局发展史Table作为 HTML 的老牌元素,

  • aco Yang
    aco Yang
19 min read
why what or how

什么是 JAVASCRIPT

前言作为程序员,技术的落实与巩固是必要的,因此想到写个系列,名为 why what or how 每篇文章试图解释清楚一个问题。这次的 why what or how 主题:什么是 JavaScript ?释义JavaScript - 一种解释性脚本语言解释性脚本语言:一类不具备开发操作系统的能力,而是只用来编写控制其他大型应用程序的“脚本”,但其内容的的执行不需要提前编译的语言。通常作为别的程序的输入。JavaScript,是一种用于描述网页逻辑,处理网页业务的解释性脚本语言,纯文本,其内容作为浏览器的输入,浏览器负责解释编译运行其内容。目前 JavaScript

  • aco Yang
    aco Yang
22 min read
why what or how

什么是 CSS?

前言作为程序员,技术的落实与巩固是必要的,因此想到写个系列,名为 why what or how 每篇文章试图解释清楚一个问题。why what or how 的第二章,什么是 CSS ?释义CSS - Cascading Style Sheets,层叠样式表CSS 也算是一种标记语言,其内容作为浏览器的输入,浏览器会解析其文本内容,作为 HTML 附加的样式信息,用以修饰标签。标记语言,一类以固定的形式描述文档结构或是数据处理细节的语言,一般为纯文本形式,其内容作为其他程序的输入。

  • aco Yang
    aco Yang
20 min read
why what or how

什么是 HTML?

前言作为程序员,技术的落实与巩固是必要的,因此想到写个系列,名为 why what or how 每篇文章解释清楚一个问题。作为why what or how系列的第一章,选一个较为简单的话题,什么是 HTML ?释义HTML - HyperText Markup Language,超文本标记语言标记语言,一类以固定的形式描述文档结构或是数据处理细节的语言,一般为纯文本形式,其内容作为其他程序的输入。因此,HTML 是一种用于描述网页的标记语言,纯文本,其内容作为浏览器的输入。浏览器会解析 HTML 文本内容,

  • aco Yang
    aco Yang
15 min read
原理

事件合成器

console.info本文翻译自 Google 的官方文档,该系列共 4 篇文章,从内部观察现代浏览器 (Chrome),同时解答了浏览器的内部架构,讲述了浏览器从输入 url 到页面呈现的全过程。原文链接: inside-browser-part4前言这是 从内部观察现代浏览器 (Chrome) 系列文章的第四篇。在上一篇文章中,我们知道了浏览器是如何将代码转化成网页的。在这篇文章中,我们将会知道,事件合成器是如何顺畅的处理用户的交互。从浏览器的角度看待用户的输入何为输入?使用鼠标在文本框中输入或是使用鼠标进行点击?是的,这些都是,但是从浏览器的角度看这个问题,输入意味着用户与网页交互的所有行为。比如:鼠标滚动、鼠标移动、滚轮滚动、

  • aco Yang
    aco Yang
10 min read
原理

详解渲染进程

console.info本文翻译自 Google 的官方文档,该系列共 4 篇文章,从内部观察现代浏览器 (Chrome),同时解答了浏览器的内部架构,讲述了浏览器从输入 url 到页面呈现的全过程。原文链接: inside-browser-part3前言这是 从内部观察现代浏览器 (Chrome) 系列文章的第三篇,在先前文章中,我们了解了浏览器的多进程架构以及一次导航到底发生了什么。在这篇文章中,我们将会了解到渲染进程到底做了什么。渲染进程直接与 Web 页面的性能挂钩。由于渲染进程涉及到很多内容,处理了很多逻辑,并不是一篇文章能够完整描述的,这篇文章仅是一个概述。如果你想更深入的了解,可以查看the Performance section

  • aco Yang
    aco Yang
14 min read
翻译

一次导航到底发生了什么?

console.info本文翻译自 Google 的官方文档,该系列共 4 篇文章,从内部观察现代浏览器 (Chrome),同时解答了浏览器的内部架构,讲述了浏览器从输入 url 到页面呈现的全过程。原文链接: inside-browser-part2前言这是 从内部观察现代浏览器 (Chrome) 系列文章的第二篇,在上一篇文章中,我们了解了浏览器的组成,以及如何将任务分配到不同的进程 & 线程。在这篇文章中,我们将深入了解:为了将一个 web 页面呈现到浏览器上,各各不同的进程 & 线程是如何进行协作的。浏览器都会有这个简单的场景:用户在导航栏里输入

  • aco Yang
    aco Yang
12 min read
原理

CPU、GPU、内存以及多进程架构

console.info本文翻译自 Google 的官方文档,该系列共 4 篇文章,解答了浏览器的内部架构,讲述了浏览器从输入 url 到页面呈现的全过程。原文链接: inside-browser-part1前言该篇文章作为本系列的第一篇,我们先来了解下关于计算机的核心术语和 Chrome 的多进程架构模型。计算机的核心 - CPU & GPU在了解浏览器是如何运行之前,我们必须对它所处的运行环境有所了解,毕竟浏览器是基于这些硬件的。CPU 中央处理器4核 CPU 处理任务流程CPU (Central Processing Unit) 是计算机的大脑,一个 CPU

  • aco Yang
    aco Yang
11 min read
原理

node 下的 Event Loop

前言通过 浏览器下的 Event Loop ,可以得知 javascript 是一门事件驱动的语言, javascript 主线程通过不断的调用事件队列中的事件来完成异步任务。那么 Node 下是否也是如此?Node 下的事件队列在 Node 官网有这样一篇文章:The Node.js Event Loop, Timers, and process.nextTick() 。该文章主要讲述了 Node 中是如何处理以及实现 Node 下的 Event Loop。主要包含以下内容:

  • aco Yang
    aco Yang
6 min read
原理

浏览器下的 Event Loop

前言javascript 是以单线程的形式运行在宿主环境下,javascript 采用了回调的形式来解决异步任务。为什么是单线程?javascript 的最开始的出现是为了给 web 页面增添一些动态的效果,那么就避免不了获取页面上的元素信息,如果 javascript 是以多线程的形式运行在浏览器内,如果两个线程内的 javascript 同时去获取/修改,某个页面上的元素,那么浏览器该让哪个 javascript 线程拥有获取/修改该元素的权限呢?由于元素的信息会经常性的发生变化,那么又改如何去同步各个线程内所保存的元素信息呢?所以综合以上问题, javascript 是单线程的原因就显而易见了,单线程在执行时,对于元素信息的引用在同一时间仅可能只有一个,那么以上所有的问题都不存在了。什么是异步任务?任何代码在执行时,都会碰到一些需要经过大量时间运算或是等待的代码,

  • aco Yang
    aco Yang
7 min read
工具

git 官网教程摘录

Git 工作流程如下:在工作目录中修改某些文件。对修改后的文件进行快照,然后保存到暂存区域。提交更新,将保存在暂存区域的文件快照永久转储到 Git 目录中。git configgit config --system 将配置保存在 /etc/gitconfig 文件中,对系统中所有用户都适用git config --global 将配置保存在用户目录下,仅对该用户适用git config          将配置保存在当前目录的 .git/config 文件夹下,仅对当前目录有效每一个级别的配置都会覆盖上层的相同配置。用户信息git config --global user.name

  • aco Yang
    aco Yang
6 min read
React

React 组件

react 中组件的形式有两种 函数组件以及类组件,函数组件很好理解只要最终返回一个虚拟树就可以了,这中间的逻辑完全就是 js 的逻辑,没有什么好记录的,但类组件涉及到父类以及 state 需要记录一下。类组件statestate 可以说是 react 实现数据变化更新视图的最重要的一部分。state 干嘛用?state 表示一个组件的内部可变数据的集合,为什么说是可变的数据呢?不变的数据用 this 保存即可,因为不会发生变化,所以不用触发视图更新。没了,作用就是保存数据。那么如何触发视图更新呢?这就需要用到 setState 。setState 是什么?setState

  • aco Yang
    aco Yang
6 min read
React

概览 React

最重要的一点:react 是一个完全遵从 javascript 开发模式的类库,语言层面仅仅有几个 API 而已,没有配置。react 更多的是需要开发者从设计模式上去考虑如何构建一个 web 项目。概念react 主要有两方面的功能,根据数据构建虚拟树根据树构建 web 页面react 开发者仅仅需要关注于第一点即可,后续步骤由 react 按一定顺序进行下去,不需要开发者关心。虚拟树一个网页的 html 的代码就可以大致被认为是一个树结构(DOM 树),而虚拟树就是为了模拟 DOM 树结构存在的一种结构。有了虚拟树结构,我们就能将页面的结构保存在

  • aco Yang
    aco Yang
5 min read
stylesheet

css 3D 空间

涉及属性perspectiveperspective-origintransform-styletransform ( rotateX, rotateY, translateZ )transform-origin必要条件要实现 3D 效果必须要先理解 3D 空间是怎么形成的,以及实现 3D 效果的必要条件是什么。Z 轴区别与 2D 场景,3D 场景与 2D 场景最大的区别是有了 Z 轴,那么 Z 轴在 css 中该如何产生呢?这就涉及到上面列出的第一个属性: perspective(景深) MDN。首先我们必须要知道 Z

  • aco Yang
    aco Yang
10 min read
ECMAScript6

ECMAScript6 之 decoretors

类的修饰许多面向对象的语言都有修饰器( Decorator )函数,用来修改类的行为。@testable class MyTestableClass { // ... } function testable(target) { target.isTestable = true } MyTestableClass.isTestable // true testable 函数即为修饰器,为 MyTestableClass 类添加了名为 isTestable 的静态属性。一个修饰器可以理解为包装之后跟着的类的函数。@decorator class A {} // 等同于 class A {} A = decorator(A)

  • aco Yang
    aco Yang
2 min read
ECMAScript6

ECMAScript 之 Generator 的异步使用技巧

异步在 js 界,异步是获取数据的主旋律,大概有以下几种callback 回调Promiseevent 事件简单的回顾一下以上 3 种模式:回调简单的来说就是将需要执行的函数传入异步调用内,在异步调用结束后,执行函数,写出的代码会是这样:function doSomeAsync(callback) { let data = {/* 数据 */} setTimeout(() => { callback(data) }) } doSomeAsync((data) => { // do some thing }) 但试想一下,如果说回调之中还有回调,那么将会形成一个类似金字塔的结构(回调地狱)

  • aco Yang
    aco Yang
6 min read