A place to cache linked articles (think custom and personal wayback machine)
Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang=fr>
  4. <!-- Has to be within the first 1024 bytes, hence before the <title>
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset=utf-8>
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>What happens when... (archive) — David Larlet</title>
  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
  17. <link rel="manifest" href="/manifest.json">
  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">
  20. <meta name="apple-mobile-web-app-title" content="David Larlet">
  21. <meta name="application-name" content="David Larlet">
  22. <meta name="msapplication-TileColor" content="#da532c">
  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
  24. <meta name="theme-color" content="#f0f0ea">
  25. <!-- That good ol' feed, subscribe :p. -->
  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">
  27. <meta name="robots" content="noindex, nofollow">
  28. <meta content="origin-when-cross-origin" name="referrer">
  29. <!-- Canonical URL for SEO purposes -->
  30. <link rel="canonical" href="https://github.com/alex/what-happens-when/blob/master/README.rst">
  31. <style>
  32. /* http://meyerweb.com/eric/tools/css/reset/ */
  33. html, body, div, span,
  34. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  35. a, abbr, address, big, cite, code,
  36. del, dfn, em, img, ins,
  37. small, strike, strong, tt, var,
  38. dl, dt, dd, ol, ul, li,
  39. fieldset, form, label, legend,
  40. table, caption, tbody, tfoot, thead, tr, th, td,
  41. article, aside, canvas, details, embed,
  42. figure, figcaption, footer, header, hgroup,
  43. menu, nav, output, ruby, section, summary,
  44. time, mark, audio, video {
  45. margin: 0;
  46. padding: 0;
  47. border: 0;
  48. font-size: 100%;
  49. font: inherit;
  50. vertical-align: baseline;
  51. }
  52. /* HTML5 display-role reset for older browsers */
  53. article, aside, details, figcaption, figure,
  54. footer, header, hgroup, menu, nav, section { display: block; }
  55. body { line-height: 1; }
  56. blockquote, q { quotes: none; }
  57. blockquote:before, blockquote:after,
  58. q:before, q:after {
  59. content: '';
  60. content: none;
  61. }
  62. table {
  63. border-collapse: collapse;
  64. border-spacing: 0;
  65. }
  66. /* http://practicaltypography.com/equity.html */
  67. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
  68. /* https://www.filamentgroup.com/lab/js-web-fonts.html */
  69. @font-face {
  70. font-family: 'EquityTextB';
  71. src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
  72. url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  73. font-weight: 300;
  74. font-style: normal;
  75. font-display: swap;
  76. }
  77. @font-face {
  78. font-family: 'EquityTextB';
  79. src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
  80. url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  81. font-weight: 300;
  82. font-style: italic;
  83. font-display: swap;
  84. }
  85. @font-face {
  86. font-family: 'EquityTextB';
  87. src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
  88. url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  89. font-weight: 700;
  90. font-style: normal;
  91. font-display: swap;
  92. }
  93. @font-face {
  94. font-family: 'ConcourseT3';
  95. src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
  96. url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  97. font-weight: 300;
  98. font-style: normal;
  99. font-display: swap;
  100. }
  101. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
  102. body {
  103. /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  104. font-family: "EquityTextB", Palatino, serif;
  105. background-color: #f0f0ea;
  106. color: #07486c;
  107. font-kerning: normal;
  108. -moz-osx-font-smoothing: grayscale;
  109. -webkit-font-smoothing: subpixel-antialiased;
  110. text-rendering: optimizeLegibility;
  111. font-variant-ligatures: common-ligatures contextual;
  112. font-feature-settings: "kern", "liga", "clig", "calt";
  113. }
  114. pre, code, kbd, samp, var, tt {
  115. font-family: 'TriplicateT4c', monospace;
  116. }
  117. em {
  118. font-style: italic;
  119. color: #323a45;
  120. }
  121. strong {
  122. font-weight: bold;
  123. color: black;
  124. }
  125. nav {
  126. background-color: #323a45;
  127. color: #f0f0ea;
  128. display: flex;
  129. justify-content: space-around;
  130. padding: 1rem .5rem;
  131. }
  132. nav:last-child {
  133. border-bottom: 1vh solid #2d7474;
  134. }
  135. nav a {
  136. color: #f0f0ea;
  137. }
  138. nav abbr {
  139. border-bottom: 1px dotted white;
  140. }
  141. h1 {
  142. border-top: 1vh solid #2d7474;
  143. border-bottom: .2vh dotted #2d7474;
  144. background-color: #e3e1e1;
  145. color: #323a45;
  146. text-align: center;
  147. padding: 5rem 0 4rem 0;
  148. width: 100%;
  149. font-family: 'ConcourseT3';
  150. display: flex;
  151. flex-direction: column;
  152. }
  153. h1.single {
  154. padding-bottom: 10rem;
  155. }
  156. h1 span {
  157. position: absolute;
  158. top: 1vh;
  159. left: 20%;
  160. line-height: 0;
  161. }
  162. h1 span a {
  163. line-height: 1.7;
  164. padding: 1rem 1.2rem .6rem 1.2rem;
  165. border-radius: 0 0 6% 6%;
  166. background: #2d7474;
  167. font-size: 1.3rem;
  168. color: white;
  169. text-decoration: none;
  170. }
  171. h2 {
  172. margin: 4rem 0 1rem;
  173. border-top: .2vh solid #2d7474;
  174. padding-top: 1vh;
  175. }
  176. h3 {
  177. text-align: center;
  178. margin: 3rem 0 .75em;
  179. }
  180. hr {
  181. height: .4rem;
  182. width: .4rem;
  183. border-radius: .4rem;
  184. background: #07486c;
  185. margin: 2.5rem auto;
  186. }
  187. time {
  188. display: bloc;
  189. margin-left: 0 !important;
  190. }
  191. ul, ol {
  192. margin: 2rem;
  193. }
  194. ul {
  195. list-style-type: square;
  196. }
  197. a {
  198. text-decoration-skip-ink: auto;
  199. text-decoration-thickness: 0.05em;
  200. text-underline-offset: 0.09em;
  201. }
  202. article {
  203. max-width: 50rem;
  204. display: flex;
  205. flex-direction: column;
  206. margin: 2rem auto;
  207. }
  208. article.single {
  209. border-top: .2vh dotted #2d7474;
  210. margin: -6rem auto 1rem auto;
  211. background: #f0f0ea;
  212. padding: 2rem;
  213. }
  214. article p:last-child {
  215. margin-bottom: 1rem;
  216. }
  217. p {
  218. padding: 0 .5rem;
  219. margin-left: 3rem;
  220. }
  221. p + p,
  222. figure + p {
  223. margin-top: 2rem;
  224. }
  225. blockquote {
  226. background-color: #e3e1e1;
  227. border-left: .5vw solid #2d7474;
  228. display: flex;
  229. flex-direction: column;
  230. align-items: center;
  231. padding: 1rem;
  232. margin: 1.5rem;
  233. }
  234. blockquote cite {
  235. font-style: italic;
  236. }
  237. blockquote p {
  238. margin-left: 0;
  239. }
  240. figure {
  241. border-top: .2vh solid #2d7474;
  242. background-color: #e3e1e1;
  243. text-align: center;
  244. padding: 1.5rem 0;
  245. margin: 1rem 0 0;
  246. font-size: 1.5rem;
  247. width: 100%;
  248. }
  249. figure img {
  250. max-width: 250px;
  251. max-height: 250px;
  252. border: .5vw solid #323a45;
  253. padding: 1px;
  254. }
  255. figcaption {
  256. padding: 1rem;
  257. line-height: 1.4;
  258. }
  259. aside {
  260. display: flex;
  261. flex-direction: column;
  262. background-color: #e3e1e1;
  263. padding: 1rem 0;
  264. border-bottom: .2vh solid #07486c;
  265. }
  266. aside p {
  267. max-width: 50rem;
  268. margin: 0 auto;
  269. }
  270. /* https://fvsch.com/code/css-locks/ */
  271. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  272. font-size: 1rem;
  273. line-height: calc( 1.5em + 0.2 * 1rem );
  274. }
  275. h1 {
  276. font-size: 1.9rem;
  277. line-height: calc( 1.2em + 0.2 * 1rem );
  278. }
  279. h2 {
  280. font-size: 1.6rem;
  281. line-height: calc( 1.3em + 0.2 * 1rem );
  282. }
  283. h3 {
  284. font-size: 1.35rem;
  285. line-height: calc( 1.4em + 0.2 * 1rem );
  286. }
  287. @media (min-width: 20em) {
  288. /* The (100vw - 20rem) / (50 - 20) part
  289. resolves to 0-1rem, depending on the
  290. viewport width (between 20em and 50em). */
  291. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  292. font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
  293. line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
  294. margin-left: 0;
  295. }
  296. h1 {
  297. font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  298. line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  299. }
  300. h2 {
  301. font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  302. line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  303. }
  304. h3 {
  305. font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  306. line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  307. }
  308. }
  309. @media (min-width: 50em) {
  310. /* The right part of the addition *must* be a
  311. rem value. In this example we *could* change
  312. the whole declaration to font-size:2.5rem,
  313. but if our baseline value was not expressed
  314. in rem we would have to use calc. */
  315. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  316. font-size: calc( 1rem + .6 * 1rem );
  317. line-height: 1.5em;
  318. }
  319. p, li, pre, details {
  320. margin-left: 3rem;
  321. }
  322. h1 {
  323. font-size: calc( 1.9rem + 1.5 * 1rem );
  324. line-height: 1.2em;
  325. }
  326. h2 {
  327. font-size: calc( 1.5rem + 1.5 * 1rem );
  328. line-height: 1.3em;
  329. }
  330. h3 {
  331. font-size: calc( 1.35rem + 1.5 * 1rem );
  332. line-height: 1.4em;
  333. }
  334. figure img {
  335. max-width: 500px;
  336. max-height: 500px;
  337. }
  338. }
  339. figure.unsquared {
  340. margin-bottom: 1.5rem;
  341. }
  342. figure.unsquared img {
  343. height: inherit;
  344. }
  345. @media print {
  346. body { font-size: 100%; }
  347. a:after { content: " (" attr(href) ")"; }
  348. a, a:link, a:visited, a:after {
  349. text-decoration: underline;
  350. text-shadow: none !important;
  351. background-image: none !important;
  352. background: white;
  353. color: black;
  354. }
  355. abbr[title] { border-bottom: 0; }
  356. abbr[title]:after { content: " (" attr(title) ")"; }
  357. img { page-break-inside: avoid; }
  358. @page { margin: 2cm .5cm; }
  359. h1, h2, h3 { page-break-after: avoid; }
  360. p3 { orphans: 3; widows: 3; }
  361. img {
  362. max-width: 250px !important;
  363. max-height: 250px !important;
  364. }
  365. nav, aside { display: none; }
  366. }
  367. ul.with_columns {
  368. column-count: 1;
  369. }
  370. @media (min-width: 20em) {
  371. ul.with_columns {
  372. column-count: 2;
  373. }
  374. }
  375. @media (min-width: 50em) {
  376. ul.with_columns {
  377. column-count: 3;
  378. }
  379. }
  380. ul.with_two_columns {
  381. column-count: 1;
  382. }
  383. @media (min-width: 20em) {
  384. ul.with_two_columns {
  385. column-count: 1;
  386. }
  387. }
  388. @media (min-width: 50em) {
  389. ul.with_two_columns {
  390. column-count: 2;
  391. }
  392. }
  393. .gallery {
  394. display: flex;
  395. flex-wrap: wrap;
  396. justify-content: space-around;
  397. }
  398. .gallery figure img {
  399. margin-left: 1rem;
  400. margin-right: 1rem;
  401. }
  402. .gallery figure figcaption {
  403. font-family: 'ConcourseT3'
  404. }
  405. footer {
  406. font-family: 'ConcourseT3';
  407. display: flex;
  408. flex-direction: column;
  409. border-top: 3px solid white;
  410. padding: 4rem 0;
  411. background-color: #07486c;
  412. color: white;
  413. }
  414. footer > * {
  415. max-width: 50rem;
  416. margin: 0 auto;
  417. }
  418. footer a {
  419. color: #f1c40f;
  420. }
  421. footer .avatar {
  422. width: 200px;
  423. height: 200px;
  424. border-radius: 50%;
  425. float: left;
  426. -webkit-shape-outside: circle();
  427. shape-outside: circle();
  428. margin-right: 2rem;
  429. padding: 2px 5px 5px 2px;
  430. background: white;
  431. border-left: 1px solid #f1c40f;
  432. border-top: 1px solid #f1c40f;
  433. border-right: 5px solid #f1c40f;
  434. border-bottom: 5px solid #f1c40f;
  435. }
  436. </style>
  437. <h1>
  438. <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  439. What happens when... (archive)
  440. <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
  441. </h1>
  442. <section>
  443. <article>
  444. <h3><a href="https://github.com/alex/what-happens-when/blob/master/README.rst">Source originale du contenu</a></h3>
  445. <article class="markdown-body entry-content" itemprop="text"><a name="user-content-what-happens-when"/>
  446. <h2><a id="user-content-what-happens-when" class="anchor" aria-hidden="true" href="#what-happens-when"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>What happens when...</h2>
  447. <p>This repository is an attempt to answer the age old interview question "What
  448. happens when you type google.com into your browser's address box and press
  449. enter?"</p>
  450. <p>Except instead of the usual story, we're going to try to answer this question
  451. in as much detail as possible. No skipping out on anything.</p>
  452. <p>This is a collaborative process, so dig in and try to help out! There are tons
  453. of details missing, just waiting for you to add them! So send us a pull
  454. request, please!</p>
  455. <p>This is all licensed under the terms of the <a href="https://creativecommons.org/publicdomain/zero/1.0/" rel="nofollow">Creative Commons Zero</a> license.</p>
  456. <p>Read this in <a href="https://github.com/skyline75489/what-happens-when-zh_CN">简体中文</a> (simplified Chinese) and <a href="https://github.com/SantonyChoi/what-happens-when-KR">한국어</a> (Korean). NOTE: these
  457. have not been reviewed by the alex/what-happens-when maintainers.</p>
  458. <a name="user-content-table-of-contents"/>
  459. <h2><a id="user-content-table-of-contents" class="anchor" aria-hidden="true" href="#table-of-contents"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>Table of Contents</h2>
  460. <a name="user-content-the-g-key-is-pressed"/>
  461. <h3><a id="user-content-the-g-key-is-pressed" class="anchor" aria-hidden="true" href="#the-g-key-is-pressed"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>The "g" key is pressed</h3>
  462. <p>The following sections explain the physical keyboard actions
  463. and the OS interrupts. When you press the key "g" the browser receives the
  464. event and the auto-complete functions kick in.
  465. Depending on your browser's algorithm and if you are in
  466. private/incognito mode or not various suggestions will be presented
  467. to you in the dropbox below the URL bar. Most of these algorithms sort
  468. and prioritize results based on search history, bookmarks, cookies, and
  469. popular searches from the internet as a whole. As you are typing
  470. "google.com" many blocks of code run and the suggestions will be refined
  471. with each key press. It may even suggest "google.com" before you finish typing
  472. it.</p>
  473. <a name="user-content-the-enter-key-bottoms-out"/>
  474. <h3><a id="user-content-the-enter-key-bottoms-out" class="anchor" aria-hidden="true" href="#the-enter-key-bottoms-out"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>The "enter" key bottoms out</h3>
  475. <p>To pick a zero point, let's choose the Enter key on the keyboard hitting the
  476. bottom of its range. At this point, an electrical circuit specific to the enter
  477. key is closed (either directly or capacitively). This allows a small amount of
  478. current to flow into the logic circuitry of the keyboard, which scans the state
  479. of each key switch, debounces the electrical noise of the rapid intermittent
  480. closure of the switch, and converts it to a keycode integer, in this case 13.
  481. The keyboard controller then encodes the keycode for transport to the computer.
  482. This is now almost universally over a Universal Serial Bus (USB) or Bluetooth
  483. connection, but historically has been over PS/2 or ADB connections.</p>
  484. <p><em>In the case of the USB keyboard:</em></p>
  485. <ul>
  486. <li>The USB circuitry of the keyboard is powered by the 5V supply provided over
  487. pin 1 from the computer's USB host controller.</li>
  488. <li>The keycode generated is stored by internal keyboard circuitry memory in a
  489. register called "endpoint".</li>
  490. <li>The host USB controller polls that "endpoint" every ~10ms (minimum value
  491. declared by the keyboard), so it gets the keycode value stored on it.</li>
  492. <li>This value goes to the USB SIE (Serial Interface Engine) to be converted in
  493. one or more USB packets that follow the low level USB protocol.</li>
  494. <li>Those packets are sent by a differential electrical signal over D+ and D-
  495. pins (the middle 2) at a maximum speed of 1.5 Mb/s, as an HID
  496. (Human Interface Device) device is always declared to be a "low speed device"
  497. (USB 2.0 compliance).</li>
  498. <li>This serial signal is then decoded at the computer's host USB controller, and
  499. interpreted by the computer's Human Interface Device (HID) universal keyboard
  500. device driver. The value of the key is then passed into the operating
  501. system's hardware abstraction layer.</li>
  502. </ul>
  503. <p><em>In the case of Virtual Keyboard (as in touch screen devices):</em></p>
  504. <ul>
  505. <li>When the user puts their finger on a modern capacitive touch screen, a
  506. tiny amount of current gets transferred to the finger. This completes the
  507. circuit through the electrostatic field of the conductive layer and
  508. creates a voltage drop at that point on the screen. The
  509. <code>screen controller</code> then raises an interrupt reporting the coordinate of
  510. the key press.</li>
  511. <li>Then the mobile OS notifies the current focused application of a press event
  512. in one of its GUI elements (which now is the virtual keyboard application
  513. buttons).</li>
  514. <li>The virtual keyboard can now raise a software interrupt for sending a
  515. 'key pressed' message back to the OS.</li>
  516. <li>This interrupt notifies the current focused application of a 'key pressed'
  517. event.</li>
  518. </ul>
  519. <a name="user-content-interrupt-fires-not-for-usb-keyboards"/>
  520. <h3><a id="user-content-interrupt-fires-not-for-usb-keyboards" class="anchor" aria-hidden="true" href="#interrupt-fires-not-for-usb-keyboards"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>Interrupt fires [NOT for USB keyboards]</h3>
  521. <p>The keyboard sends signals on its interrupt request line (IRQ), which is mapped
  522. to an <code>interrupt vector</code> (integer) by the interrupt controller. The CPU uses
  523. the <code>Interrupt Descriptor Table</code> (IDT) to map the interrupt vectors to
  524. functions (<code>interrupt handlers</code>) which are supplied by the kernel. When an
  525. interrupt arrives, the CPU indexes the IDT with the interrupt vector and runs
  526. the appropriate handler. Thus, the kernel is entered.</p>
  527. <a name="user-content-on-windows-a-wm-keydown-message-is-sent-to-the-app"/>
  528. <h3><a id="user-content-on-windows-a-wm_keydown-message-is-sent-to-the-app" class="anchor" aria-hidden="true" href="#on-windows-a-wm_keydown-message-is-sent-to-the-app"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>(On Windows) A <code>WM_KEYDOWN</code> message is sent to the app</h3>
  529. <p>The HID transport passes the key down event to the <code>KBDHID.sys</code> driver which
  530. converts the HID usage into a scancode. In this case the scan code is
  531. <code>VK_RETURN</code> (<code>0x0D</code>). The <code>KBDHID.sys</code> driver interfaces with the
  532. <code>KBDCLASS.sys</code> (keyboard class driver). This driver is responsible for
  533. handling all keyboard and keypad input in a secure manner. It then calls into
  534. <code>Win32K.sys</code> (after potentially passing the message through 3rd party
  535. keyboard filters that are installed). This all happens in kernel mode.</p>
  536. <p><code>Win32K.sys</code> figures out what window is the active window through the
  537. <code>GetForegroundWindow()</code> API. This API provides the window handle of the
  538. browser's address box. The main Windows "message pump" then calls
  539. <code>SendMessage(hWnd, WM_KEYDOWN, VK_RETURN, lParam)</code>. <code>lParam</code> is a bitmask
  540. that indicates further information about the keypress: repeat count (0 in this
  541. case), the actual scan code (can be OEM dependent, but generally wouldn't be
  542. for <code>VK_RETURN</code>), whether extended keys (e.g. alt, shift, ctrl) were also
  543. pressed (they weren't), and some other state.</p>
  544. <p>The Windows <code>SendMessage</code> API is a straightforward function that
  545. adds the message to a queue for the particular window handle (<code>hWnd</code>).
  546. Later, the main message processing function (called a <code>WindowProc</code>) assigned
  547. to the <code>hWnd</code> is called in order to process each message in the queue.</p>
  548. <p>The window (<code>hWnd</code>) that is active is actually an edit control and the
  549. <code>WindowProc</code> in this case has a message handler for <code>WM_KEYDOWN</code> messages.
  550. This code looks within the 3rd parameter that was passed to <code>SendMessage</code>
  551. (<code>wParam</code>) and, because it is <code>VK_RETURN</code> knows the user has hit the ENTER
  552. key.</p>
  553. <a name="user-content-on-os-x-a-keydown-nsevent-is-sent-to-the-app"/>
  554. <h3><a id="user-content-on-os-x-a-keydown-nsevent-is-sent-to-the-app" class="anchor" aria-hidden="true" href="#on-os-x-a-keydown-nsevent-is-sent-to-the-app"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>(On OS X) A <code>KeyDown</code> NSEvent is sent to the app</h3>
  555. <p>The interrupt signal triggers an interrupt event in the I/O Kit kext keyboard
  556. driver. The driver translates the signal into a key code which is passed to the
  557. OS X <code>WindowServer</code> process. Resultantly, the <code>WindowServer</code> dispatches an
  558. event to any appropriate (e.g. active or listening) applications through their
  559. Mach port where it is placed into an event queue. Events can then be read from
  560. this queue by threads with sufficient privileges calling the
  561. <code>mach_ipc_dispatch</code> function. This most commonly occurs through, and is
  562. handled by, an <code>NSApplication</code> main event loop, via an <code>NSEvent</code> of
  563. <code>NSEventType</code> <code>KeyDown</code>.</p>
  564. <a name="user-content-on-gnu-linux-the-xorg-server-listens-for-keycodes"/>
  565. <h3><a id="user-content-on-gnulinux-the-xorg-server-listens-for-keycodes" class="anchor" aria-hidden="true" href="#on-gnulinux-the-xorg-server-listens-for-keycodes"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>(On GNU/Linux) the Xorg server listens for keycodes</h3>
  566. <p>When a graphical <code>X server</code> is used, <code>X</code> will use the generic event
  567. driver <code>evdev</code> to acquire the keypress. A re-mapping of keycodes to scancodes
  568. is made with <code>X server</code> specific keymaps and rules.
  569. When the scancode mapping of the key pressed is complete, the <code>X server</code>
  570. sends the character to the <code>window manager</code> (DWM, metacity, i3, etc), so the
  571. <code>window manager</code> in turn sends the character to the focused window.
  572. The graphical API of the window that receives the character prints the
  573. appropriate font symbol in the appropriate focused field.</p>
  574. <a name="user-content-parse-url"/>
  575. <h3><a id="user-content-parse-url" class="anchor" aria-hidden="true" href="#parse-url"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>Parse URL</h3>
  576. <a name="user-content-is-it-a-url-or-a-search-term"/>
  577. <h3><a id="user-content-is-it-a-url-or-a-search-term" class="anchor" aria-hidden="true" href="#is-it-a-url-or-a-search-term"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>Is it a URL or a search term?</h3>
  578. <p>When no protocol or valid domain name is given the browser proceeds to feed
  579. the text given in the address box to the browser's default web search engine.
  580. In many cases the URL has a special piece of text appended to it to tell the
  581. search engine that it came from a particular browser's URL bar.</p>
  582. <a name="user-content-convert-non-ascii-unicode-characters-in-hostname"/>
  583. <h3><a id="user-content-convert-non-ascii-unicode-characters-in-hostname" class="anchor" aria-hidden="true" href="#convert-non-ascii-unicode-characters-in-hostname"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>Convert non-ASCII Unicode characters in hostname</h3>
  584. <ul>
  585. <li>The browser checks the hostname for characters that are not in <code>a-z</code>,
  586. <code>A-Z</code>, <code>0-9</code>, <code>-</code>, or <code>.</code>.</li>
  587. <li>Since the hostname is <code>google.com</code> there won't be any, but if there were
  588. the browser would apply <a href="https://en.wikipedia.org/wiki/Punycode" rel="nofollow">Punycode</a> encoding to the hostname portion of the
  589. URL.</li>
  590. </ul>
  591. <a name="user-content-check-hsts-list"/>
  592. <h3><a id="user-content-check-hsts-list" class="anchor" aria-hidden="true" href="#check-hsts-list"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>Check HSTS list</h3>
  593. <ul>
  594. <li>The browser checks its "preloaded HSTS (HTTP Strict Transport Security)"
  595. list. This is a list of websites that have requested to be contacted via
  596. HTTPS only.</li>
  597. <li>If the website is in the list, the browser sends its request via HTTPS
  598. instead of HTTP. Otherwise, the initial request is sent via HTTP.
  599. (Note that a website can still use the HSTS policy <em>without</em> being in the
  600. HSTS list. The first HTTP request to the website by a user will receive a
  601. response requesting that the user only send HTTPS requests. However, this
  602. single HTTP request could potentially leave the user vulnerable to a
  603. <a href="http://en.wikipedia.org/wiki/SSL_stripping" rel="nofollow">downgrade attack</a>, which is why the HSTS list is included in modern web
  604. browsers.)</li>
  605. </ul>
  606. <a name="user-content-dns-lookup"/>
  607. <h3><a id="user-content-dns-lookup" class="anchor" aria-hidden="true" href="#dns-lookup"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>DNS lookup</h3>
  608. <ul>
  609. <li>Browser checks if the domain is in its cache. (to see the DNS Cache in
  610. Chrome, go to chrome://net-internals/#dns).</li>
  611. <li>If not found, the browser calls <code>gethostbyname</code> library function (varies by
  612. OS) to do the lookup.</li>
  613. <li><code>gethostbyname</code> checks if the hostname can be resolved by reference in the
  614. local <code>hosts</code> file (whose location <a href="https://en.wikipedia.org/wiki/Hosts_%28file%29#Location_in_the_file_system" rel="nofollow">varies by OS</a>) before trying to
  615. resolve the hostname through DNS.</li>
  616. <li>If <code>gethostbyname</code> does not have it cached nor can find it in the <code>hosts</code>
  617. file then it makes a request to the DNS server configured in the network
  618. stack. This is typically the local router or the ISP's caching DNS server.</li>
  619. <li>If the DNS server is on the same subnet the network library follows the
  620. <code>ARP process</code> below for the DNS server.</li>
  621. <li>If the DNS server is on a different subnet, the network library follows
  622. the <code>ARP process</code> below for the default gateway IP.</li>
  623. </ul>
  624. <a name="user-content-arp-process"/>
  625. <h3><a id="user-content-arp-process" class="anchor" aria-hidden="true" href="#arp-process"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>ARP process</h3>
  626. <p>In order to send an ARP (Address Resolution Protocol) broadcast the network
  627. stack library needs the target IP address to look up. It also needs to know the
  628. MAC address of the interface it will use to send out the ARP broadcast.</p>
  629. <p>The ARP cache is first checked for an ARP entry for our target IP. If it is in
  630. the cache, the library function returns the result: Target IP = MAC.</p>
  631. <p>If the entry is not in the ARP cache:</p>
  632. <ul>
  633. <li>The route table is looked up, to see if the Target IP address is on any of
  634. the subnets on the local route table. If it is, the library uses the
  635. interface associated with that subnet. If it is not, the library uses the
  636. interface that has the subnet of our default gateway.</li>
  637. <li>The MAC address of the selected network interface is looked up.</li>
  638. <li>The network library sends a Layer 2 (data link layer of the <a href="https://en.wikipedia.org/wiki/OSI_model" rel="nofollow">OSI model</a>)
  639. ARP request:</li>
  640. </ul>
  641. <p><code>ARP Request</code>:</p>
  642. <pre>Sender MAC: interface:mac:address:here
  643. Sender IP: interface.ip.goes.here
  644. Target MAC: FF:FF:FF:FF:FF:FF (Broadcast)
  645. Target IP: target.ip.goes.here
  646. </pre>
  647. <p>Depending on what type of hardware is between the computer and the router:</p>
  648. <p>Directly connected:</p>
  649. <ul>
  650. <li>If the computer is directly connected to the router the router responds
  651. with an <code>ARP Reply</code> (see below)</li>
  652. </ul>
  653. <p>Hub:</p>
  654. <ul>
  655. <li>If the computer is connected to a hub, the hub will broadcast the ARP
  656. request out all other ports. If the router is connected on the same "wire",
  657. it will respond with an <code>ARP Reply</code> (see below).</li>
  658. </ul>
  659. <p>Switch:</p>
  660. <ul>
  661. <li>If the computer is connected to a switch, the switch will check its local
  662. CAM/MAC table to see which port has the MAC address we are looking for. If
  663. the switch has no entry for the MAC address it will rebroadcast the ARP
  664. request to all other ports.</li>
  665. <li>If the switch has an entry in the MAC/CAM table it will send the ARP request
  666. to the port that has the MAC address we are looking for.</li>
  667. <li>If the router is on the same "wire", it will respond with an <code>ARP Reply</code>
  668. (see below)</li>
  669. </ul>
  670. <p><code>ARP Reply</code>:</p>
  671. <pre>Sender MAC: target:mac:address:here
  672. Sender IP: target.ip.goes.here
  673. Target MAC: interface:mac:address:here
  674. Target IP: interface.ip.goes.here
  675. </pre>
  676. <p>Now that the network library has the IP address of either our DNS server or
  677. the default gateway it can resume its DNS process:</p>
  678. <ul>
  679. <li>Port 53 is opened to send a UDP request to DNS server (if the response size
  680. is too large, TCP will be used instead).</li>
  681. <li>If the local/ISP DNS server does not have it, then a recursive search is
  682. requested and that flows up the list of DNS servers until the SOA is reached,
  683. and if found an answer is returned.</li>
  684. </ul>
  685. <a name="user-content-opening-of-a-socket"/>
  686. <h3><a id="user-content-opening-of-a-socket" class="anchor" aria-hidden="true" href="#opening-of-a-socket"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>Opening of a socket</h3>
  687. <p>Once the browser receives the IP address of the destination server, it takes
  688. that and the given port number from the URL (the HTTP protocol defaults to port
  689. 80, and HTTPS to port 443), and makes a call to the system library function
  690. named <code>socket</code> and requests a TCP socket stream - <code>AF_INET/AF_INET6</code> and
  691. <code>SOCK_STREAM</code>.</p>
  692. <ul>
  693. <li>This request is first passed to the Transport Layer where a TCP segment is
  694. crafted. The destination port is added to the header, and a source port is
  695. chosen from within the kernel's dynamic port range (ip_local_port_range in
  696. Linux).</li>
  697. <li>This segment is sent to the Network Layer, which wraps an additional IP
  698. header. The IP address of the destination server as well as that of the
  699. current machine is inserted to form a packet.</li>
  700. <li>The packet next arrives at the Link Layer. A frame header is added that
  701. includes the MAC address of the machine's NIC as well as the MAC address of
  702. the gateway (local router). As before, if the kernel does not know the MAC
  703. address of the gateway, it must broadcast an ARP query to find it.</li>
  704. </ul>
  705. <p>At this point the packet is ready to be transmitted through either:</p>
  706. <p>For most home or small business Internet connections the packet will pass from
  707. your computer, possibly through a local network, and then through a modem
  708. (MOdulator/DEModulator) which converts digital 1's and 0's into an analog
  709. signal suitable for transmission over telephone, cable, or wireless telephony
  710. connections. On the other end of the connection is another modem which converts
  711. the analog signal back into digital data to be processed by the next <a href="https://en.wikipedia.org/wiki/Computer_network#Network_nodes" rel="nofollow">network
  712. node</a> where the from and to addresses would be analyzed further.</p>
  713. <p>Most larger businesses and some newer residential connections will have fiber
  714. or direct Ethernet connections in which case the data remains digital and
  715. is passed directly to the next <a href="https://en.wikipedia.org/wiki/Computer_network#Network_nodes" rel="nofollow">network node</a> for processing.</p>
  716. <p>Eventually, the packet will reach the router managing the local subnet. From
  717. there, it will continue to travel to the autonomous system's (AS) border
  718. routers, other ASes, and finally to the destination server. Each router along
  719. the way extracts the destination address from the IP header and routes it to
  720. the appropriate next hop. The time to live (TTL) field in the IP header is
  721. decremented by one for each router that passes. The packet will be dropped if
  722. the TTL field reaches zero or if the current router has no space in its queue
  723. (perhaps due to network congestion).</p>
  724. <p>This send and receive happens multiple times following the TCP connection flow:</p>
  725. <ul>
  726. <li>Client chooses an initial sequence number (ISN) and sends the packet to the
  727. server with the SYN bit set to indicate it is setting the ISN</li>
  728. <li><dl>
  729. <dt>Server receives SYN and if it's in an agreeable mood:</dt>
  730. <dd><ul>
  731. <li>Server chooses its own initial sequence number</li>
  732. <li>Server sets SYN to indicate it is choosing its ISN</li>
  733. <li>Server copies the (client ISN +1) to its ACK field and adds the ACK flag
  734. to indicate it is acknowledging receipt of the first packet</li>
  735. </ul>
  736. </dd>
  737. </dl>
  738. </li>
  739. <li><dl>
  740. <dt>Client acknowledges the connection by sending a packet:</dt>
  741. <dd><ul>
  742. <li>Increases its own sequence number</li>
  743. <li>Increases the receiver acknowledgment number</li>
  744. <li>Sets ACK field</li>
  745. </ul>
  746. </dd>
  747. </dl>
  748. </li>
  749. <li><dl>
  750. <dt>Data is transferred as follows:</dt>
  751. <dd><ul>
  752. <li>As one side sends N data bytes, it increases its SEQ by that number</li>
  753. <li>When the other side acknowledges receipt of that packet (or a string of
  754. packets), it sends an ACK packet with the ACK value equal to the last
  755. received sequence from the other</li>
  756. </ul>
  757. </dd>
  758. </dl>
  759. </li>
  760. <li><dl>
  761. <dt>To close the connection:</dt>
  762. <dd><ul>
  763. <li>The closer sends a FIN packet</li>
  764. <li>The other sides ACKs the FIN packet and sends its own FIN</li>
  765. <li>The closer acknowledges the other side's FIN with an ACK</li>
  766. </ul>
  767. </dd>
  768. </dl>
  769. </li>
  770. </ul>
  771. <a name="user-content-tls-handshake"/>
  772. <h3><a id="user-content-tls-handshake" class="anchor" aria-hidden="true" href="#tls-handshake"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>TLS handshake</h3>
  773. <ul>
  774. <li>The client computer sends a <code>ClientHello</code> message to the server with its
  775. Transport Layer Security (TLS) version, list of cipher algorithms and
  776. compression methods available.</li>
  777. <li>The server replies with a <code>ServerHello</code> message to the client with the
  778. TLS version, selected cipher, selected compression methods and the server's
  779. public certificate signed by a CA (Certificate Authority). The certificate
  780. contains a public key that will be used by the client to encrypt the rest of
  781. the handshake until a symmetric key can be agreed upon.</li>
  782. <li>The client verifies the server digital certificate against its list of
  783. trusted CAs. If trust can be established based on the CA, the client
  784. generates a string of pseudo-random bytes and encrypts this with the server's
  785. public key. These random bytes can be used to determine the symmetric key.</li>
  786. <li>The server decrypts the random bytes using its private key and uses these
  787. bytes to generate its own copy of the symmetric master key.</li>
  788. <li>The client sends a <code>Finished</code> message to the server, encrypting a hash of
  789. the transmission up to this point with the symmetric key.</li>
  790. <li>The server generates its own hash, and then decrypts the client-sent hash
  791. to verify that it matches. If it does, it sends its own <code>Finished</code> message
  792. to the client, also encrypted with the symmetric key.</li>
  793. <li>From now on the TLS session transmits the application (HTTP) data encrypted
  794. with the agreed symmetric key.</li>
  795. </ul>
  796. <a name="user-content-http-protocol"/>
  797. <h3><a id="user-content-http-protocol" class="anchor" aria-hidden="true" href="#http-protocol"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>HTTP protocol</h3>
  798. <p>If the web browser used was written by Google, instead of sending an HTTP
  799. request to retrieve the page, it will send a request to try and negotiate with
  800. the server an "upgrade" from HTTP to the SPDY protocol.</p>
  801. <p>If the client is using the HTTP protocol and does not support SPDY, it sends a
  802. request to the server of the form:</p>
  803. <pre>GET / HTTP/1.1
  804. Host: google.com
  805. Connection: close
  806. [other headers]
  807. </pre>
  808. <p>where <code>[other headers]</code> refers to a series of colon-separated key-value pairs
  809. formatted as per the HTTP specification and separated by single new lines.
  810. (This assumes the web browser being used doesn't have any bugs violating the
  811. HTTP spec. This also assumes that the web browser is using <code>HTTP/1.1</code>,
  812. otherwise it may not include the <code>Host</code> header in the request and the version
  813. specified in the <code>GET</code> request will either be <code>HTTP/1.0</code> or <code>HTTP/0.9</code>.)</p>
  814. <p>HTTP/1.1 defines the "close" connection option for the sender to signal that
  815. the connection will be closed after completion of the response. For example,</p>
  816. <blockquote>
  817. Connection: close</blockquote>
  818. <p>HTTP/1.1 applications that do not support persistent connections MUST include
  819. the "close" connection option in every message.</p>
  820. <p>After sending the request and headers, the web browser sends a single blank
  821. newline to the server indicating that the content of the request is done.</p>
  822. <p>The server responds with a response code denoting the status of the request and
  823. responds with a response of the form:</p>
  824. <pre>200 OK
  825. [response headers]
  826. </pre>
  827. <p>Followed by a single newline, and then sends a payload of the HTML content of
  828. <code>www.google.com</code>. The server may then either close the connection, or if
  829. headers sent by the client requested it, keep the connection open to be reused
  830. for further requests.</p>
  831. <p>If the HTTP headers sent by the web browser included sufficient information for
  832. the web server to determine if the version of the file cached by the web
  833. browser has been unmodified since the last retrieval (ie. if the web browser
  834. included an <code>ETag</code> header), it may instead respond with a request of
  835. the form:</p>
  836. <pre>304 Not Modified
  837. [response headers]
  838. </pre>
  839. <p>and no payload, and the web browser instead retrieves the HTML from its cache.</p>
  840. <p>After parsing the HTML, the web browser (and server) repeats this process
  841. for every resource (image, CSS, favicon.ico, etc) referenced by the HTML page,
  842. except instead of <code>GET / HTTP/1.1</code> the request will be
  843. <code>GET /$(URL relative to www.google.com) HTTP/1.1</code>.</p>
  844. <p>If the HTML referenced a resource on a different domain than
  845. <code>www.google.com</code>, the web browser goes back to the steps involved in
  846. resolving the other domain, and follows all steps up to this point for that
  847. domain. The <code>Host</code> header in the request will be set to the appropriate
  848. server name instead of <code>google.com</code>.</p>
  849. <a name="user-content-http-server-request-handle"/>
  850. <h3><a id="user-content-http-server-request-handle" class="anchor" aria-hidden="true" href="#http-server-request-handle"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>HTTP Server Request Handle</h3>
  851. <p>The HTTPD (HTTP Daemon) server is the one handling the requests/responses on
  852. the server side. The most common HTTPD servers are Apache or nginx for Linux
  853. and IIS for Windows.</p>
  854. <ul>
  855. <li>The HTTPD (HTTP Daemon) receives the request.</li>
  856. <li><dl>
  857. <dt>The server breaks down the request to the following parameters:</dt>
  858. <dd><ul>
  859. <li>HTTP Request Method (either <code>GET</code>, <code>HEAD</code>, <code>POST</code>, <code>PUT</code>,
  860. <code>DELETE</code>, <code>CONNECT</code>, <code>OPTIONS</code>, or <code>TRACE</code>). In the case of a URL
  861. entered directly into the address bar, this will be <code>GET</code>.</li>
  862. <li>Domain, in this case - google.com.</li>
  863. <li>Requested path/page, in this case - / (as no specific path/page was
  864. requested, / is the default path).</li>
  865. </ul>
  866. </dd>
  867. </dl>
  868. </li>
  869. <li>The server verifies that there is a Virtual Host configured on the server
  870. that corresponds with google.com.</li>
  871. <li>The server verifies that google.com can accept GET requests.</li>
  872. <li>The server verifies that the client is allowed to use this method
  873. (by IP, authentication, etc.).</li>
  874. <li>If the server has a rewrite module installed (like mod_rewrite for Apache or
  875. URL Rewrite for IIS), it tries to match the request against one of the
  876. configured rules. If a matching rule is found, the server uses that rule to
  877. rewrite the request.</li>
  878. <li>The server goes to pull the content that corresponds with the request,
  879. in our case it will fall back to the index file, as "/" is the main file
  880. (some cases can override this, but this is the most common method).</li>
  881. <li>The server parses the file according to the handler. If Google
  882. is running on PHP, the server uses PHP to interpret the index file, and
  883. streams the output to the client.</li>
  884. </ul>
  885. <a name="user-content-behind-the-scenes-of-the-browser"/>
  886. <h3><a id="user-content-behind-the-scenes-of-the-browser" class="anchor" aria-hidden="true" href="#behind-the-scenes-of-the-browser"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>Behind the scenes of the Browser</h3>
  887. <p>Once the server supplies the resources (HTML, CSS, JS, images, etc.)
  888. to the browser it undergoes the below process:</p>
  889. <ul>
  890. <li>Parsing - HTML, CSS, JS</li>
  891. <li>Rendering - Construct DOM Tree → Render Tree → Layout of Render Tree →
  892. Painting the render tree</li>
  893. </ul>
  894. <a name="user-content-browser"/>
  895. <h3><a id="user-content-browser" class="anchor" aria-hidden="true" href="#browser"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>Browser</h3>
  896. <p>The browser's functionality is to present the web resource you choose, by
  897. requesting it from the server and displaying it in the browser window.
  898. The resource is usually an HTML document, but may also be a PDF,
  899. image, or some other type of content. The location of the resource is
  900. specified by the user using a URI (Uniform Resource Identifier).</p>
  901. <p>The way the browser interprets and displays HTML files is specified
  902. in the HTML and CSS specifications. These specifications are maintained
  903. by the W3C (World Wide Web Consortium) organization, which is the
  904. standards organization for the web.</p>
  905. <p>Browser user interfaces have a lot in common with each other. Among the
  906. common user interface elements are:</p>
  907. <ul>
  908. <li>An address bar for inserting a URI</li>
  909. <li>Back and forward buttons</li>
  910. <li>Bookmarking options</li>
  911. <li>Refresh and stop buttons for refreshing or stopping the loading of
  912. current documents</li>
  913. <li>Home button that takes you to your home page</li>
  914. </ul>
  915. <p><strong>Browser High Level Structure</strong></p>
  916. <p>The components of the browsers are:</p>
  917. <ul>
  918. <li><strong>User interface:</strong> The user interface includes the address bar,
  919. back/forward button, bookmarking menu, etc. Every part of the browser
  920. display except the window where you see the requested page.</li>
  921. <li><strong>Browser engine:</strong> The browser engine marshals actions between the UI
  922. and the rendering engine.</li>
  923. <li><strong>Rendering engine:</strong> The rendering engine is responsible for displaying
  924. requested content. For example if the requested content is HTML, the
  925. rendering engine parses HTML and CSS, and displays the parsed content on
  926. the screen.</li>
  927. <li><strong>Networking:</strong> The networking handles network calls such as HTTP requests,
  928. using different implementations for different platforms behind a
  929. platform-independent interface.</li>
  930. <li><strong>UI backend:</strong> The UI backend is used for drawing basic widgets like combo
  931. boxes and windows. This backend exposes a generic interface that is not
  932. platform specific.
  933. Underneath it uses operating system user interface methods.</li>
  934. <li><strong>JavaScript engine:</strong> The JavaScript engine is used to parse and
  935. execute JavaScript code.</li>
  936. <li><strong>Data storage:</strong> The data storage is a persistence layer. The browser may
  937. need to save all sorts of data locally, such as cookies. Browsers also
  938. support storage mechanisms such as localStorage, IndexedDB, WebSQL and
  939. FileSystem.</li>
  940. </ul>
  941. <a name="user-content-html-parsing"/>
  942. <h3><a id="user-content-html-parsing" class="anchor" aria-hidden="true" href="#html-parsing"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>HTML parsing</h3>
  943. <p>The rendering engine starts getting the contents of the requested
  944. document from the networking layer. This will usually be done in 8kB chunks.</p>
  945. <p>The primary job of HTML parser to parse the HTML markup into a parse tree.</p>
  946. <p>The output tree (the "parse tree") is a tree of DOM element and attribute
  947. nodes. DOM is short for Document Object Model. It is the object presentation
  948. of the HTML document and the interface of HTML elements to the outside world
  949. like JavaScript. The root of the tree is the "Document" object. Prior of
  950. any manipulation via scripting, the DOM has an almost one-to-one relation to
  951. the markup.</p>
  952. <p><strong>The parsing algorithm</strong></p>
  953. <p>HTML cannot be parsed using the regular top-down or bottom-up parsers.</p>
  954. <p>The reasons are:</p>
  955. <ul>
  956. <li>The forgiving nature of the language.</li>
  957. <li>The fact that browsers have traditional error tolerance to support well
  958. known cases of invalid HTML.</li>
  959. <li>The parsing process is reentrant. For other languages, the source doesn't
  960. change during parsing, but in HTML, dynamic code (such as script elements
  961. containing document.write() calls) can add extra tokens, so the parsing
  962. process actually modifies the input.</li>
  963. </ul>
  964. <p>Unable to use the regular parsing techniques, the browser utilizes a custom
  965. parser for parsing HTML. The parsing algorithm is described in
  966. detail by the HTML5 specification.</p>
  967. <p>The algorithm consists of two stages: tokenization and tree construction.</p>
  968. <p><strong>Actions when the parsing is finished</strong></p>
  969. <p>The browser begins fetching external resources linked to the page (CSS, images,
  970. JavaScript files, etc.).</p>
  971. <p>At this stage the browser marks the document as interactive and starts
  972. parsing scripts that are in "deferred" mode: those that should be
  973. executed after the document is parsed. The document state is
  974. set to "complete" and a "load" event is fired.</p>
  975. <p>Note there is never an "Invalid Syntax" error on an HTML page. Browsers fix
  976. any invalid content and go on.</p>
  977. <a name="user-content-css-interpretation"/>
  978. <h3><a id="user-content-css-interpretation" class="anchor" aria-hidden="true" href="#css-interpretation"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>CSS interpretation</h3>
  979. <ul>
  980. <li>Parse CSS files, <code>&lt;style&gt;</code> tag contents, and <code>style</code> attribute
  981. values using <a href="http://www.w3.org/TR/CSS2/grammar.html" rel="nofollow">"CSS lexical and syntax grammar"</a></li>
  982. <li>Each CSS file is parsed into a <code>StyleSheet object</code>, where each object
  983. contains CSS rules with selectors and objects corresponding CSS grammar.</li>
  984. <li>A CSS parser can be top-down or bottom-up when a specific parser generator
  985. is used.</li>
  986. </ul>
  987. <a name="user-content-page-rendering"/>
  988. <h3><a id="user-content-page-rendering" class="anchor" aria-hidden="true" href="#page-rendering"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>Page Rendering</h3>
  989. <ul>
  990. <li>Create a 'Frame Tree' or 'Render Tree' by traversing the DOM nodes, and
  991. calculating the CSS style values for each node.</li>
  992. <li>Calculate the preferred width of each node in the 'Frame Tree' bottom up
  993. by summing the preferred width of the child nodes and the node's
  994. horizontal margins, borders, and padding.</li>
  995. <li>Calculate the actual width of each node top-down by allocating each node's
  996. available width to its children.</li>
  997. <li>Calculate the height of each node bottom-up by applying text wrapping and
  998. summing the child node heights and the node's margins, borders, and padding.</li>
  999. <li>Calculate the coordinates of each node using the information calculated
  1000. above.</li>
  1001. <li>More complicated steps are taken when elements are <code>floated</code>,
  1002. positioned <code>absolutely</code> or <code>relatively</code>, or other complex features
  1003. are used. See
  1004. <a href="http://dev.w3.org/csswg/css2/" rel="nofollow">http://dev.w3.org/csswg/css2/</a> and <a href="http://www.w3.org/Style/CSS/current-work" rel="nofollow">http://www.w3.org/Style/CSS/current-work</a>
  1005. for more details.</li>
  1006. <li>Create layers to describe which parts of the page can be animated as a group
  1007. without being re-rasterized. Each frame/render object is assigned to a layer.</li>
  1008. <li>Textures are allocated for each layer of the page.</li>
  1009. <li>The frame/render objects for each layer are traversed and drawing commands
  1010. are executed for their respective layer. This may be rasterized by the CPU
  1011. or drawn on the GPU directly using D2D/SkiaGL.</li>
  1012. <li>All of the above steps may reuse calculated values from the last time the
  1013. webpage was rendered, so that incremental changes require less work.</li>
  1014. <li>The page layers are sent to the compositing process where they are combined
  1015. with layers for other visible content like the browser chrome, iframes
  1016. and addon panels.</li>
  1017. <li>Final layer positions are computed and the composite commands are issued
  1018. via Direct3D/OpenGL. The GPU command buffer(s) are flushed to the GPU for
  1019. asynchronous rendering and the frame is sent to the window server.</li>
  1020. </ul>
  1021. <a name="user-content-gpu-rendering"/>
  1022. <h3><a id="user-content-gpu-rendering" class="anchor" aria-hidden="true" href="#gpu-rendering"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>GPU Rendering</h3>
  1023. <ul>
  1024. <li>During the rendering process the graphical computing layers can use general
  1025. purpose <code>CPU</code> or the graphical processor <code>GPU</code> as well.</li>
  1026. <li>When using <code>GPU</code> for graphical rendering computations the graphical
  1027. software layers split the task into multiple pieces, so it can take advantage
  1028. of <code>GPU</code> massive parallelism for float point calculations required for
  1029. the rendering process.</li>
  1030. </ul>
  1031. <a name="user-content-window-server"/>
  1032. <h3><a id="user-content-window-server" class="anchor" aria-hidden="true" href="#window-server"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>Window Server</h3>
  1033. <a name="user-content-post-rendering-and-user-induced-execution"/>
  1034. <h3><a id="user-content-post-rendering-and-user-induced-execution" class="anchor" aria-hidden="true" href="#post-rendering-and-user-induced-execution"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>Post-rendering and user-induced execution</h3>
  1035. <p>After rendering has completed, the browser executes JavaScript code as a result
  1036. of some timing mechanism (such as a Google Doodle animation) or user
  1037. interaction (typing a query into the search box and receiving suggestions).
  1038. Plugins such as Flash or Java may execute as well, although not at this time on
  1039. the Google homepage. Scripts can cause additional network requests to be
  1040. performed, as well as modify the page or its layout, causing another round of
  1041. page rendering and painting.</p>
  1042. </article>
  1043. </article>
  1044. </section>
  1045. <nav id="jumpto">
  1046. <p>
  1047. <a href="/david/blog/">Accueil du blog</a> |
  1048. <a href="https://github.com/alex/what-happens-when/blob/master/README.rst">Source originale</a> |
  1049. <a href="/david/stream/2019/">Accueil du flux</a>
  1050. </p>
  1051. </nav>
  1052. <footer>
  1053. <div>
  1054. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  1055. <p>
  1056. Bonjour/Hi!
  1057. Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>
  1058. Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).
  1059. </p>
  1060. <p>
  1061. Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.
  1062. </p>
  1063. <p>
  1064. Voici quelques articles choisis :
  1065. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  1066. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  1067. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  1068. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  1069. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  1070. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  1071. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  1072. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  1073. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  1074. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  1075. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  1076. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  1077. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  1078. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  1079. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  1080. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  1081. </p>
  1082. <p>
  1083. On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.
  1084. </p>
  1085. <p>
  1086. Je ne traque pas ta navigation mais mon
  1087. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  1088. conserve des logs d’accès.
  1089. </p>
  1090. </div>
  1091. </footer>
  1092. <script type="text/javascript">
  1093. ;(_ => {
  1094. const jumper = document.getElementById('jumper')
  1095. jumper.addEventListener('click', e => {
  1096. e.preventDefault()
  1097. const anchor = e.target.getAttribute('href')
  1098. const targetEl = document.getElementById(anchor.substring(1))
  1099. targetEl.scrollIntoView({behavior: 'smooth'})
  1100. })
  1101. })()
  1102. </script>