狠狠撸

Web前端性能优化
leeight - 2014

What happened?
http://fex./blog/2014/05/what-happen/

What happened?
? 从输?入 URL 到浏览器接收的过程中发?生了什么？
? 浏览器如何向??网卡发送数据？
? 数据如何从本机??网卡发送到服务器？
? 服务器接收到数据后会进?行哪些处理？
? 服务器返回数据后浏览器如何处理？
? 浏览器如何将?页?面展现出来？

?大纲
? 数据的传输
? 带宽和延迟
? ??网络协议
? 缓存
? 数据的渲染
? HTML & CSS
? JavaScript Engine

带宽和延迟
2168 * 1000 / 300000 ≈ 7ms

带宽和延迟
http://chimera.labs.oreilly.com/books/1230000000545/ch01.html#SPEED_FEATURE

带宽和延迟
https://www.igvita.com/slides/2012/html5devconf/#1

带宽和延迟
http://chimera.labs.oreilly.com/books/1230000000545/ch10.html#LATENCY_BOTTLENECK

带宽和延迟
? 带宽不是那么重要
? 延迟才是影响??网络性能的关键

??网络协议
? DNS
? TCP/IP
? HTTP/1.0 & 1.1
? SPDY

DNS
? DNS查询是?比较耗时的?一个操作
? dig +trace www. @8.8.8.8

DNS
!
; <<>> DiG 9.8.3-P1 <<>> +trace www. @8.8.8.8
;; global options: +cmd
. 18409 IN NS j.root-servers.net.
. 18409 IN NS b.root-servers.net.
;; Received 228 bytes from 8.8.8.8#53(8.8.8.8) in 127 ms
!
com. 172800 IN NS l.gtld-servers.net.
com. 172800 IN NS m.gtld-servers.net.
!
. 172800 IN NS dns..
. 172800 IN NS ns2..
. 172800 IN NS ns3..
. 172800 IN NS ns4..
. 172800 IN NS ns7..
!
www.. 1200 IN CNAME www.a.shifen.com.
a.shifen.com. 1200 IN NS ns5.a.shifen.com.

DNS
? dig www. @8.8.8.8
? dig www. @114.114.114.114

DNS Prefetch
http://blog.chromium.org/2008/09/dns-prefetching-or-pre-resolving.html

TCP/IP
? 三次握?手
? SYN, SYN ACK, ACK
? 慢启动和流量控制

三次握?手
http://chimera.labs.oreilly.com/books/1230000000545/ch02.html#TCP_HANDSHAKE

慢启动
http://chimera.labs.oreilly.com/books/1230000000545/ch02.html#TCP_HANDSHAKE

Head-of-Line Blocking
http://chimera.labs.oreilly.com/books/1230000000545/ch02.html#TCP_HOL

扩展阅读
? TCP Fast Open
? SYN 包传输数据，降低 ~15%
? Building Blocks of TCP
? QUIC（Quick UDP Internet Connections）
? 0 - RTT
? 避免 HOLB

HTTP 1.0 & 1.1
? 1996: RFC1945
? 1999: RFC2616
? 2014: RFC7230, RFC7231, RFC7232, RFC7233,
RFC7234, RFC7235

HTTP 1.1 vs 1.0
? 新增的?一些特性
? Keep-Alive Connection
? Chunked Encoding Transfer
? Byte Range Requests
? Cache Mechanisms
? Request Pipeline
? ……

Keep-Alive Connection
$ telnet www. 80
Trying 61.135.169.125...
Connected to www.a.shifen.com.
Escape character is ‘^]'.
GET / HTTP/1.0
!
HTTP/1.1 200 OK
Content-Type: text/html
Connection: Close
………
Connection closed by foreign host.
$ telnet www. 80
Trying 61.135.169.125...
Connected to www.a.shifen.com.
Escape character is ‘^]'.
GET / HTTP/1.1
Host: www.
!
HTTP/1.1 200 OK
…
Content-Type: text/html
Transfer-Encoding: chunked
Connection: Keep-Alive
…
!
3dd6
………
0

