性能优化1
一.为什么要优化性能
1.网页加载时间超过3秒就会有百分之57的用户会选择关闭当前网页；
2.在ToC的业务中糟糕的性能直接影响到交易量，下单率等等；
曾经我们的在学习前端的时候相信都接触过雅虎军规35条等等的性能优化建议
二.我们如何看到网页的
2.1 进程和线程
进程包含线程，线程依赖进程。曾经的浏览器是单进程的。
如此多的功能模块运行在一个进程里，是导致单进程浏览器不稳定、不流畅和不安全的一个主要因素。下面我就来一一分析下出现这些问题的原因。
2007年以后多进程浏览器的开始盛行；Chrome的改进了浏览器的设计。
如下：
如今演变成现在的这样子：
从图中可以看出，最新的 Chrome 浏览器包括：1 个浏览器（Browser）主进程、1 个 GPU 进程、1 个网络（NetWork）进程、多个渲染进程和多个插件进程。
浏览器进程：负责交互，显示，提供存储等功能；
渲染进程：核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页，排版引擎 Blink 和 JavaScript 引擎 V8 都是运行在该进程中，默认情况下，Chrome 会为每个 Tab 标签创建一个渲染进程。出于安全考虑，渲染进程都是运行在沙箱模式下;
GPU进程：处理3D css;
网络进程：负责网络的资源的加载工作；
插件进程：·····
三.老生常谈-从url输入到页面加载出来经历了什么
1.浏览器进程，输入URL会开始域名解析，先去本地host去匹配，如果发现host中存在映射关系，就直接去对应的ip，如果没有就要经过dns解析，查找ip;
dns解析过程如下： 浏览器： 域名 -> 浏览器缓存 -> Y -> ip 浏览器没有就会到本机： -> OS DNS缓存/hosts -> Y -> 返回ip 没有就到路由器： -> dns缓存中是否有 -> Y ->返回 没有 DNS服务器： -> dns服务器 // 如果没有命中还会去到顶级域名服务器查找
2.获取端口号，http默认为80 https默认为443
3.网络进程，根据ip和端口号建立tcp链接，经历3次握手如果是https还要建立tls链接;
相关建立链接的过程自行查找，可以查看一下http0.9,1.0,1.1,2.0,3.0的区别
4.发起请求前会读取本地的缓存；
首先会读取内存中的，再是硬盘，如果都没有再去服务端； 在network中会看到from memory cache,from disk cache, 304的状态码；
5.http发起请求先检查浏览器的强缓存，如果命中，直接返回对应资源文件的副本；
强缓存通过响应头字段控制：Expires，cache-control，expires是过期时间，是一个绝对值，过期就重新请求； cache-control有几个属性值，比如max-age,no-cache,no-store等 cache-control优先级高于expires
6.如果没有命中，就需要走协商缓存会去对比资源，是否需要更新，如果不需要读取本地的缓存，如果需要更新就加载新的资源；
7.服务器返回HTML响应给浏览器
8.渲染进程：浏览器解析HTML
9.对HTML页面引用的所有资源包括js，css，图片等等，浏览器都发送GET请求，又重复上面的过程
以上是表面上的经历，在浏览器环境中又做了些什么呢？ 1.首先，浏览器进程接收到用户输入的 URL 请求，浏览器进程便将该 URL 转发给网络进程。 2.然后，在网络进程中发起真正的 URL 请求。接着网络进程接收到了响应头数据，便解析响应头数据，并将数据转发给浏览器进程。浏览器进程接收到网络进程的响应头数据之后，发送“提交导航 (CommitNavigation)”消息到渲染进程；渲染进程接收到“提交导航”的消息之后，便开始准备接收 HTML 数据，接收数据的方式是直接和网络进程建立数据管道； 3.最后渲染进程会向浏览器进程“确认提交”，这是告诉浏览器进程：“已经准备好接受和解析页面数据了”。 4.浏览器进程接收到渲染进程“提交文档”的消息之后，便开始移除之前旧的文档，然后更新浏览器进程中的页面状态 简单来说就是：url输入 -> 网络进程 -> 浏览器进程 -> 遇到html -> 提交导航 -> beforeunload -> 导航完成 -> 渲染进程开始准备
4.渲染流程是怎么样的
渲染流程非常的复杂，但是可以分步来看，总体流程大概如下：
HTML/CSS/JS -> 子流程 -> 子流程 -> 子流程 -> 完整的页面。
子流程包含以下内容：构建 DOM 树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成。
如何去分析这个过程；关注三要素：输入-> 加工 -> 输出。
4.1 构建DOM树
问1: 为何要构建DOM树 ？
问2: 如何构建DOM树 ？
输入HTML -> 解析HTML -> DOM树
问3: 如何解析？
1.首先浏览器会将原始字节的按照编码格式转成字符串 2.第二部 令牌化；将字符串转成成HTML，标签； 3.给这些标签转化成一个个对象，赋予样式和属性； 4.生成DOM树
点击咨询 