共计 3799 个字符，预计需要花费 10 分钟才能阅读完成。
前言：
web 前端本质上是一种 GUI 软件（图形用户界面—采用图形方式显示的计算机操作用戶介面）
性能 time= 下载资源 time+ 服务响应 time（api）+ 浏览器渲染 time
网络静态 — 50% 首屏性能 - 首屏渲染时间要在 1s 之内
优化点 1：资源请求
深入理解 http 请求的过程是前端性能优化的核心浏览器的一个请求从发送到返回都经历了什么 http://www.zyy1217.com/2017/0… 浏览器根据请求的 URL 交给 DNS 域名解析，找到真实 IP，向服务器发起请求；服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）浏览器对加载到的资源（HTML、JS、CSS 等）进行语法解析，建立相应的内部数据结构（如 HTML 的 DOM）载入解析到的资源文件，渲染页面，完成
1.dns 是否可以通过缓存减少 dns 查询时间 — dns 缓存 / 浏览器缓存查询 / 本地 host 查询 / 服务来查询 DNS 查找过程 ——20ms 通过缓存，来减少这种查找功能将网址转化为计算机理解的 IP 地址—通过 IP 来查找
2.cdn 服务（内容分发网络）网络请求的过程走最近的网络环境
什么是 CDN—解决网络拥堵 — 需要添加服务器 – 靠 money 解决
3. 相同的静态资源是否可以缓存
前端：本地 — 添加 Expire/Cache-Control 头
使用特殊的字符串 — 来标识某个请求资源版本请求资源 — 浏览器 tag 和服务器 tag 一样 — 返回 304— 信息没有被修改 – 可以直接使用本地缓存配置 etag 可以减轻服务器的压力
能否减少请求 http 请求大小？— 合并压缩 4. 启用 Gzip 压缩 — 在服务器端配置 Gzip– 思想：先把文件放在服务器上进行压缩，浏览器会自动的解压缩这些文本文件都应被压缩：
减少 http 请求— 合并文件服务端渲染 — Vue 前端：减少 HTTP 请求，减少 HTTP 请求大小合并压缩常见：html/css/js/ 图片 html 压缩 — goole 在 HTML 中不显示的字符，包括空格，制表符，换行符等，还有一些其他意义的字符，如 HTML 注释也可以被压缩大厂有意义 google 的流量，占到整个互联网的 40% 预计 2016 年全球网络流量将会达到 1.3ZB(1ZB = 10^9TB)那么 google 在 2016 年的流量就是 1.3ZB * 40% 如果 google 每 1MB 请求减少一个字节每年可以节省流量近 500TBWebapack — html-webpack-plugin
css 压缩无效代码删除 +css 语义合并(相同样式代码)Webpack css-loaderJs 压缩混乱 — 安全性无效字符的删除剔除注释代码语义的缩减和优化 var a = 1, var a=2, var a=3, 代码保护 Webpack — UglifyJSPlugin 文件合并 — 文件与文件之间有插入的上行请求，增加了 N - 1 个网络延迟
文件合并弊端：首屏渲染问题 合并文件太大，造成慢缓存失效问题 标记 md5 戳 只要有一个变动 则失效 a,b,c 三个 js 合并压缩规则：公共库合并 业务代码不合并 公共库合并不同页面的各自合并 异步加载组件，不同页面单独打包，监听路由变化，自动下载 Webpack — require.ensure([], callback)http://www.cnblogs.com/rubylo…Webpack — 指定 entry 就是一个打包的入口 entry:{index:[“./src/index.js”,”./src/main.js”]}图片压缩主要：降低色彩点数 + 肉眼不可见
Png8/png24/png32png8 —— 256 色 + 支持透明 png24 —— 2^24 色 + 不支持透明 png32 —— 2^24 色 + 支持透明不同图片使用不同的业务场景 — 手淘 jpg 有损压缩，压缩率高，不支持透明大部分不需要透明图片的业务场景 Png 支持透明，浏览器兼容好，大部分需要透明图片的业务场景 webp 压缩程度更好，在 ios webview 有兼容性问题，安卓全部 /safari no/ 更优的图像数据压缩算法 svg 矢量图代码内嵌相对较小，图片样式相对简单的场，图片样式相对简单的业务场景图片优化方案 Css 雪碧图— backgroudPosition/ 图片大小很大 丢包 fb/ 需求页面 Image inline base64 webpack
module: {
loaders: [
{
test: /\.(png|jpg)$/,
loader: ‘url-loader?limit=8192&name=images/[hash:8].[name].[ext]’
}
]
}
矢量图 svg 内嵌标签(dom 渲染，无请求)/iconfont(svg/png)svg 标签 内置属性方法 只能花颜色单一，曲线不复杂 https://developer.mozilla.org…tinypng.com 优化点 2：浏览器渲染 http://taligarsiel.com/Projec… how bowser work 浏览器拿到资源后怎么工作？拿到是一个 html 文件— 里面内嵌了很多 css.js. 静态资源链接 Html 渲染特点：顺序执行、并发加载（同一域名加载限制）并发加载：result: 10 in IE 8, 6 in Firefox 3+ and Chrome 5+
浏览器会解析三个东西：（1）HTML/SVG/XHTML，解析这三种文件会产生一个 DOM Tree。（2）CSS，解析 CSS 会产生 CSS 规则树。（3）Javascript 脚本，v8 引擎，主要是通过 DOM API 和 CSSOM API 来操作 DOM Tree 和 CSS Rule Tree.
载入后马上执行，执行时会阻塞页面后续的内容（包括页面的渲染、其它资源的下载 — 视浏览器内核为定）
Dom 解析：最先请求 字节 字符 词法分析 dom 树自上而下 边下载边渲染 不断重绘回流 DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点 css 解析 #nav li 去找所有的 li，然后再去确定它的父元素是不是 #nav
Render tree 结构不等同于 dom 树 display:none 的东西就没必要放在渲染树中 /<head> 标签网页中有哪些节点、各个节点的 CSS 定义以及他们的从属关系 Layout 计算出每个节点在屏幕中的位置绘制 遍历 render 树，并使用 UI 后端层绘制每个节点
解析完一部分内容就显示一部分内容，解析、渲染、http 请求并行名词解释：com.atlassian.confluence.content.render.xhtml.XhtmlException: Missing required attribute: {http://atlassian.com/resource…}value 回流必将引起重绘而重绘不一定会引起回流
Css/js 的位置 为什么这么重要，链接放在那里无所谓吗？
css 阻塞
Css — head — 阻塞页面渲染（首屏 — 合并文件）— 白屏，闪屏 Css — 阻塞 js 执行 / 不阻塞 js 加载 Html-preload-scanner — 查查 边下边渲染
原因：浏览器线程 — GUI 渲染线程与 javascript 线程互斥
javascript 执行依赖 dom 和 css 动态修改
结论：css 一般放在头部
Js 阻塞
直接引入 js 阻塞页面渲染 script js 不阻塞资源加载, — 顺序执行 阻塞后续 js 执行 按文档结构
Webkit Html-preload-scanner 预加载
执行前先暂停，去扫描有没有其他资源需要加载
解决方法
defer — IE 独有
IE 并行下载 js 文件、整个 DOM 装载完毕执行、多个 defer 的 <script> 在执行时也会按照其出现的顺序
js 一般放在页面最尾部
浏览器内核常驻线程：
Q；
1. 多个 js 的加载顺序
顺序执行
加载后立即执行并阻塞渲染
2.cache-control 的参数
缓存请求指令：
Cache-Control: max-age=<seconds>
Cache-Control: max-stale[=<seconds>]
Cache-Control: min-fresh=<seconds>
Cache-control: no-cache
Cache-control: no-store
Cache-control: no-transform
Cache-control: only-if-cached
缓存响应指令
Cache-control: must-revalidate
Cache-control: no-cache
Cache-control: no-store
Cache-control: no-transform
Cache-control: public
Cache-control: private
Cache-control: proxy-revalidate
Cache-Control: max-age=<seconds>
Cache-control: s-maxage=<seconds>
3.chrome 独有 Html-preload-scanner 预加载
在 WebKit 中, 预加载扫描器指的是一个副解析器, 当 HTML 主解析器被一个同步的 script 标签阻塞时, 预加载扫描器就会启动. 然后, 它会马上找出接下来即将需要获取的资源 (比如样式表, 脚本, 图片等资源) 的 URL, 然后尽可能早的发起网络请求, 而不用等到主解析器恢复运行, 从而提高了整体的加载时间
