Update chinese version and fix image load error and update more reading's url

README.md

@@ -1,5 +1,11 @@
 # How Web Works
 
+<p align="center">
+    <span>English</span>
+    <span> | </span>
+    <a href="./README-zh.md">中文</a>
+</p>
+
 What happens behind the scenes when we type google.com in a browser?
 
 **Table of Contents**
@@ -80,9 +86,10 @@ The browser tries to figure out the IP address for the entered domain. The DNS l
 Here is a diagram of what a recursive DNS search looks like:
 
 <p align="center">
-  <img src="http://igoro.com/wordpress/wp-content/uploads/2010/02/500pxAn_example_of_theoretical_DNS_recursion_svg.png" alt="Recursive DNS search"/>
+  <img src="./img/500pxAn_example_of_theoretical_DNS_recursion_svg.png" alt="Recursive DNS search"/>
 </p>
 
+
 One worrying thing about DNS is that the entire domain like wikipedia.org or facebook.com seems to map to a single IP address. Fortunately, there are ways of mitigating the bottleneck:
 
 * **Round-robin DNS** is a solution where the DNS lookup returns multiple IP addresses, rather than just one. For example, facebook.com actually maps to four IP addresses.
@@ -234,9 +241,10 @@ Once the server supplies the resources (HTML, CSS, JS, images, etc.) to the brow
 7. **Data Storage:** This is a persistence layer. The browser may need to save data locally, such as cookies. Browsers also support storage mechanisms such as [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB) and [FileSystem](https://developer.chrome.com/apps/fileSystem).
 
 <p align="center">
-  <img src="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/layers.png" alt="Browser Components"/>
+  <img src="./img/Browser components.webp" alt="Browser Components"/>
 </p>
 
+
 Let’s start, with the simplest possible case: a plain HTML page with some text and a single image. What does the browser need to do to process this simple page?
 
 1. **Conversion:** the browser reads the raw bytes of the HTML off the disk or network and translates them to individual characters based on specified encoding of the file (e.g. UTF-8).
@@ -248,17 +256,19 @@ Let’s start, with the simplest possible case: a plain HTML page with some text
 4. **DOM construction:** Finally, because the HTML markup defines relationships between different tags (some tags are contained within tags) the created objects are linked in a tree data structure that also captures the parent-child relationships defined in the original markup: HTML object is a parent of the body object, the body is a parent of the paragraph object, and so on.
 
 <p align="center">
-  <img src="https://developers.google.com/web/fundamentals/performance/critical-rendering-path/images/full-process.png" alt="DOM Construction Process"/>
+  <img src="./img/DOM Construction Process.webp" alt="DOM Construction Process"/>
 </p>
 
+
 The final output of this entire process is the Document Object Model, or the “DOM” of our simple page, which the browser uses for all further processing of the page.
 
 Every time the browser has to process HTML markup it has to step through all of the steps above: convert bytes to characters, identify tokens, convert tokens to nodes, and build the DOM tree. This entire process can take some time, especially if we have a large amount of HTML to process.
 
 <p align="center">
-  <img src="https://developers.google.com/web/fundamentals/performance/critical-rendering-path/images/dom-timeline.png" alt="Tracing DOM construction in DevTools"/>
+  <img src="./img/Tracing DOM construction in DevTools.webp" alt="Tracing DOM construction in DevTools"/>
 </p>
 
+
 If you open up Chrome DevTools and record a timeline while the page is loaded, you can see the actual time taken to perform this step — in the example above, it took us ~5ms to convert a chunk of HTML bytes into a DOM tree. Of course, if the page was larger, as most pages are, this process might take significantly longer. You will see in our future sections on creating smooth animations that this can easily become your bottleneck if the browser has to process large amounts of HTML.
 
 ## Rendering Engine
@@ -290,9 +300,10 @@ The rendering engine will start getting the contents of the requested document f
 After that the basic flow of the rendering engine is:
 
 <p align="center">
-  <img src="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/flow.png" alt="Rendering engine basic flow"/>
+  <img src="./img/Rendering engine basic flow.png" alt="Rendering engine basic flow"/>
 </p>
 
+
 The rendering engine will start parsing the HTML document and convert elements to [DOM](http://domenlightenment.com/) nodes in a tree called the **"content tree"**.
 
 The engine will parse the style data, both in external CSS files and in style elements. Styling information together with visual instructions in the HTML will be used to create another tree: the **render tree**.
@@ -307,9 +318,10 @@ It's important to understand that this is a gradual process. For better user exp
 Given below is Webkit's flow:
 
 <p align="center">
-  <img src="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/webkitflow.png" alt="Webkit main flow"/>
+  <img src="./img/Webkit main flow.webp" alt="Webkit main flow"/>
 </p>
 
+
 ## Parsing Basics
 
 **Parsing:** Translating the document to a structure the code can use. The result of parsing is usually a tree of nodes that represent the structure of the document.
@@ -325,9 +337,10 @@ Parsing can be separated into two sub processes: lexical analysis and syntax ana
 Parsers usually divide the work between two components: the lexer (sometimes called tokenizer) that is responsible for breaking the input into valid tokens, and the parser that is responsible for constructing the parse tree by analyzing the document structure according to the language syntax rules. The lexer knows how to strip irrelevant characters like white spaces and line breaks.
 
 <p align="center">
-  <img src="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/image011.png" alt="Source document to parse tree"/>
+  <img src="./img/Source document to parse tree.webp" alt="Source document to parse tree"/>
 </p>
 
+
 The parsing process is iterative. The parser will usually ask the lexer for a new token and try to match the token with one of the syntax rules. If a rule is matched, a node corresponding to the token will be added to the parse tree and the parser will ask for another token.
 
 If no rule matches, the parser will store the token internally, and keep asking for tokens until a rule matching all the internally stored tokens is found. If no rule is found then the parser will raise an exception. This means the document was not valid and contained syntax errors.
@@ -339,9 +352,10 @@ HTML parsing algorithm consists of two stages: tokenization and tree constructio
 **Tokenization** is the lexical analysis, parsing the input into tokens. Among HTML tokens are start tags, end tags, attribute names and attribute values. The tokenizer recognizes the token, gives it to the tree constructor, and consumes the next character for recognizing the next token, and so on until the end of the input.
 
 <p align="center">
-  <img src="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/image017.png" alt="HTML parsing flow"/>
+  <img src="./img/HTML parsing flow.webp" alt="HTML parsing flow"/>
 </p>
 
+
 ## DOM Tree
 
 The output tree (the "parse tree") is a tree of DOM element and attribute nodes. DOM is short for Document Object Model. It is the object presentation of the HTML document and the interface of HTML elements to the outside world like JavaScript. The root of the tree is the "Document" object.
@@ -362,9 +376,10 @@ The DOM has an almost one-to-one relation to the markup. For example:
 This markup would be translated to the following DOM tree:
 
 <p align="center">
-  <img src="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/image015.png" alt="DOM Tree"/>
+  <img src="./img/DOM Tree.webp" alt="DOM Tree"/>
 </p>
 
+
 ### Why is the DOM slow?
 
 The short answer is that the DOM is not slow. Adding & removing a DOM node is a few pointer swaps, not much more than setting a property on the JS object.
@@ -391,7 +406,7 @@ There are DOM elements which correspond to several visual objects. These are usu
 Some render objects correspond to a DOM node but not in the same place in the tree. Floats and absolutely positioned elements are out of flow, placed in a different part of the tree, and mapped to the real frame. A placeholder frame is where they should have been.
 
 <p align="center">
-  <img src="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/image025.png" alt="The render tree and the corresponding DOM tree"/>
+  <img src="./img/The render tree and the corresponding DOM tree.webp" alt="The render tree and the corresponding DOM tree"/>
 </p>
 
 In WebKit the process of resolving the style and creating a renderer is called "attachment". Every DOM node has an "attach" method. Attachment is synchronous, node insertion to the DOM tree calls the new node "attach" method.
@@ -492,14 +507,14 @@ On 30 April 1993 CERN put the World Wide Web software in the public domain. CERN
 
 [What really happens when you navigate to a URL](http://igoro.com/archive/what-really-happens-when-you-navigate-to-a-url/)
 
-[How Browsers Work: Behind the scenes of modern web browsers](http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/)
+[How Browsers Work: Behind the scenes of modern web browsers](https://web.dev/howbrowserswork)
 
 [What exactly happens when you browse a website in your browser?](http://superuser.com/questions/31468/what-exactly-happens-when-you-browse-a-website-in-your-browser)
 
 [What happens when](https://github.com/alex/what-happens-when)
 
 [So how does the browser actually render a website](https://www.youtube.com/watch?v=SmE4OwHztCc)
 
-[Constructing the Object Model](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model)
+[Constructing the Object Model](https://web.dev/critical-rendering-path-constructing-the-object-model/)
 
-[How the Web Works: A Primer for Newcomers to Web Development (or anyone, really)](https://medium.freecodecamp.com/how-the-web-works-a-primer-for-newcomers-to-web-development-or-anyone-really-b4584e63585c#.7l3tokoh1)
+[How the Web Works: A Primer for Newcomers to Web Development (or anyone, really)](https://medium.freecodecamp.com/how-the-web-works-a-primer-for-newcomers-to-web-development-or-anyone-really-b4584e63585c)