这是我参与更文挑战的第17天，活动详情查看：更文挑战
作为一个用户，当打开一个网页，往往关心的是从输入完网页地址后到最后展现完整页面这个过程需要的时间，这个时间越短，用户体验越好。
所以在浏览器中输入url发生了什么？
整个流程如下：
- 域名解析
- 为了将消息从你的PC上传到服务器上.需要用到1P协议、ARP协议和0SPF协议
- 发起TCP的3次握手
- 建立TCP连接后发起http请求
- 服务器响应htp请求
- 浏览器解析htm代码,并请求html代码中的资源(如js、css、图片等）
- 断开TCP连接
- 浏览器对页面进行渲染呈现给用户 更多详解可查看
1.减少CPU计算，减少网络请求
2.加载资源优化
- 静态资源的合并和压缩。
1.js 2.js 3.js --- 123.js
- 静态资源缓存（浏览器缓存策略）。
使用cach-control或expires这类强缓存时，缓存不过期的情况下，不向服务器发送请求。强缓存过期时，会使用last-modified或etag这类协商缓存，向服务器发送请求，如果资源没有变化，则服务器返回304响应，浏览器继续从本地缓存加载资源；如果资源更新了，则服务器将更新后的资源发送到浏览器，并返回200响应
// 通过链接名控制，修改内容后链接名称也修改。
<script src="abc_1.js" ></script>
使用CDN让静态资源加载更快。
3. 渲染优化
CSS放head中，JS放body后
图片懒加载
减少DOM操作，对DOM操作做缓存
减少DOM操作，多个操作尽量合并在一起执行
事件节流
3. 使用字体图标 iconfont 代替图片图标
字体图标就是将图标制作成一个字体，使用时就跟字体一样，可以设置属性，例如 font-size、color 等等，非常方便。并且字体图标是矢量图，不会失真。还有一个优点是生成的文件特别小。
4、重定向使用
尽量避免使用重定向，当页面发生了重定向，就会延迟整个HTML文档的传输。在HTML文档到达之前，页面中不会呈现任何东西，也没有任何组件会被下载，降低了用户体验
如果一定要使用重定向，如http重定向到https，要使用301永久重定向，而不是302临时重定向。因为，如果使用302，则每一次访问http，都会被重定向到https的页面。而永久重定向，在第一次从http重定向到https之后 ，每次访问http，会直接返回https的页面
5、使用DNS预解析
当浏览器访问一个域名的时候，需要解析一次DNS，获得对应域名的ip地址。在解析过程中，按照浏览器缓存、系统缓存、路由器缓存、ISP(运营商)DNS缓存、根域名服务器、顶级域名服务器、主域名服务器的顺序，逐步读取缓存，直到拿到IP地址
DNS Prefetch，即DNS预解析就是根据浏览器定义的规则，提前解析之后可能会用到的域名，使解析结果缓存到系统缓存中，缩短DNS解析时间，来提高网站的访问速度
方法是在 head 标签里面写上几个 link 标签
<link rel="dns-prefecth" href="https://www.google.com">
<link rel="dns-prefecth" href="https://www.google-analytics.com">
对以上几个网站提前解析 DNS，由于它是并行的，不会堵塞页面渲染，这样可以缩短资源加载的时间
6、模块按需加载
webpack 提供了两个类似的技术，优先选择的方式是使用符合 ECMAScript 提案 的 import() 语法。第二种则是使用 webpack 特定的 require.ensure
7、减少重绘回流
减少回流、重绘就是减少对DOM的操作
1.直接改变className，如果动态改变样式，则使用cssText（减少设置多项内联样式）
2.让要操作的元素进行“离线处理”，处理完后一起更新
当使用DocumentFragment进行缓存操作，引发一次回流和重绘
使用display:none 技术，只引发两次回流和重绘
使用cloneNode(true or false)和replaceChild技术，引发一次回流和重绘
3.不要经常访问会引起浏览器flush队列的属性，如果你确实要访问，利用缓存
4.让元素脱离动画流，减少render 树的规模
5.牺牲平滑度换取速度
6.避免使用table布局
7.IE中避免使用javascript表达式
