前端性能优化从输入url到页面加载完成，发生了什么1、用户输入网址，2、浏览器通过DNS把url解析成IP3、和IP地址

性能优化就是让页面显示更快

从输入url到页面加载完成，发生了什么

1、用户输入网址，
2、浏览器通过DNS把url解析成IP
3、和IP地址建立TCP链接发送http请求
4、服务器接收请求，通过一系列操作得到返回的HTTP响应
5、浏览器收到首屏HTML，开始渲染
6、解析html->DOM、解析css->css-tree
7、dom+css生成render-tree开始绘制
8、加载script文件
9、执行js

所谓性能优化，就是上面的步骤加一起，时间尽可能的少，基本上有两大方向

1、少加载文件

1、文件打包压缩<br/>
2、图片格式和压缩
3、缓存
4、cdn（缩减距离、提高加载速度和效率）
5、ssr（首页文件执行顺序）
6、lazy-load懒加载

2、少执行代码

1、浏览器足够好，大部分优化策略都集中在vue和react内部
2、长列表（内存做优化）
	1、移动端：列表无限滚动，如果直接渲染
    	1、dom过多
        2、内存存储数据过多
        3、一个长度是1000的商品列表，怎么显示？？？

DNS

1、查看dns缓存
2、本地没缓存发起dns请求，像本地配置的dns服务器发请求优化：prefetch预获取（解析dom的时候预先解析地址）

TCP

ip、tcp、http的关系
网络协议：就是让机器聊天
1、知道目标是谁（ip协议，负责寻址）
2、tcp协议基于ip，负责数据的完整和有序（数据丢了或者超时了会重发一份，确保包是完整的）
	1、三次握手：发送数据前会先像服务器发起请求以确保数据能传送（1、你在吗2、我在、3我发数据，开始发送数据）由于每次连接都要进行三次握手，除了数据大小，三次握手的网络包也是网络延迟的原因之一，这也是为什么文件要打包少发网络请求，像雪碧图
    2、tcp协议操作系统自带的不用过多深入
3、http基于tcp负责应用层
	1、header和body
4、UDP也是基于ip的，直管发和收，不管数据丢不丢
	1、udp适合什么场景
	2、性能好（没有检查）适合性能要求高，不在乎偶尔丢帧的场景（包足够小不用分包）
    	游戏、语音视频聊天、dns（包小）

缓存（http header）

强缓存

1、缓存数据生效的情况下，不需要和服务器交互，直接使用

弱缓存

1、缓存数据失效，询问服务器还能不能使用

用户请求浏览器一个图片（可以设置缓存策略，catche-control字段）
no-catche 走协商缓存
no-store 不走缓存
nax-age：允许使用的时间

http cache

expries和cache-control两个header来控制强缓存
expries: wed,11,mar 2019 16:12:23 GMT，这个时间点之前都用强缓存
如果命中强缓存，就不会走服务器
如果强缓存失效需要执行协商缓存
if-modified-since:  会有个请求但是没有数据交互 304 modify（检查文件修改时间）
etage：类似文件的指纹和哈希（这个优先级更高）

前端部署最佳实践缓存

服务器配置，缓存策略是浏览器自动发起执行（用node可以设置响应头）

前端部署的最佳实践（缓存）
<script src='xxx.jpg'></script>
1、html使用nocache
2、文件加指纹并且修改文件名
3、静态资源都在cdn专门的cdn域名
	1、cdn缩减用户和服务器的距离
    2、浏览器对一个域名的并发数有限制，所以用cdn域名专门加载静态资源
4、html和css要分开上线
	1、先上哪一个
    2、先上html，加载的js如果有缓存使用老的js报错
    3、先上js，如果加载的js缓存失效，老的html加载了新的js报错
    4、js由于内容修改了就生成新文件
    5、先上静态资源（缓存设置时间比较长，有变化，就是新文件）
    6、在上html（不设置强缓存）

cdn内部原理

服务器在北京放一个图片在广州访问距离太远，交换机路由器网线太多 cdn就是我把图片部署在各大机房（北京、上海、广州）用户访问的时候，返回离你最近的图片地址

图片优化

jpg

1、有损压缩
2、体积小，不支持透明
3、用于背景图，轮播图

png

1、无损压缩质量高支持透明
2、色彩线条更丰富，小图，比如logo，商品icon

svg

1、文本、体积小矢量图
2、渲染成本、学习成本

雪碧图 webpack-spritesmith

gzip

accept-encoding:gzip 开启zip
http压缩就是以最小体积为目的，对http内容进行重新编码的过程
gzip压缩：是在一个文本文件中找出一些重复出现的字符，临时替换他们，从而使整个文件变小，根据整个原理，文件中代码的重复率越高，那么压缩的效率就越高，使用gizp的收益越大，反之亦然，基本来说gzip都是服务器干的活，比如nginx

节流、防抖

节流

滚动，隔一段时间只触发一次，避免函数执行测试过多

const throttle = (func, wait = 50) => {
	let lastTime = 0
    return (...arg) => {
    	let now = new Date()
        if(now - lastTime > wait){
        	lastTime = now
            func.apply(this,args)
        }
    }
}    
setInterval(() => {
	throttle(() => {
    	console.log(1)
    },50)
},500)

防抖：一定时间内没有事件发生就执行

const  debounce = (func, wait=1000) => {
		let timer = 0
		return (...arg) => {
			if(timer){
				clearTimeout(timer)
			}
			timer = setTimeout(() => {
				func.apply(this,arg)
			},wait)
		}
	}
	window.onscroll = debounce(onScroll,1000)

重绘、重排

vue

v-if/v-show
和渲染无关的不妨在data上
nexttick
object.freeze()

长列表

只维护上下三屏的节点，模拟dom（react-virtualized）

前端性能优化