WEB页面性能优化面试题

1 为什么要进行页面性能优化?

网站页面的快速加载，能够建立用户对网站的信任，增加回访率，大部分的用户其实都期待页面

能够在2秒内加载完成，而当超过3秒以后，[就会有接近40%的用户离开你的网站]

因此,我们要强调即使没有对性能有实质的优化,通过设计提高用户体验的这个过程,也算是性能优化,

因为 GUI 开发直面用户,你让用户有了性能快的 错觉,这也叫性能优化了,毕竟用户觉得快,才是真的

快...

2. 减少HTTP请求?

数据量不大的页面，就减少http请求数量，一次性返回过来，对于数据量大的页面，可以分段异步请 求，让用户先看到一部分，再继续加载另外一部分

http协议是无状态的应用层协议，意味着每次http请求都需要建立通信链路、进行数据传输，而在服务 器端，每个http都需要启动独立的线程去处理。这些通信和服务的开销都很昂贵，减少http请求的数目可有效提高访问性能。

3 .合并CSS、合并javascript、合并图片

将浏览器一次访问需要的javascript和CSS合并成一个文件，这样浏览器就只需要一次请求。图片也可以 合并，多张图片合并成一张，如果每张图片都有不同的超链接，可通过CSS偏移响应鼠标点击操作，构造不同的URL

4.合理设置缓存

很少变化的图片资源可以直接通过 HTTP Header中的Expires设置一个很长的过期头 ;变化不频繁而又可能会变的资源可以使用 Last-Modifed来做请求验证。尽可能的让资源能够在缓存中待得更久

5.将更新频率比较低的CSS、javascript、logo、图标等静态资源文件缓存在浏览器中

避免频繁的http请求。通过设置http头中的cache-control和expires的属性，可设定浏览器缓存，缓存时 间可以是数天，甚至是几个月

6.CSS放在页面最上部，javascript放在页面最下面

浏览器会在下载完成全部CSS之后才对整个页面进行渲染，因此最好的做法是将CSS放在页面最上面，让 浏览器尽快下载CSS。如果将 CSS放在其他地方比如 BODY中，则浏览器有可能还未下载和解析到 CSS 就已经开始渲染页面了，这就导致页面由无 CSS状态跳转到 CSS状态，用户体验比较糟糕，所以可以考虑将CSS放在HEAD中。

Javascript则相反，浏览器在加载javascript后立即执行，有可能会阻塞整个页面，造成页面显示缓慢， 因此javascript最好放在页面最下面。但如果页面解析时就需要用到javascript，这时放到底部就不合适了

7.减少作用域链查找

前文谈到了作用域链查找问题，这一点在循环中是尤其需要注意的问题。如果在循环中需要访问非本作用域下的变量时请在遍历之前用局部变量缓存该变量，并在遍历结束后再重写那个变量，这一点对全局变量尤其重要，因为全局变量处于作用域链的最顶端，访问时的查找次数是最多的。

8.css和注释

尽量减少页面中的空格和注释，从而减少页面的大小。对于css、js可以使用压缩工具进行压缩后再发布

9.CSS Sprites（精灵图 || 雪碧图 ）

很多的小图片整合成一张大图，通过css来移动位置显示，从而减少向服务器请求数据的次数

10.减少dome请求

页面的dom层级尽量的减少，没有用的，多余的dom层级都移除掉，越简洁运行越快

11.节流和防抖

防抖是控制次数，节流是控制频率

函数防抖和节流是优化高频率执行js代码的一种手段，js中的一些事件如浏览器的 resize、scroll ，鼠标的 mousemove、mouseover ，input输入框的 keypress 等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制

防抖（debounce）

防抖和节流的作用都是防止函数多次调用。区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于wait，防抖的情况下只会调用一次，而节流的 情况会每隔一定时间（参数wait）调用函数。

延迟的抖动函数

该实现思路很简单，就是将执行函数放到一个定时器中，如果在定时器触发之前没有事件执

行，那么就触发该执行函数，否则清空定时器

这是一个简单版的防抖，但是有缺陷，这个防抖只能在最后调用。一般的防抖会有immediate选项，表示是否立即调用

总结

对于按钮防点击来说的实现：如果函数是立即执行的，就立即调用，如果函数是延迟执行的，

就缓存上下文和参数，放到延迟函数中去执行。一旦我开始一个定时器，只要我定时器还在，

你每次点击我都重新计时。一旦你点累了，定时器时间到，定时器重置为 null ，就可以再次

点击了。

对于延时执行函数来说的实现：清除定时器ID，如果是延迟调用就调用函数

节流（throttle）

防抖动和节流本质是不一样的。防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。

使用时间戳的节流方案