2019-03-22 第一部分 资源合并与压缩
1 Web前端本质是一种GUI软件，基于BS架构，软件开发代码发布到webServer或者CDN服务器，浏览器向服务器发出请求，通过动态的增量的加载资源。
2 浏览器发出http请求到返回经历了什么？
浏览器将URL拆分解析---->DNS 服务器---->根据domain域名服务器查询IP---->将IP和协议发送服务端：首先进入controller层进行逻辑分析和请求分发，model层进行数据交互调研redis和db数据库，查询的渲染页面返回给view层---->response返回给浏览器---->render操作将css和HTML树从上到下生产DOM节点到DOM树，进行样式渲染，然后执行动态的JS脚本，展示返回的可以交互的页面。
3 优化点
DNS是否可以通过缓存减少DNS查询时间？
网络请求是否可以走最近的网络环境？
相同的静态资源是否可以缓存？
是否可以减少http请求大小，是否可以减少http请求数量来减少网络损耗？
是否可以在服务端渲染？（解决首屏渲染问题）
4 CDN静态资源解决了路由选择和缓存问题。要求 CDN域名与主站域名不同，否则携带无效cookie增加网络损耗。缺点：无法访问API。
5 为什么要进行压缩与合并？ 真实案例：谷歌网络流量占全球网络流量的40%，2016年全球网络流量1.3ZB，每1MB请求减少一个字节，谷歌将节省500TB流量，如果1GB流量1毛钱，谷歌每年节省费用上亿元。
6 HTML压缩：
在线网站
nodejs提供的html-minifier工具，配置参数选择是否压缩。Nodejs作为构建工具在构建阶段可以进行自动化压缩。Nodejs作为服务端语言，也可以对HTML进行压缩，会增加计算量
后端模板引擎渲染
7 css 压缩: 在线、html-minifier、 clean-css
8 js代码压缩与混乱：不仅是对无效代码剔除，对相同语义代码合并，通过混乱的方式防止别人轻易窥探到代码逻辑和核心部分，更是对代码的保护。Html-minifier和uglifyjs工具对代码进行压缩。
9 文件合并：http请求首先会建立连接，n各文件发送请求，会增加n-1个上行请求时间和延迟，以及丢包和服务中断问题严重。将文件合并后只需要请求一次，减少了网络损耗。
首屏渲染问题：首屏依赖其中某个文件，渲染将会延迟到整个文件全部请求返回，用户体验不好。
缓存失效问题：其中任意文件改变缓存将大面积失效。
10 文件合并优化点：
公共库文件合并为一个文件，静态资源不会经常改变。
不同页面应用单独打包。当页面请求JS，当路由到时才会异步加载组件。
针对不同的业务场景，见机行事。
11 文件合并实现： 在线网站、grunt，fis3，webpack配置entry和output自行分析文件依赖关系进行合并和压缩。
第二部分 图片有损压缩JPEG
1 JPG图片有损压缩。
原始图片数据——颜色空间转换——重采样——高频部分压缩——量化——编码——压缩图片——解码——去量化——反高频压缩——反重采样——逆颜色空间转换。图片的内容，即每个像素的颜色是通过颜色索引表进行表示。如png8，每8bit表示一种颜色。Png24，每24bit表示一种颜色，图片的体积大小就会增加。
2不同的图片类型
JPG ——相比png压缩率高，不支持透明。适用于大部分不需要透明的图片的业务场景
PNG ——png8 、png24 、png32，支持透明，图片也可以进行降阶。适用于大部分需要透明图片的业务场景。
SVG矢量图——图片不会失真，图片内容内嵌在HTML中，可以使用SVG标签，不需要加载资源。但是绘制和表达能力有限，适合大部分简单的业务场景，如logo，现有的iconfont库，使用一些icon图标。
Webp ——新起的图片格式，更优的压缩算法，带来更小的图片体积，拥有肉眼识别无差异的图片质量、存在有损和无损压缩模式、支持Alpha透明度和动画特性，jpg和png转换性能稳定统一优秀。但是对于iOS和view不兼容，适用于安卓系统和应用。
3 图片优化点：
图片进行压缩，根据真实case的色彩丰富，舍弃掉无关紧要的色彩信息。
CSS雪碧图，将单个图片整合到一个图片中，但是要大小合适，不能太多。
image inline，将图片内嵌到HTML中，使用base64来表示，文件大小约1KB。
使用SVG矢量图，iconfont解决icon问题。
安卓应用下推荐使用webp格式图片。
第三部分 CSS和JS如何加载与执行
1 URL解析——》IP请求——》到返回http请求文档，得到字节转换字符流文件——词法分析——》nexttoken根据header，body、footer标签解析成相应的token对象——》append到DOM节点中，从上至下生产DOM树，通过link和script标签引入其他资源，并发请求CDN静态资源，如CSS样式，CSS解析结合DOM树，生成Render Tree——》布局layout——》绘制paint渲染。
2 HTML渲染特点：
顺序执行：“”并发加载引入css和JS外部资源，并发数收域名限制，2-4个域名托管。
阻塞加载：css阻塞JS的加载。Css加载慢，放入header中引入。
依赖关系：存在一定遵循的依赖关系，JS执行依赖关系要理清楚。
引入方式：link和import，怎么更优引入。
3 CSS阻塞：
Link标签对应得CSS加载完才会进行样式渲染，阻塞JS的执行，但是不阻塞外部脚本如JS的加载，操作DOM可能涉及DOM树和CSS树样式修改。逻辑上正确。预加载资源，因为如果直接引入JS会阻塞页面渲染。JS不阻塞资源加载，顺序执行，会阻塞后续JS的执行。
4 优化点：
link代替import，或者在css中合并
JS脚本置底，防止相关资源阻塞并发执行。
合理的使用JS异步加载的能力，同一个域名最多同时加载6个资源。
第四部分 懒加载和预加载
1 本质是对浏览器加载性能的一个balance，当加载繁忙时将一些暂时无用的资源延迟加载，当浏览器空闲时，提前加载接下来要使用的资源。是浏览器的加载性能饱和起来，并且提升用户体验。
2 懒加载：当前没有使用的资源延迟加载。
图片进入可视区才进行加载请求图片资源，如电商等图片很多，页面很长的业务场景，同时加载很多图片，浏览器端的性能严重损害，域名加载也存在上限，减少无效资源加载。并发加载资源过多会阻塞JS的执行，影响整个网站的正常使用。
3 预加载：将接下来要使用的资源提前请求和加载。
如图片等静态资源，加载后放置缓存中使用时就可以直接从缓存中拿，速度快，提升用户体验。预加载可以瞬间获得样式展示，如九宫格抽奖，动图效果依赖于提前加载，音乐预加载等，以及游戏，存在依赖关系的必须加载完成才会进行真正的渲染。
4 懒加载实现：Zepto.lazyload.js现有的库，站位符，预加载必须预设图片的高度，因为页面会监听scroll事件，进入可视区进行加载。
5 预加载实现：
方法1：使用img标签设置display：none
方法2：new image对象，设置src
方法3：xmlrequest对象可以监听加载的过程，更好的进行控制，但是存在跨域问题。（使用preload.js库 HTML，XHR基于负载标签替换，解决跨域问题。）
第五部分 重绘和回流
1 为什么会产生重绘与回流，如何减少？
2 回流：render tree的一部分因为元素的大小，布局隐藏等改变而需要冲构建，页面尺寸，布局，几何属性改变，回流重新布局和绘制，造成的代价很大。
3 重绘：元素的布局没有变化，只是颜色外观，风格，隐藏等发生改变，触发页面重新绘制。
4 尤其是移动端GPU的计算能力有限，发生回流是会出现卡顿，用户体验很差。
如何避免：
尽量减少对盒子模型，浮动，定位，节点内部文字属性的修改，或者将修改集中在一起，统一一次处理。
使用图层，万一非要修改这些属性，将其抽出来放在单独的图层中做，减少影响。但是图层也不是越多越好，图层在重组生产页面时，会增加额外的大量的计算，需要时使用，尽量少用。
第六部分 浏览器存储
Cookie
1. cookie 因为HTTP请求无状态，所有需要cookie去维护客户端状态
2. cookie的限制：作为浏览器存储，大小4KB左右；需要设置过期时间expire
3. cookie的使用：作为浏览器端和服务器端的交互（用户状态）；客户端自身数据的存储
4. cookie中在相关域名下面-cdn的流量损耗，如优酷
5. 重要属性：HTTPonly不支持JS读写（防止收到模拟请求攻击）
6. 优化点：cookie中在相关域名下的网络损耗。解决方案：CDN域名和主站域名要区分开。
LocalStorge
1. html5设计出来专门用于浏览器存储的
2. 大小5M左右
3. 仅在客户端使用，不和服务器端通信
4. 接口封装较好
5. 属于浏览器本地缓存方案
SessionStorage
1.会话级别的浏览器存储
2.大小5M左右
3. 仅在客户端使用，不与服务端进行通信
4. 封装接口较好
5. 对于表单数据维护或分布操作
注释：LocalStorge与SessionStorage区别：会话级别存储
IndexedDB
1 背景 ：随着浏览器的功能不断增强，越来越多的网赚开始考虑，将大量数据存储在客户端，这样可以减少从服务器端获取数据，直接从本地获取数据，现有的刘安琪数据春初方案，都不适合大量数据存储，而且不提供搜索功能，不能建立自定义的索引。所以，需要一种新的解决方案，indexedDB诞生了。
2 作用：为application创建离线版本
3 特点： 键值对存储、异步、支持事务、同源限制、存储空间大、支持二进制存储。
PWA
1 PWA（Progressive Web Apps）渐进式网络应用，是一种可以提供类似于原生应用程序（native app）体验的网络应用程序（web app）。PWA可以用来做很多事情，最重要的是，离线时（offline）应用程序能够继续运行功能。这是通过service workers的网络技术来实现的。
2 作为web开发者，这是我们传统构建网站方式的一种转变。这意味着我们可以开始构建应对不断变化的网络条件和无网络连接的网站。这还意味着可以建立更吸引人的网站来为我们的用户提供一流的浏览体验。
3 特点：
可靠：没有网络环境也能提供基本的页面访问，不会出现“未连接到网络”的页面
快速： 针对页面渲染和网络访问都有较好的优化
融入：应该可以被增加到手机桌面，并且和普通的应用一样可以有全屏和推送等特性
Service Worker
1 概念：Service Worker是一个脚本，可以在浏览器后台挂起新线程，来缓解JavaScript的单线程问题，可以用Service Worker拦截网络请求进行本地缓存或请求转发，充当服务器端和浏览器端、浏览器端与web应用程序之间的代理服务器。
2 Service Worker特点：带来了速度，极大的提高；额用户体验，有效加快重复访问网络应用的速度。
3 作用： 网络代理、转发请求、伪造响应、离线缓存、消息推送、后台消息传递。
4 PWA与Service Worker：Service Worker可以看做是实现PWA模式的一项重要技术实现。
第七部分 缓存优化
1 大规模的系统和大规模的文件如何进行自动缓存？因此基于浏览器和服务器协商的缓存机制出现了，到底是如何运作的，如何建立一个符合自己业务需求的缓存策略？
2 http请求通过http header传输配置自己的缓存策略，叫做cache control，拿到request和response各自的缓存情况。
3 优先级：Cache control 的控制字段s-mage > Max-age > Expires
s-mage：访问public公共资源，如果公共资源没有过期，返回304，如果超时，CDN会去相应服务器请求进行回原。
Max-age：当前请求开始到max-age这段时间内不会再发起请求，告诉浏览器，这段时间有效，不会过期，可以直接从浏览器缓存读取数据。
No-cache：搭配max-age=0使用，向浏览器发起请求，所有的请求都会到服务器。
No-store: 不使用任何缓存策略。
Expires: 设置缓存过期时间，服务器端具体的时间点，没有过期浏览器可以直接从缓存读数据。
last-modified：精确的时间。问题：很难拿到精确时间，时间变了内容没变，缓存失效。
E-tag：文件内容的MD5值是一个哈希值。
4 如果浏览器请求没有到达服务端，服务端发生变化就无法告知浏览器？此时出现了服务器和浏览器协商的机制，基于cache-control，使用last-modified和if-modified-since获取服务端数据是否修改。
5 分级缓存策略：Max-age和expires没有过期，返回200from cache。时间过期——》last modified和etag协商看服务器端数据是否修改，没有修改返回304——》否则从服务端下载文件。（或者从来没有请求过资源）返回200。
第八部分 服务器端渲染
1 将框架的加载或渲染在服务器端进行，将渲染结果返回到浏览器，解决首屏渲染问题。
2 使用fis3或者webpack构建工具。
总结
1. 文件压缩与合并：使用构建工具或者在线压缩工具进行压缩。公共库合并，单独页面打包异步请求。
2. 图片优化：图片类型选择，根据真实case颜色需求舍弃部分颜色，图片压缩、转换、降阶、内嵌、合并。
3. CSS加载和执行：CSS文件置顶，使用link代替import，script标签，合理使用JS异步加载能力
4. 懒加载和预加载：通过对资源的延迟加载或提前加载，使得网页访问和显示更加流畅，提升用户体验。
5. 重绘和回流：减少使用或不使用触发图层回流的属性。建立图层，让回流在图层里单独进行，隔离开，减少回流和重绘的范围，减少浏览器的运算工作量。
6. 浏览器存储：使用不同的浏览器春初方式提高客户端读取数据的速度。
7. 服务器渲染：将框架的加载和渲染在服务器端进行，将渲染结果返回浏览器。