前端性能优化，是每个前端必备的技能，优化自己的代码，使自己的网址可以更加快速的访问打开，减少用户等待，今天就会从几个方面说起前端性能优化的方案，

看下面的一张图，经常会被面试官问，从输入URL到页面加载完成，发生了什么？

 

 

1.用户输入www.baidu.com
2.浏览器通过DNS。吧url解析ip
3.和ip地址建立TCP连接，发送HTTP请求
4.服务器接收请求，查库，读文件等，拼接好 返回的HTTP响应
5.浏览器收到首屏html,开始渲染，
6.解析html位dom
7.解析css为css-tree
8.dom+css生成render-tree绘图
9.加载script的js文件
10.执行js文件
 
DNS缓存
　DNS是“域名系统”的缩写，它的工作是将域名和主机名转化为服务器主机的 IP 地址；
　 DNS查找流程：浏览器缓存 — 本地hosts文件 — 本地DNS解析器缓存 — 本地DNS服务器 — 本地DNS服务器设置（是否设置转发器）— 根DNS服务器

　浏览器缓存之客户端缓存

　　　　无需请求的memory cache，disk cache；

　　　　需要发请求验证的Etag、Last-Modified304；

　　　　H5新增的 localStorage、sessionStorage；

　　合理利用以上缓存，可以很大程度上提高前端性能。

　网站存在缓存怎么解决？
　　1.文件加哈希
     　　1.上线之后，要求用户强刷新，这种问题，用文件名加指纹方式解决
     　　2. a.hash.js  hash是整个a.js文件的md5值，文件内容不变，hash不变，缓存生效
　　2.缓存文件怎么解决
　　　1.加时间戳 <script src="/a.js?_t=xx">
2.加版本号 <script src="/a.js?_v=1.6"> 比如jq,vue公用库，内容没有改变 重新加载
3.加指纹 但是不产生新文件 <script src="/a.js?h=abcd12sa"> 不能清除Cdn缓存，但是生成新文件，会有问题（html,js那个先上）
4.最终，诞生最优的产生文件<script src="/a.abcd12sa.js">先上js，在上html webpack build 打包
 
优化策略
　1.长连接
　 2.减少文件体积　　　
　　　1.js打包压缩 
　　　　　　1.无效字符的删除、剔除注释、代码语义的缩减与优化、代码保护
　　　　　　2.使用在线网站压缩、使用 html-minifier 对html 中的 js 进行压缩、使用uglifyjs2 对 js 进行压缩
    　　2.图片压缩
　　　　　　1.把网站上用到的一些图片整合到一张单独的图片中
    　　3.css压缩
　　　　　1.无效代码删除、css语义合并
　　　　　 2.使用在线网站压缩、使用 html-minifier 对html 中的 css 进行压缩、使用clean-css 对 css 进行压缩
　　　4.html 压缩
　　　　　1.压缩在文本文件中有意义但是在HTML中不显示的字符，包括空格、制表符、换行符、注释等
　　　　　 2.使用在线网站压缩、nodejs提供了html-minifier 工具、后端模板引擎渲染压缩
　　　5.开启 gzip
　　　6.文件合并

　　　　1.如果不合并 === > 文件与文件之间有插入的上行请求，增加了N - 1 个网络延迟；受丢包问题影响更严重；经过代理服务器时可能会被断开

　　　　2.如果合并 === > 首屏渲染时间变长； 文件缓存大面积失效

　　　　3.公共库合并、不同页面的合并

　　　　4.使用在线网站进行文件合并、使用 nodejs 实现文件合并

　3.减少文件请求次数
    　　1.雪碧图
    　　2.js,css打包
    　　3.缓存控制
    　　4.懒加载
　4.减少用户和服务器的距离
　　(地理位置)
    　  1.cdn  js可以推到cdn缓存上
　5.本地存储
　6.图片大小计算
　　对于一张 100 100 像素的图片来说，图像上有 10000 个像素点，如果每个像素的值是 RGBA 存储的话，那么也就是说每个像素有 4 个通道，每个通道 1 个字节（8 位 = 1个字节），所以该图片大小大概为 39KB（10000  * 4 / 1024）。但是在实际项目中，一张图片可能并不需要使用那么多颜色去显示，我们可以通过减少每个像素的调色板来相应缩小图片的大小。
 
 浏览器缓存机制
　　通过网络获取内容及速度缓存慢有开销巨大，较大相应需要在客户端与服务器之间进行多次往返通信，这回延迟浏览器获得处理内容的时间，还会增加访问者流量的费用，因此，缓存重复利用之前获取的资源能力成为性能优化的一个关键方面
　　广义的缓存，可以分为四个，大家对httpcache比较熟悉
    　　1.Http Cache
    　　2.Service Worker Cache
    　　3.Memory Cache
    　　4.Push Cache

　　Http Cache
　　　浏览器大佬：需要获取main.js，看下强缓存里有没有
    　　1.Expires和Cache-Control两个header来控制强缓存

　　　2.expires: Mon, 16 Mar 2020 09:50:27 GMT

　　　3.last-modified: Thu, 15 Feb 2018 14:17:52 GMT

　　Memory Cache

　　　　内存缓存，短命，比如常用数据js里，浏览器也有自己的策略，base64图片，体积小的静态资源

　　Service Worker Cache

　　　　是一种独立于主干线程之外的javascript线程，它脱离于浏览器窗体，算是幕后工作，可以实现离线缓存，网络代理等

图片优化

　　图片通常是最占用流量的，pc端加载平均图片大小是600k，简直比js打包后的文件还大，所以针对图片的优化，不同场景，使用不同文化的类型
　　1. jpg　　　
　　　　1.有压缩
    　　　2.体积小，不支持透明
    　　   3.用于背景图，轮播图

　　2.png

 　　　1.无压缩，质量高，支持透明
    　　 2.色彩线条更丰富，小图，比如logo，商品icon
　　3.svg
 　　　1.文本，体积小，矢量图
    　　 2.渲染成本，学习成本
　　4.图片打成雪碧图，减少http请求次数
 
gzip
　　Http压缩就是以缩小体积为目的，对HTTP内容进行重新编码的过程
　　Gzip压缩背后的原理，是在一个文本文件中找出一些重复出现的字符串，临时替换他们，从而、使整个文件变小，根据这个原理，文件找那个代码重复率越高，那么压缩的效率越高，使用Gzip收益就越大，反之亦然基本来说Gzip都是服务器干的活，比如nginx
 
本地存储