2017年02月_谢杨易

原创 React源码分析4 — React生命周期详解

1 React生命周期流程调用流程可以参看上图。分为实例化，存在期和销毁三个不同阶段。介绍生命周期流程的文章很多，相信大部分同学也有所了解，我们就不详细分析了。很多同学肯定有疑问，这些方法在React内部是在哪些方法中被调用的呢，他们触发的时机又是什么时候呢。下面我们来详细分析。2 实例化生命周期getDefaultProps在React.creatClass()初始化组件类时，会调用getDefa

2017-02-27 14:19:04 19895 1

原创 React源码分析3 — React组件插入DOM流程

React组件插入流程1 简介React广受好评的一个重要原因就是组件化开发，一方面分模块的方式便于协同开发，降低耦合，后期维护也轻松；另一方面使得一次开发，多处复用称为现实，甚至可以直接复用开源React组件。开发完一个组件后，我们需要插入DOM中，一般使用如下代码ReactDOM.render( <h1>Hello, world!</h1>, document.getElementByI

2017-02-23 18:08:37 20728 4

原创 React源码分析2 — 组件和对象的创建（createClass，createElement）

1 组件的创建React受大家欢迎的一个重要原因就是可以自定义组件。这样的一方面可以复用开发好的组件，实现一处开发，处处调用，另外也能使用别人开发好的组件，提高封装性。另一方面使得代码结构很清晰，组件间耦合减少，方便维护。ES5创建组件时，调用React.createClass()即可. ES6中使用class myComponent extends React.Component, 其实内部还是调

2017-02-18 18:44:41 11151 5

原创 React源码分析1 -- 框架

1 源码结构我们分析的React源码version为16.0.0-alpha.3，源码目录如下图所示。含义如下 addons：插件，一些比较有用的工具，如transition动画 isomorphic: 同构，服务端在页面初次加载时，将所有方法渲染好，一次性交给客户端。这样可以减少Ajax shared: 共用方法，一些utils test: 测试方法 renderers: React代码核心，大部...

2017-02-18 18:42:01 21669 3

原创浏览器内核分析7 -- JavaScript引擎

1 JS语言与性能问题JS比Java慢的原因和大多数解释型语言一样，JavaScript运行也比较慢，和Java等静态编译语言相比，究其原因大概有JS变量无类型信息，不能做偏移信息查找，偏移信息共享等编译阶段的优化JS将源码编译为字节码的过程要占用运行时间，而Java的编译则是开发阶段，不占用任何运行时间。故Java可以尽可能的在编译阶段做优化JS引擎组成一个JS引擎大概包含以下几个部分。编

2017-02-16 21:29:08 15768

原创浏览器内核分析6 -- 布局和绘制

DOM树构建完成后，就开始构建RenderObject树了。渲染过程分为布局和绘制两个阶段，最终得到用户可见区域（ViewPort）图像在内存中的表示Bitmap。1 RenderObjectRenderObject是渲染树中的子节点，也是RenderText，RenderImage等很多渲染树节点的基类，所以比较关键。主要方法递归遍历等操作，如parent(), firstChild(), ne

2017-02-16 20:56:11 878

原创浏览器内核分析5 -- CSS解释器和样式布局

1 主要类CSSStyleSheet：描述CSS文件，不论是内嵌的，还是引用的外部文件CSSRule：一条CSS规则，解析如下的CSS代码得到：p, div { margin-top: 3px; color: #ffffff;}包含选择器和属性表两部分CSSSelector：选择器属性集合：一个CSSPropertyID: CSSValue组成的map，描述了元素的属性。2 解释过程解释

2017-02-16 19:34:42 924

原创浏览器内核分析4 -- HTML解释器和DOM模型

1 概述Browser进程完成HTML CSS等资源文件的加载后，Renderer进程就需要开始渲染流程了。下面这张图描述了整个渲染流程。主要过程分为以下几步：读取HTML文件，解析并生成DOM树读取CSS文件，解析生成样式规则表，并根据选择器找到元素的匹配规则由DOM树和匹配规则生成RenderObject树，并进行布局和绘制执行JavaScript时，可能会改变DOM结构和CSS样式，此

2017-02-16 17:17:32 2284

原创浏览器内核分析3 -- 资源加载和网络栈

1 网络资源资源加载器网页加载中需要获取的资源文件很多，有HTML，JavaScript，CSS，图片，SVG，CSS Shader，视频音频字幕，字体文件，XSL样式表等。不同资源有不同的加载器，主要分为三类：特定资源加载器：处理特定资源请求，如ImageLoader FontLoader缓存资源加载器：从内存中获取资源，CachedResourceLoader通用资源加载器：从网络或硬盘中

2017-02-15 22:57:08 1071

原创浏览器内核分析2 -- Webkit和Chromium源码结构

1 Webkit架构Webkit和Blink代码量都是几百万行级别，阅读难度很大，故先了解下它的大体架构是十分有意义的。下面是《Webkit技术内幕》一书中给出的架构图由图中可见，大体分为以下几个层次 1. 操作系统：WebKit可以在不同OS上运行，如mac OS，Windows，Linux等。 2. 三方库：WebKit依赖了很多三方库，如音频，视频等 3. WebKit：大概分为两个部分

2017-02-15 16:33:50 14729

原创浏览器内核分析1 -- 概述

1 主流浏览器市场份额根据Net Applications公司分析，2016年12月全球浏览器市场份额如下图其中Chrome已经占据56%市场，而IE下滑到20%。开源浏览器Chrome Safari Firefox之和达到72%之多。在开源越来越流行的当下，开源浏览器也是越来越受欢迎。2 主流浏览器内核分析现今五大主流浏览器IE、Firefox、Safari、Chrome及Opera的内核分别如下

2017-02-15 14:01:17 1563

谢杨易的博客