从浏览器组成结构，到浏览器运行原理，到浏览器性能优化
起个骚骚的名称，但这的确是史上最全面的浏览器知识剖析了，带着以下几个问题，我们来学习以下浏览器的运行原理：
- 浏览器的组成结构有哪些呢？
- 进行一次网站访问，浏览器是如何工作的？
- 针对浏览器的运作流程，我们可以从哪些方面做些优化？
一，浏览器的组成结构有哪些？
浏览器组成结果图.png
各部分解释：
-
User Interface(用户界面)
用户看到的除网页主体界面之外的部分，包括：主页、地址栏、收藏夹、前进/后退按钮、网页加载进度、页签管理、插件中心、设置中心、下载等。 -
Browser engine(浏览器引擎)
可以在渲染引擎和用户界面等部分传达指令和通信，是浏览器中各个部分之间相互通信的核心模块。 -
Renderingengine(渲染引擎)
通过HTML和CSS生成DOM树和CSSOM树，计算布局，生成排版，也称为排版引擎。常见渲染引擎有Trident、Gecko、WebKit、Blink、Chromium。 -
Networking(网络)
发起请求与资源下载。 -
JavaScript Interpreter(JavaScript解释器)
执行网页内嵌的JS脚本。如：v8引擎。 -
UI Backend(显示后端)
浏览器默认控件(input、select等)，对话框，字体集合等。 -
Data Persistence(数据持久层)
数据持久层将与浏览会话相关联的各种数据存储在硬盘上。 这些数据可能是诸如：书签、工具栏设置等这样的高级数据，也可能是诸如：Cookie，安全证书、缓存等这样的低级数据。
二，进行一次网站访问，浏览器是如何工作的？
- 浏览器域名缓存
- DNS缓存，找到对应IP
- 发起TCP请求，建立与服务器的连接
客户端：同步序列号=》服务器：确认包+同步序列号=》确认包 - 查看并读取网页缓存（Service Worker、manifest）。没有则发起一个get请求，携带cookie，请求HTML页
-
解析HTML，生成DOM tree；解析CSS，生成CSSOM；DOM tree和CSSOM结合，形成Render tree，通过painting过程，显示在页面上
webkit渲染流程.png - 在解析HTML过程中，发现页面引用了其他未加载的image、css文件、js文件等静态内容，则进行第二阶段的请求
- 请求之前会查看缓存状态，如果设置了强缓存并且没有过期，则不再发送请求，状态码为200并直接从硬盘中读取。如果设置了协商缓存，则发送文件的最后修改时间/文件指纹信息，服务器对比后，如果未改变返回304，从缓存中读取。（强制不缓存，需设置cache-control：no-cache，并把过期时间设置为过去时间；或者使用cache-control：no-store）
- 如果使用http1.0，则每次资源请求需要重新建立TCP/IP连接并请求，如果使用http2.0，则Connection: keep-alive保持连接，无需重新建立连接
- JS资源请求回来之后，调用JS执行引擎执行JS代码，执行过程可能会调用浏览器的网络请求功能，数据缓存功能等
- css文件、图片、音视频等资源请求回来之后，可能会触发浏览器的重绘（UI）或回流（布局）
三，针对浏览器的运作流程，我们可以从哪些方面做些优化？
- DNS缓存、DNS预加载技术、平衡服务器负载均衡与减少DNS查找次数的关系
- 使用Service Worker（页面，数据）、manifest（页面）做页面缓存
- 使用HTML5语义化标签，减少CSS选择器层级
- 配置webpack按需加载，提取公共文件，压缩代码体积，减少需要请求的资源的数量，使用gzip压缩，使用CDN加速
- 使用雪碧图合并小图片，使用base64、SVG图片等代替部分png，移动端实现多尺寸适配，使用CSS平铺等技巧减小图片，对图片尺寸做优化（最简单的，上传qq空间再下载下来），而且，有的时候，需要思考真的需要图片吗？
- 针对文件，根据不同的缓存要求，采用不同的资源缓存策略（强缓存，协商缓存，不缓存）
- 针对数据，使用web storage，IndexedDB等做数据缓存
- 使用HTTP2.0(长连接)代替HTTP1.0，减少TCP/IP连接建立次数，使用etag（文件指纹）取代modified（文件修改日期）做协商缓存
- JS文件放在body底部，防止阻塞浏览器DOM渲染和其它资源加载
- 图片资源采用懒加载
- 样式避免过分重排，减少重绘与回流，对于经常更新的UI视图，建立新的图层单独渲染（例如：translate3d做动画 ）
