Web 标准，浏览器原理及网站性能优化方面的知识（一）

• 什么是web标准。参开文献：什么是Web标准（网页标准） (biancheng.net)
  • 行为标准。
    • DOM（Document Object Model）的缩写。译为”文档对象模型“。
    • ECMScript。也就是JavaScript5.0的版本。
  • 结构标准。
    • 就是HTML（超文本标记语言）。
  • 浏览器工作原理。
    • 了解如何提升性能和感知性能，有助于了解浏览器的工作原理。
      • 尽可能快的让页面加载完成。
        • 导航。
          • 就是在浏览器地址栏输入网址。等待时间和带宽会导致它延时。
          • 往返第一次
        • DNS查询。
          • 通常第一次访问网址，会通过域名服务器解析成IP地址。这个IP地址会缓存在浏览器中。
          • 如果加载的资源都在不同的域名，那么第一次访问网页的DNS查询会拖慢加载时间。
          • 往返第二次
        • TCP握手。
          • 在浏览器和服务器通过HTTPS发送数据之前，需要先运行TCP握手简历套接字，传递一些参数。
          • 往返第五次
        • TLS协商。
          • 在建立安全连接之前，还需要三次握手，连着上一个TCP握手就是六次。
          • 往返第八次
        • 小结：
          • 按照HTTPS协议发送数据之前需要8次往返。
        • 响应。
          • 浏览器发送GET，服务器发送相关的响应头和HTML的内容进行回应。
            • 这些数据是通过TCP套接字传输的。
          • 浏览器发送的第一个包是14KB上限的HTML页面。
            • 这是web性能优化的重点。大于这个上限就会有可能造成拥堵。（优化点1）
            • 拥塞控制
              • 服务器发送数据给浏览器，浏览器会返回一个“确认帧”来确认传输。
              • 如果服务器发送的数据太多太快，数据包有可能会被丢弃。
              • 拥塞控制算法，能够确保发送速率。
        • 解析。
          • 将服务器返回的数据解析成为“DOM”和“CSSOM”。并且绘制成页面。
          • 构建DOM树。（解析步骤1）
            • 这个过程占用了主线程。
            • 预加载扫描仪。
              • 优先加载高优先级资源，例如：CSS/JavaScript和web字体。（优化点2）
              • 先从服务器中下载资源，当DOM数构建到需要这些资源的地方时，资源有可能已经下载完成。
          • 构建CSSOM树。（解析步骤2）
            • 创建时间小于一次DNS查询所需时间。不需要特别优化。
            • 将图片地址放到CSS中的url中？
        • 其它过程。
          • JavaScript编译
          • 构建辅助功能树
          • 渲染。
            • 将CSSOM树和DOM树组合成一个Render树，计算可见布局，绘制到屏幕上。
          • Style。