前端面试出现频率最高问题——前端性能优化

这是我第16篇简书。 整体思路： 性能优化是什么? 从用户角度来看，什么才是好的页面？一个是页面加载的很快，另一个是页面使用起来很流畅。 那么对应到前端开发的角度，性能优化可以对应分为两个方向：页面加载时间跟页面运行效率。 从浏览器打开到页面渲染完成，花费了多少时间？ 是的，这个问题有点熟悉，面试官比较常问的是从浏览器打开到页面渲染完成，发生了什么事情。这个问题网上很多回答，我也不就重复的细说了。主要的过程是： 浏览器解析->查询缓存->dns查询->建立链接->服务器处理请求->服务器发送响应->客户端收到页面->解析HTML->构建渲染树->开始显示内容(白屏时间)->首屏内容加载完成(首屏时间)->用户可交互(DOMContentLoaded)->加载完成(load) 很显然，如果我们要进行加载时间的优化，我们需要从这里的每一个步骤都去思考，去总结，而避免东凑一点，西凑一点。 具体细节： 一、web性能优化 1、减少HTTP请求（这个优化是最明显的） （1）图片地图，允许在一个图片上关联多个URL，目标URL取决于用户单击的图片上的位置。 （2）雪碧图（也叫CSS精灵， 是一种CSS图像合成技术，一般用于图标，将多张图片合并到一张图片，配合background-position来使用） （3）合并JS和CSS文件 （4）减少http请求头 （5）配置多个域名和CDN加速 把网站内容分散到多个、处于不同地域位置的服务器上可以加快下载速度。 （6）使用缓存（HTTP缓存、浏览器缓存、应用缓存） 恰当的缓存设置可以大大的减少 HTTP请求，例如，很少变化的图片资源可以直接通过 HTTP Header中的Expires设置一个很长的过期头 ;变化不频繁而又可能会变的资源可以使用 Last-Modifed来做请求验证。尽可能的让资源能够在缓存中待得更久。 （7）优化cookie 2、避免坏请求 有时候页面中的html或css会向服务器请求一个不存在的资源，比如图片或者html文件，这会造成浏览器与服务器之间过多的往返请求。 3、避免使用document.write 在js中，可以使用document.write。在网页上显示内容或者调用外部资源，而通过此方法，浏览器采取一些多余的步骤（下载资源，读取资源）。运行js来了解需要做什么，调用其他资源时，需要重新在执行一次这个过程。由于浏览器之前不知道要显示什么，所以会降低页面加载的速度。 要知道，任何能够被document.write调用的资源，都可以通过html调用。这样速度会更快 document.write(''); 改为 4、尽量减少dns查询次数 当浏览器和服务器建立链接时，它需要进行dns解析，将域名解析为ip地址，然而，一旦客户端需要执行dns lookup时，等待时间将会取决于域名服务器的有效响应速度。 虽然所有的isp的dns服务器都能缓存域名和ip地址映射表。但如果缓存的dns记录过期了而需要更新，则可能需要遍历多个dns节点，有时候需要通过全球范围内来找到可信任的域名服务器，一旦域名服务器工作繁忙，请求解析时，就需要排队则进一步延时等待时间。 所有减少dns查询次数很重要，页面加载就尽量避免额外耗时，为了减少dns查询次数，最好的解决方法就是在页面中减少不同的域名请求的机会、 可通过request checker工具来检测页面中存在多少请求后，进行优化。 5、尽量减少重定向 有时候为了特定需求，需要在网页中使用重定向。重定向的意思是，用户的原始请求（如请求A）被重定向到其他的请求（如请求B）； 网页中使用重定向会造成网站性能和速度下降，因为浏览器访问网址是一连串的过程，如果访问到一半，而跳转到新的地址，就会重复发起一连串的过程，这将浪费很多时间。所有我们尽量避免重定向。Google建议： A、 不要链接到一个包含重定向的页面 B、 不要请求包含重定向的资源 6、优化样式表和脚步顺序 Style标签和样式表调用代码应该放置在js代码的前面，这样可以使页面的加载速度加快。 7、避免js阻塞渲染 浏览器在遇到一个引入外部js文件的