Byte Range Requests
wget -c http://www.

Cache Mechanisms
? Expires
? Cache-Control
? max-age, no-cache, public, private
? Last-Modi?ed
? ETag

Cache Mechanisms
? Expires 和 Cache-Control ?二选?一
? 建议使?用Cache-Control，避免Request Peak
? 主?页?面不设置，或者设置不缓存 Expires: -1
? Last-Modi?ed 和 ETag ?二选?一
? 建议使?用ETag，更准确?一些

Cache-Control policy
https://developers.google.com/web/fundamentals/performance/optimizing-content-ef?ciency/http-caching#validating-cached-responses-with-etags

http://www.17ce.com/
http://bs./adtest/baidu-00c51dd5.html
http://ecma.bdimg.com/adtest/baidu-00c51dd5.html
CDN

SPDY & HTTP 2
? 主要??目的是降低传输的延迟
? HTTP 2是基于SPDY进?行演化
? https://http2.github.io/http2-spec/

SPDY & HTTP 2
http://chimera.labs.oreilly.com/books/1230000000545/ch12.html#HTTP2_STREAMS_MESSAGES_FRAMES

SPDY & HTTP 2 vs HTTP 1
http://stackover?ow.com/questions/10480122/difference-between-http-pipeling-and-http-multiplexing-with-spdy

SPDY & HTTP 2
chrome://net-internals/#events&q=id:747802

如何?生效的？
? bin/openssl s_client -nextprotoneg
'spdy/3.1, spdy/3, http/1.1, spdy/2'
-connect google.com:443

数据的传输
? 延迟很重要
? 减少DNS查询 / DNS预查询 / DNS结果缓存
? 减少HTTP请求的数
? 尽量使?用CDN
? 合理的配置服务器缓存策略
? 减少传输的内容?大?小 / 压缩?文本 / 删除?无?用的?文本
? 新的协议 SPDY, QUIC, HTTP 2

HTML & CSS
? PreloadScanner
? 书写?高效的 CSS selectors
? 避免使?用 CSS expressions
? 把CSS放到?页?面顶部
? 明确图?片的尺?寸
? 明确内容的编码
? ……

PreloadScanner
https://plus.google.com/+IlyaGrigorik/posts/8AwRUE7wqAE

PreloadScanner
<!—— GOOD ——>
<script src=/slideshow/web-2014/37087385/“large.js”></script>
<script src=“ad.js” async></script>
!
<!—— BAD ——>
<script src=/slideshow/web-2014/37087385/“large.js”></script>
<script>
var s = document.createElement(‘script’);
s.src = “ad.js”;
document.head.appendChild(s);
</script>

书写?高效的 CSS selectors
? Avoid a universal key selector.
? Make your rules as speci?c as possible.
? Remove redundant quali?ers.
? Avoid using descendant selectors, especially
those that specify redundant ancestors.
? Use class selectors instead of descendant
selectors.
https://developers.google.com/speed/docs/best-practices/rendering#UseEf?cientCSSSelectors

避免使?用 CSS expressions
? 如果可能的话，使?用标准的 CSS 属性
? 如果?无法避免，尽量?用 JavaScript 来完成所需的
功能

JavaScript Engine
? JIT Optimization
? Optimization killers

JIT Optimization
? Small Integers

? Hidden Class

? Inline Cache

? Type Interface

? ...

De?ning JIT
?Finding
?a
?way
?to
?generate
?native
?
code
?
?Then
?execute
?the
?native
?code

De?ning JIT
!
?unsigned
?char[]
?code
?=
?{

?
?
?
?0x48,
?0x89,
?0xf8

?
?
?
?0x48,
?0x83,
?0xc0,
?0x04

?
?
?
?0xc3
};

