浏览器发起网络请求及优化

当浏览器请求一个URL，服务器会响应一些html

  我们需要认识一个新的术语，关键渲染路径，就是浏览器渲染页面的步骤数

  一 关建路径的长度

        关键渲染路劲的度量标准是路径长度，最理想的关键路径长度是1.。

        如果页面包含一些内部样式和js,关键路径发生，有时候虽然关键路径长度没有改变，但是本身HTML大小增加，可能是某些地方受到了影响。

   二  关键字节数

         用来衡量渲染页面需要传送多少字节数

         如果认为不需要外部资源，就大错特错了，外部资源可以被缓存的。

        我们使用一个外部CSS文件，一个外部js文件和一个外部带async属性的js文件，

        浏览器请求页面，构建dom，发现外部资源后开始下载，css和js有较高的优先级，其他资源次之

        如果加上async属性的话，浏览器将用另外一个线程下载它，它处于较低优先级，不会阻塞页面渲染，也不影响关键路径。。

   三  关键文件

       浏览器渲染页面需要下载的文件总量，HTML文件，CSS文件，就是，，文件算关键文件，async的脚本不算，当然是文件越少越好。。

   HTTP1文件限制

     http1在同一域名，同一次，允许下载的文件数有大小限制的

    更重浏览器请求文件的最大并发数maximum

     通过把一些资源存放到影子域名，可以绕过这个限制，已达到最佳优化效果。

     不要把关键的css放在根域名之外的其他域名，有些场景下回对DNS查找和延迟起反作用。

  HTTP2

     如果网站使用了HTTP2，并且用户的浏览器也兼容，则可以完全避开这个下载限制

     http2测试网站

  TCP往返限制

      每一次服务器往返可以传送的最大数据是14kb，包括HTML，CSS 和脚本的网络请求。

      如果我们的HTML，或者积累的资源请求超过14kb时候，需要多做一次服务器往返。

我们整个HTML页面可以很好的压缩，Gzip可以压缩到2kb，远远低于14kB，因此一次服务器返回就能搞定。

         浏览器网络优化策略

   先来篇文章理解网络资源

   鉴别性能问题点击打开链接

   充分使用chrome开发者工具，以及network标签下模拟地宽带的情形，从而获取有价值的信息

    合并资源和文件

      基本上，每接收到一个外部CSS和js文件，浏览器都会构建cssom，执行脚本，尽管几个文件可以再一次往返中传送，但是也浪费了浏览器的宝贵资源和时间，最好还是合并文件，减少不必要的加载。

    首屏内容使用外部样式

     内部CSS和js不需要请求外部资源，相反，外部资源又可以被缓存，并保持DOM轻量，两者并没有非黑即白。

     但是首屏关键内容使用内部样式，可以避免请求额外的外部的资源，节省时间做最有意义的渲染。

         1 最小化/压缩图片

          2  延迟加载图片

         3 异步加载字体

         4 是否真正需要js/css

     原声HTML元素可以实现的行为是否用了脚本？是否有样式或者图标可以行内创建的，不需要内部/外部资源？

      cdn

     可以利用cdn存储数据，它会从用户最近的，延迟最低的位置分发到用户设备，加载时间更块。

   google传送门

   高性能网站传送门