互联网寒冬：一个月经历的所有面试题经验分享-------如何提高页面性能？
前言
uu们，大家好，我是你们的前端小伙伴栗子，2年web前端开发经验。base成都。最近经过一系列的紧密结合的面试，成功的拿到了自己比较向往的offer。同时在面试的时候，也不断的总结了我在面试过程中问到的比较多的问题，我想将这些问题以技巧的方式分享给大家。同时也希望能够给大家的前端学习之路带来一些经验之谈～
再多废话两句吧，我有很多朋友最近在找工作的时候发现前端的工作真的很难找，一直没有面试成功。我也想告诉大家放平和心态，调整好自己的状态，充分准备面试，来迎接我们未来的工作吧，在边找工作的过程中边学习成长也是一种不错的选择哦～
话不多说，我们就开始今天的正文内容部分吧～～
— - – - – - – 假装这是一条华丽的分割线- – - – - – - -
正文
在栗子面试的过程中，企业方问我最多的问题就是：如何提升页面性能-----可以见的企业对耶性能的追求是极致的，那作为web开发的我们该如何去回答我们的衣食父母这句话呢？
提高页面性能的办法有多种多样的，那我们应该怎么阐述呢？下面的万能公式请收好！！
答案=简述*n+具体描述*2
此话怎讲？就是说我们在回答面试的问题的时候可以这样：我所了解和运用的提高页面性能的方案有：1…2…3…4…等等，但我常用的主要是1…他的功能是怎么样的（他是去解决什么问题的。。怎么样去解决的）2…(同上)
听到了吗？
那么咱们下面就开始具体的去阐述一下什么是页面性能问题了吧
所谓页面性能：
？？？你不会想问我吧？笑死！！找度娘：
好吧，我说我说：页面性能测试是针对于页面性能优化而开展的一种性能测试，目的是对Web系统的页面进行测试以确认系统页面是否会影响系统的性能并为页面的优化提供依据与建议，最终提升系统的整体性能表现，提高用户体验满意度
以下就是怎么去做性能优化啦，重点需要用你的小脑袋记住哦～～
图片优化
在前端开发中，某些项目会运用到大量的图片资源，而采用图片资源加载时，又会非常浪费页面性能，同时大大降低页面加载的速度，因此优化图片的加载在实际开发中提升页面性能的重要途径。
- 图片压缩
- 图片合并（css精灵图）
- 使用字体图标代替图片
- 使用base64
- 图片的懒加载
（加粗部分为我们更加程勇的方式）
资源合并与压缩
尽可能的将外部的脚本、样式进⾏合并，多个合为⼀个。另外，CSS、Javascript、Image都可以⽤相应的⼯具进⾏压缩，压缩后往往能省下不少空间
js的封装复用：面向对象封装继承多态
减少重排操作
回流：也叫做重排，当我们对 DOM 的修改引发了 DOM 尺寸的变化时，浏览器需要重新计算元素的几何属性，其他元素的几何属性和位置也会因此受到影响，然后再将计算的结果绘制出来。这个过程就是回流
重绘：改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。这个过程就叫重绘
重绘不一定导致回流，回流一定会导致重绘
//css：
1、避免使用table布局。
2、尽可能在DOM树的最末端改变class。
3、避免设置多层内联样式。
4、将动画效果应用到position属性为absolute或fixed的元素上。
5、避免使用CSS表达式。
//javascript：
1、最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。
2、避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。也可以先为元素设置display: none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。
3、具有复杂动画的元素使用绝对定位，使它脱离文档流
使用CDN网络托管
cdn：将相关设备托管到具有高品质的环境中进行实时监控的网络数据，使系统达到安全、可靠、稳定、高效运行的目的，而cdn采用各种缓存服务器，将这些缓存服务器分布到用户访问相对集中的地区或网络中，在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响应用户请求
懒加载/延迟加载
- 数据懒加载
- 路由懒加载
- 图片懒加载
//懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式
/*
*懒加载的优点：
1、提升用户体验，加快首屏渲染速度；
2、减少无效资源的加载；
3、防止并发加载的资源过多会阻塞 js 的加载；
*/
//懒加载的原理：
//1、首先将页面上的图片的 src 属性设为空字符串，而图片的真实路径则设置在 data-original 属性中，
//2、当页面滚动的时候需要去监听 scroll 事件，在 scroll 事件的回调中，判断我们的懒加载的图片是否进入可视区域，如果图片在可视区内则将图片的 src 属性设置为 data-original 的值，这样就可以实现延迟加载。
利用缓存来缓存文件
为了提高访问网页的速度，浏览器会采用累积式加速的方法，将你曾经访问的网页内容（包括图片以及cookie文件等）存放在电脑里。
这个存放空间，我们就称它为缓存,里边的文件叫缓存文件。以后我们每次访问网站时，IE会首先搜索这个目录，如果其中已经有访问过的内容，那IE就不必从网上下载，而直接从缓存中调出来，从而提高了访问网站的速度
常见的缓存途径有浏览器缓存还有我们的h5缓存
频繁触发的事件进行防抖和节流
// 节流：在计时器内部清除计时器，有节奏的执行事件
function throttle(callback, delay = 1000){
let timer = null;
function f(){
if(!timer){
timer = setTimeout(() => {
callback && callback.call(this);
clearTimeout(timer);
timer = null;
}, delay);
}
}return f;
}
// 防抖：在计时器前边清除计时器，只执行最后一次事件，能够无限延长执行时间
function debounce(callback, delay = 1000) {
let timer = null;
function f() {
clearTimeout(timer);
timer = setTimeout(() => {
callback && callback.call(this); },
delay);
}
return f; }
异步加载
默认情况下js是同步加载的，即优先加载JS，只有当JS文件下载完，dom和css才开始加载
异步加载又叫非阻塞加载，浏览器在下载执行js的同时，还会继续进行后续页面的处理
减少闭包
闭包：即函数嵌套函数，然后外部函数能够获取到函数内部的私有数据，不会在调用函数之后被垃圾回收机制回收
由于函数的私有数据会一直存在内存中，这也将导致内存过多，内存消耗大。造成内存泄漏
递归优化（深浅拷贝）
使用高效的算法
今日份分享先到这里啦，由于递归优化和高效算法的范围太大了，栗栗子下回再来分享啦～
