web性能优化指南
前端性能优化，是每一个前端必备的技能，优化本身的代码，使本身的网址能够更加快速的访问打开，减小用户等待，今天就会从几个方面提及前端性能优化的方案，javascript
看下面的一张图，常常会被面试官问，从输入URL到页面加载完成，发生了什么？css
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文件
浏览器缓存之客户端缓存html
无需请求的memory cache，disk cache；前端
须要发请求验证的Etag、Last-Modified304；vue
H5新增的 localStorage、sessionStorage；java
合理利用以上缓存，能够很大程度上提升前端性能。node
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.若是不合并 === > 文件与文件之间有插入的上行请求，增长了N - 1 个网络延迟；受丢包问题影响更严重；通过代理服务器时可能会被断开webpack
2.若是合并 === > 首屏渲染时间变长； 文件缓存大面积失效nginx
3.公共库合并、不一样页面的合并git
4.使用在线网站进行文件合并、使用 nodejs 实现文件合并
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线程，它脱离于浏览器窗体，算是幕后工做，能够实现离线缓存，网络代理等
图片优化
2.png
由于 http 请求无状态，因此须要 cookie 去维持客户端状态
cookie 生成方式：http response header 中的 set-cookie； js 中能够经过document.cookie读写cookie
使用：用于浏览器端和服务器端的交互；客户端自身数据的存储
过时时间：expire
存储限制：做为浏览器存储，大小4kb左右；须要设置过时时间 expire
cookie 存储能力被 localstorage 代替
httponly 不容许 js 读写
cookie 中在相关域名下面 --- cdn的流量损耗 。 解决：cdn 的域名和主站的域名要分开
重绘与回流
// 函数节流 每隔多少时间执行一次 const throttle = (func ,wait = 100) =>{ // 不管调用多少次，函数都是100毫秒执行一次 let lastTime =0; return(...args) =>{ let now = new Date().getTime() if(now - lastTime >wait) { func.apply(this.args) lastTime = now } } } let i =1; window.addEventListener('scroll',throttle(()=>{ // 使用作图片懒加载 console.log(i) i+=1 },350))
/*
校验用户是否是重复，用户输入完，向后端发送请求
若是用户每次输入，都发生请求，形成请求过多
用户中止输入字符串350毫秒，在发出
*/
const debounce = (func,wait = 350) =>{
let timer =0;
return (...args)=>{
if(timer) {
clearInterval(timer)
}
timer = setTimeout(() => {
func.apply(this,args)
}, wait);
}
}
let i =1;
window.addEventListener('scroll',debounce(()=>{
// 验证
console.log(i)
i+=1
},350))
lazy-load
对于一些图片多，页面长的网页来讲，若是每次打开页面加载所有的网页内容，页面加载速度势必会受到影响，若是每次打开网页只将网页可视区域的内容加载给用户 ，将大大提升网页浏览速度，同时也减轻服务器负载，咱们可使用lazyload.js来实现对图片的延迟加载，当网页图片进入到浏览器可视区域时，才会去请求服务器加载图片。
// 获取全部的图片 const img = document.getElementsByTagName('img') // 获取可视区域的高度 const viewHeight = window.innerHeight || document.documentElement.clientHeight; // num用于计算当前显示到那一张图片，避免每次都是从第一张开始检查是否漏出 let num =0; function lazyload() { for(let i=num;i<img.length;i++) { // 用但是区域高度减去元素顶部距离可视区域顶部的高度 let distance = viewHeight - img[i].getBoundingClientRect().top // 若是可视区域高度大于等于元素顶部距离可视区域顶部的高度，说明元素露出 if(distance >=0) { // 给元素写入真实的src，展现图片 img[i].src = img[i].getAttribute('data-src') // 前i张图片已经加载完毕，，下次从第i+1张开始检查是否露出 num = i+1 } } } // 监听scroll window.addEventListener('scroll',lazyload,false)
performance.getEntriesByType('navigation') 性能检测
经过在浏览器控制台输入这个命令，就能够检测到网页加载数据，检测网页加载性能
npm install -g lighthouse
安装完以后运行，也是找的github网址，运行成功以后，会弹出一个生成的html页面。
生成一个html文件，找到而后直接打开就行
浏览器渲染