JobbyM's Blog

发表于 | 分类于 | | 阅读次数

现代浏览器内部揭秘（第四部分）

用户输入行为与合成器

内部揭秘系列博客对现代浏览器如何处理代码、显示页面展开探讨。该系列博客共四篇，这是最后一篇。在上篇博客里，我们了解了 渲染进程与合成器。这里我们将一窥当用户输入行为发生时，合成器如何继续保障交互流畅。

阅读全文 »
JobbyM's Blog

发表于 | 分类于 | | 阅读次数

现代浏览器内部揭秘（第三部分）

渲染进程的内部机制

这是关于浏览器工作原理博客系列四部分中的第三部分。之前，我们介绍了多进程架构和导航流。在这篇文章中，我们将一探渲染进程的内部机制。

渲染进程涉及 Web 性能的许多方面。由于渲染进程的流程太复杂，因此本文只进行概述。如果你想深入了解，可以在 the Performance section of Web Fundamentals 找到相关资源。

阅读全文 »
JobbyM's Blog

发表于 | 分类于 | | 阅读次数

现代浏览器内部揭秘（第二部分）

导航时发生了什么

这是关于 Chrome 内部工作的 4 篇博客系列的第 2 篇。在上一篇文章中，我们研究了不同的进程和线程如何处理浏览器的不同部分。在这篇文章中，我们会更深入研究每个进程和线程如何进行通信以展示网站。

让我们看一个网络浏览的简单用例：你在浏览器中键入 URL，然后浏览器从互联网获取数据并显示一个页面。在这篇文章中，我们将重点放在用户请求站点和浏览器准备渲染页面部分 —— 亦即导航。

阅读全文 »
JobbyM's Blog

发表于 | 分类于 | | 阅读次数

开发部分阶段

开发和部署过程对基于JavaScript 的应用程序可以产生巨大影响，最重要的几个步骤如下：

  1. 合并JavaScript 文件，减少HTTP 请求的数量
  2. 使用YUI 压缩器紧凑处理JavaScript 文件
  3. 以压缩形式提供JavaScript 文件（gzip 编码）
  4. 通过设置HTTP 响应报文头使JavaScript 文件可缓存，通过向文件名附加时间戳解决缓存问题
  5. 使用CDN 提供JavaScript 文件，CDN 不仅可以提高性能，它还可以为你管理压缩和缓存
阅读全文 »
JobbyM's Blog

发表于 | 分类于 | | 阅读次数

Ajax 是高性能JavaScript 的基石。它可以通过延迟下载大量资源使页面加载更快。它通过在客户端和服务器之间异步传送数据，避免页面集体加载。它还用于在一次HTTP 请求中获取整个页面的资源。通过选择正确的传输技术和最有效的数据格式，你可以显著改善用户与网站之间的互动。

数据传输

Ajax 在它最基本的层面，是一种与服务器通讯而不重载当前页面的方法，数据可从服务器获得或发送给服务器。有多种不同的方法构造这种通讯通道，每种方法都有自己的优势和限制。本节简要地介绍这些不同方法，并讨论各自对性能的影响。

阅读全文 »
JobbyM's Blog

发表于 | 分类于 | | 阅读次数

现代浏览器内部揭秘（第一部分）

CPU、GPU、内存和多进程体系

这一博客系列由四部分组成，将从高级体系结构到渲染流程的细节来窥探 Chrome 浏览器的内部。如果你曾对浏览器是如何将代码转化为具有功能的网站，或者你并不确定为何建议使用某一技术来提升性能，那么本系列就是为你准备的。

本文作为此系列的第一部分，将介绍核心计算术语与 Chrome 的多进程体系架构。

阅读全文 »
JobbyM's Blog

发表于 | 分类于 | | 阅读次数

本文转载自剥茧抽丝做 UI 动效，其实很简单，有部分删减，看原文请到原地址。

作者 / Jonas Naimark，Google Material Design 团队动效设计师

动效有助于改善 UI 的表现力和易用性。它拥有很大的潜力，但它也可能是所有设计学科中最不被人了解的一门。这可能是因为，动效正式被认为是 UI 设计的一环的时间还很短。视觉和交互设计可以追溯到早期的 GUI，但动效却必须在现代化硬件的加持下才能平滑地渲染成为大家能看到的动画效果。UI 动效和传统动画之间模糊的界限使得这个领域更加让人困惑。就拿做传统动画来说，光是掌握迪士尼的 12 个基本原则，就可能会让一个人耗尽一辈子的时间。这是否意味着 UI 动效也要如此复杂？人们经常告诉我，设计动效很复杂，很难做到 “恰到好处”。我主张，在那些对 UI 最重要的环节里，动效设计可以而且应该是很简单的。

阅读全文 »
JobbyM's Blog

发表于 | 分类于 | | 阅读次数 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre   { display: block; unicode-bidi: embed }
li              { display: list-item }
head            { display: none }
table           { display: table }
tr              { display: table-row }
thead           { display: table-header-group }
tbody           { display: table-row-group }
tfoot           { display: table-footer-group }
col             { display: table-column }
colgroup        { display: table-column-group }
td, th          { display: table-cell }
caption         { display: table-caption }
th              { font-weight: bolder; text-align: center }
caption         { text-align: center }
body            { margin: 8px }
h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu            { margin: 1.12em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong          { font-weight: bolder }
blockquote      { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address    { font-style: italic }
pre, tt, code,
kbd, samp       { font-family: monospace }
pre             { white-space: pre }
button, textarea,
input, select   { display: inline-block }
big             { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }
table           { border-spacing: 2px; }
thead, tbody,
tfoot           { vertical-align: middle }
td, th, tr      { vertical-align: inherit }
s, strike, del  { text-decoration: line-through }
hr              { border: 1px inset }
ol, ul, dir,
menu, dd        { margin-left: 40px }
ol              { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }
u, ins          { text-decoration: underline }
br:before       { content: "\A"; white-space: pre-line }
center          { text-align: center }
:link, :visited { text-decoration: underline }
:focus          { outline: thin dotted invert }

/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }

*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed }

@media print {
  h1            { page-break-before: always }
  h1, h2, h3,
  h4, h5, h6    { page-break-after: avoid }
  ul, ol, dl    { page-break-before: avoid }
}

参考文档

1.Appendix D. Default style sheet for HTML 4
2.w3.org

JobbyM's Blog

发表于 | 分类于 | | 阅读次数

什么是DOM？

文档对象模型（Document Object Model，DOM）是一个独立于语言的，使用XML 和HTML 文档操作的应用程序接口（API）。在浏览器中，主要与HTML 文档打交道，在网页应用中检索XML 文档也很常见。DOM APIs 主要用于访问这些文档中的数据。

阅读全文 »