性能优化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树