Process B / S in response to the request, and the page rendered

Process B / S in response to the request, and the page rendered

• concept
  • B is a Browser, S is a server. B / S is a dynamic process, the incremental loading of resources.
  • C / S architecture and B / S architecture development differences:
    • The same point: there will be development, publishing, running process
    • Not two: C / S architecture is a packet issued (andorad a .apk package), is mounted on the device, some of which are run-time data on the .apk. And B / S architecture release: a source code on webServer, data on the CDN. Runtime, a request issued by the browser, the server returns data to run the program on the browser.

• Html a transmission request from the browser, the server returns the data during operation.
  

  1. The user input request address. Example: http://192.168.1.100/3000/index.html
  2. Browser (Browser)
     
  3. Analysis url, obtaining the domain name.
  4. hosts file [in general: under 'c \ windows \ system32 \ drivers \ etc'], find the corresponding IP. Found, return IP, no, go 3.
  5. The domain name is sent to the domain name servers for IP,, return IP.
  6. Browser to give IP, send a request to the IP.
  7. Server (Server)
  8. According to Information Request, run the program. Obtain data returned .html bytecode. Returned by the response.
     response.writeHead(200,{'Content-Type' : 'text/plain'})； response.end('HelloWorld!');
  9. Get the server browser .html returned by the response byte code
  10. Display page
  • Browser page rendering

    • browser rendering module
      

    • HTML interpreter: dom tree
    • CSS interpreter: css tree, provide the basis for layout
    • Layout: The html and css combine to render tree
    • js engine: execute javascript code, change the outcome of rendering. (Redraw and reflux)
    • Basic steps
      1. Generate dom tree
      2. Generate css tree
      3. Layout - Render Tree
      4. Draw (redraw and reflux), made up of layers based.
         • html code parsed from top to bottom.
         • When placed in css, css will be rendered in the html after loading is complete.
         • js directly load and run.
         • html loaded, css run, js run blocking each other. When loading html, css and js not block the run. css running, will block js operation. js running, will block html and css load operation.
         • js There defer \ when aysnc, do not block execution. But defer the execution time is counted in the load time, after the completion of the event will trigger contentcompletedload. aysnc of js not in load time when loading and html rendering is complete, direct execution contentcompletedload event.
           (This, understand, wrong place, please correct me.)

• Conclusion
  workflow B / S and the rendering process is the basis for future development. Whether optimization, or caching, etc., must be clearly aware of the entire workflow, so after work to do part-time work times.