De?ning JIT
?mov
?%rdi,
?%rax
?
?add
?$4,
?%rax
?
?ret

De?ning JIT
?mov
?%rdi,
?%rax
?
?add
?$4,
?%rax
?
?ret function add4(num) {
return num + 4;
}

De?ning JIT
https://hacks.mozilla.org/2009/07/tracemonkey-overview/

Small Integer &Value
Representation

Value Representation
? Tagged pointer

? NaN Boxing
Avoid Pointer Dereference

Tagged pointer
? Pointer vs Integer

sizeof( void * )
? 32bit

? 64bit

Aligned pointer
? pointer
?%
?8
?==
?0
?
? pointer
?%
?4
?==
?0

Tagged pointer
? 1010 1111 0101 0011
1100 0000 0000 0000

? 1010 1111 0101 0011
1100 0000 0000 0000
1010 1111 0101 0011
1100 0000 0000 0000

Tagged pointer int31
?iiiiiiii|iiiiiiii|iiiiiiii|iiiiiii1
?
?Range:
?[0,
?2^31]

Tagged Pointer
? int32 & double will over?ow

Tagged pointer pointer
?pppppppp|pppppppp|pppppppp|ppppppT0
?
?Range:
?[0,
?2^31]

64 vs 48
http://en.wikipedia.org/wiki/X86_64#Virtual_address_space_details

3.1415926
?S=0
?
?E=10000000000
?
?M=100100100001111110110100110100
0100101101100001001010
?
?V=(-?‐1)^S
?*
?2^(E-?‐0x3ff)
?*
?1.M

Optimization killers
? with
? debugger
? arguments
? for-in
? …

with statement
function containsWith() {
return 3;
with({}) {}
}
!
containsWith();
%OptimizeFunctionOnNextCall(containsWith);
containsWith();
var status = %GetOptimizationStatus(containsWith);
console.log(status === 2);

debugger
var DEBUG = false;
function main() {
if (DEBUG) {
debugger;
}
require(“./biz1”);
}
var DEBUG = false;
function main() {
}

arguments
function fn1(a, b) {
b = b || 10;
return a + b;
}
!
function fn2() {
var args = [].slice.call(
arguments);
}
function fn3(a, opt_b) {
var b = opt_b || 10;
return a + b;
}
!
function fn4() {
var args = [];
for(var i = 0;
i < arguments.length;
i ++ ){
args[i] = arguments[i];
}
}

for-in
function nonLocalKey1() {
var obj = {}
for(var key in obj);
return function() {
return key;
};
}
!
var key;
var obj = {}
for(key in obj);
}
var obj = {}
for(var key in obj);
}

数据的渲染
? HTML & CSS
? 没有什么特殊注意的内容
? 控制代码的体积，选择合理的HTML结构
? JavaScript Engine
? JS引擎的性能越来越好
? Make it happy!

公司内的?一些平台
? http://uaq.
? http://webspeed.
? http://speedup.
? http://yunjiasu.
? http://bcs-console.bae.

public-web-perf@w3.org
? ?首屏渲染的提案

References
? https://developers.google.com/speed/docs/best-practices/rendering
? https://developers.google.com/speed/articles/spdy-for-mobile
? https://docs.google.com/spreadsheet/ccc?
key=0As3TLupYw2RedG50WW9hNldQaERDTlFHMEc2S2FBTXc#gid=4
? https://www.igvita.com/
? https://www.igvita.com/slides/2012/html5devconf/#52
? http://httparchive.org/trends.php#bytesTotal&reqTotal
? http://http2.github.io/
? https://github.com/h5bp/server-con?gs
? https://igrigorik.github.io/resource-hints/
? http://nikic.github.io/2012/02/02/Pointer-magic-for-ef?cient-dynamic-value-representations.html
? ……

狠狠撸

Web前端性能优化 2014

Recommended

More Related Content

What's hot (20)

Similar to Web前端性能优化 2014 (20)

Web前端性能优化 2014