面试官：你是如何对前端项目进行优化的？

面试官：你认为前端工作中最重要的是什么？

答：用户体验！

面试官：如何可以提升用户体验？

答：从提升项目性能开始！

面试官：如何才能提升项目性能呢？

答：对项目进行优化!

面试官：如何对项目进行优化？

答：主要从项目加载时以及运行时两方面进行优化。

面试官：如何进行加载时的优化？

答：主要从以下几方面入手：

• CSS 写头部，JavaScript 写底部：所有放在 head 标签里的 CSS 和 JS 文件都会堵塞渲染。如果这些 CSS 和 JS 需要加载和解析很久的话，那么页面就会空白了，所以 JS 文件要放在底部，等HTML解析完了再加载 JS 文件。那为什么 CSS 文件还要放在头部呢？因为先加载HTML再加载 CSS，会让用户第一时间看到的是无样式且丑陋的，为了避免这种粗鄙的情况发生，所以要将 CSS 文件放在头部了。
• 使用服务器端渲染：在进行客户端渲染时，需要先获取HTML文件，然后再根据需要下载JS文件，并运行文件，然后生成DOM，最后再次渲染。这个过程会在无形中拖慢我们的性能。服务器端渲染是服务端直接返回HTML文件，客户端只需要解析HTML文件即可。
• 减少HTTP请求：一个完整的http请求需要经历DNS查找，TCP握手，浏览器发出HTTP请求，服务器接收请求，服务器处理请求并给予响应，浏览器接收响应等等一系列复杂的过程。当请求资源较多时，直接体现在了性能消耗上面。这就是为何要将多个小文件合并成一个文件，从而减少http请求次数的原因。
• 静态文件使用CDN：CDN指的是内容分发网络，它是一个分布在多个不同地理位置的web服务器。我们都知道，当服务器离用户越远延迟越高。CDN就是为了解决这一问题而存在的。CDN 在多个位置布置服务器，让用户离服务器更近，从而缩短服务请求时间。
• 字体图标代替图片图标：字体图标就是将图标制作成一个字体，使用时就跟字体一样，可以设置其属性，例如 font-size、color 等等，非常方便。并且字体图标是矢量图，不会失真。还有一个优点是生成的文件特别小。
• 利用缓存不重复加载相同的资源：为了避免用户每次访问网站都得请求文件，我们可以通过添加Expires 来控制这一行为。Expires 设置了一个时间，只要在这个时间之前，浏览器都不会请求文件，而是直接使用缓存。
• 图片优化：首先进行图片延迟加载，在页面中，先不给图片设置路径，只有当图片出现在浏览器的可视区域时，才去加载真正的图片；其次降低图片质量，图片100% 的质量和 90% 的质量通常肉眼是看不出来区别，尤其是用来当背景图的时候，我们可以将图片切成 JPG 格式，并且将它压缩到 60% 的质量。再次，尽可能利用 CSS3 效果代替图片，因为代码大小通常是图片大小的几分之一甚至几十分之一；最后一个就是使用雪碧图。
• 通过 webpack 按需加载代码：懒加载是一种很好的优化方式，它可以加快应用的初始加载速度，减轻总体体积，因为某些代码块可能永远不会被加载到。

面试官：那如何进行运行时的优化？

答：主要从以下几方面入手：

• 减少重绘重排：用 JS 修改样式几何属性（位置 ，大小）时，有可能产生大量重排重绘，所以可以通过 class 来改变样式。
• 使用事件委托：事件委托利用事件冒泡，只需指定一个事件处理函数，就可以管理某一类型的所有事件，使用事件委托可以大量节省内存。
• if-else 对比switch：判断条件越多，越倾向于使用 switch 而不是 if-else。不过switch 只能用于 case 值为常量的分支结构，而if-else 更加灵活。
• 不要覆盖原生方法：无论你的JS代码如何优化，执行效率都比不上原生方法。当原生方法可用时，我们尽量使用它们。
• 降低CSS 选择器的复杂度：浏览器读取选择器，遵循的原则是从选择器的右边到左边读取。所以，尽可能降低CSS选择器的复杂性
• 使用 flexbox 布局： flexbox布局方式，它比起早期的布局方式来说性能更好。不过flexbox 兼容性还不太友好，所以要谨慎使用。
• 用 transform 和 opacity 属性实现动画：因为transforms 和 opacity 这两个属性更改不会触发重排重绘。