标签：生成   type   ntc   browser   直接   png   请求响应   概念   com   

B/S请求响应，及页面渲染的过程

• 概念
  • B 是 Browser， S是服务器。B/S是动态、增量的加载资源的过程。
  • C/S架构和B/S架构开发区别：
    • 相同点 ：都会有开发、发布、运行的过程
    • 不两点：C/S架构发布的是一个包（andorad是一个.apk包），安装在设备上，运行时数据有一些是在.apk上的。而B/S架构发布：是将源代码放在webServer上，数据放在CDN上。运行时，由浏览器发布一个请求，服务器运行程序返回数据到浏览器上的。

• 一个html从浏览器发送请求、服务器返回数据的工作过程。
  

  1. 用户输入请求地址。例：http://192.168.1.100/3000/index.html
  2. 浏览器(Browser)
     
  3. 分析url，获取域名。
  4. hosts文件 【一般在‘c:\windows\system32\drivers\etc’ 下】,查找对应的IP。找到 ，返回IP，无，则走3。
  5. 将域名发送到域名服务器，查找IP, ,返回 IP 。
  6. 浏览器得到IP, 发送请求到该IP。
  7. 服务器(Server)
  8. 根据Request信息，运行程序。得到数据，返回.html字节码。由response返回。
     response.writeHead(200,{‘Content-Type‘ : ‘text/plain‘})； response.end(‘HelloWorld!‘);
  9. 浏览器获取服务器通过response返回.html的字节码
  10. 显示页面
  • 浏览器渲染页面
    • browser的渲染模块
      
    • HTML解释器：dom树
    • CSS解释器：css树，为布局提供依据
    • 布局：将html与css结合起来，渲染树
    • js引擎：执行javascript代码，改变渲染的结果。(重绘和回流)
    • 基础步骤
      1. 生成dom树
      2. 生成css树
      3. 布局-渲染树
      4. 绘制（重绘和回流） ，由图层为基础。
         • html 代码由上到下解析的。
         • css放入中时，则css会在html加载完成后再进行渲染。
         • js是直接加载和运行的。
         • html加载、css运行、js运行是相互阻塞的。html加载时，不阻塞css和js的运行。css运行时，会阻塞js的运行 。js运行时，会阻塞html加载和css运行。
         • js有defer\aysnc时，不阻塞执行。但defer的执行时间算在load的时间 内，完成后才会触发contentcompletedload 事件 。aysnc的js不算在load的时间内，当html加载和渲染完成后，直接执行contentcompletedload事件。
           （这一点，个人理解，有误的地方，请指正。）

• 结束语
  B/S的工作流程及渲染的过程是以后开发的基础。无论是优化，还是缓存等，都必须清晰的知道整个的工作流程，这样以后的工作才能事半工倍。

B/S请求响应，及页面渲染的过程

标签：生成   type   ntc   browser   直接   png   请求响应   概念   com   

原文地址：https://www.cnblogs.com/fanruili/p/11599661.html