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

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

1.用户输入
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="http://www.mamicode.com/a.js?_t=xx">
　　　2.加版本号 <script src="http://www.mamicode.com/a.js?_v=1.6"> 比如jq,vue公用库，内容没有改变 重新加载
　　　3.加指纹 但是不产生新文件 <script src="http://www.mamicode.com/a.js?h=abcd12sa"> 不能清除Cdn缓存，但是生成新文件，会有问题（html,js那个先上）
　　　4.最终，诞生最优的产生文件<script src="http://www.mamicode.com/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.本地存储

　 

 浏览器缓存机制

　　通过网络获取内容及速度缓存慢有开销巨大，较大相应需要在客户端与服务器之间进行多次往返通信，这回延迟浏览器获得处理内容的时间，还会增加访问者流量的费用，因此，缓存重复利用之前获取的资源能力成为性能优化的一个关键方面

　　广义的缓存，可以分为四个，大家对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内容进行重新编码的过程