原理

事件合成器

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
原理

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
javaScript

@ 功能 JS 实现分析及其原理

最近为实现一个新功能弄的焦头烂额 @xxx 的实现,在实现后写下些心得,供以后会跳入这坑的同志们参考。首先,当让是考虑使用范围,由于项目仅仅需要考虑在 WEBKIT 环境下使用,所以可以不用考虑 IE 这也使得代码少了很多的 if(){}else{} 判断。在Mozilla 开发者网络上发现 selection 和 range 这两个关于选区对象和光标对象,结合 Caret(一个用于判断当前光标位置的JS插件)后,一个大致的雏形就浮现出来。大概就长这样:先整理思路,捋一捋实现步骤。大致思路如下:键入 @ 后将选择框显示出来将焦点定位在弹出框中的搜索框中点击选择框中的选项时,

  • aco Yang
    aco Yang
8 min read