【面试题】前端性能优化

一：网络传输性能优化

1.网络传输性能优化

使用http2

2.资源打包压缩

资源打包压缩主要是通过webpack压缩以下内容：


压缩JS代码：通过webpack的production模式压缩JS代码。
压缩HTML代码：使用html-webpack-plugin的minify进行压缩。
压缩CSS代码：使用cssnano压缩css，在postcss.config.js中进行配置。

3.图片资源优化

• 在html中尽量不要放图片。

• 使用雪碧图：雪碧图可以减少请求的次数。

• 使用字体图标：字体图片能够像图片一样工作，但是资源占用和图片请求比起来小很多。

• 使用webp：webp格式的图片相对根据国家节省网络带宽。

4. 使用CDN

内容分发网络（CDN）是一组分布在多个不同地理位置的 Web 服务器。我们都知道，当服务器离用户越远时，延迟越高。CDN
就是为了解决这一问题，在多个位置部署服务器，让用户离服务器更近，从而缩短请求时间。

CDN指的是在网络不同地点部署节点服务器，将源站内容分发至所有CDN节点，使得用户可以就近获得所需内容。CDN提高了网站的响应速度、降低了延迟。

CDN 原理

当用户访问一个网站时，如果没有 CDN，过程是这样的：

浏览器要将域名解析为 IP 地址，所以需要向本地 DNS 发出请求。 本地 DNS
依次向根服务器、顶级域名服务器、权限服务器发出请求，得到网站服务器的 IP 地址。 本地 DNS 将 IP
地址发回给浏览器，浏览器向网站服务器 IP 地址发出请求并得到资源。

5. 使用预加载

当一个页面加载时，可能会加载很多第三方资源，但是这些资源的优先级是不同的，一些重要资源需要提前进行获取，因此我们可以使用link标签来进行DNS预解析、预加载、预渲染来管理页面资源的加载。

6. 发送请求时使用防抖和节流策略

防抖节流可以避免短时间内发送过多的重复请求。

二：页面渲染性能优化

1. 减少重排和重绘的发生

重排：指的是元素布局发生修改，导致页面重新排列。
重绘：所有对元素的视觉表现属性的修改，都会引发重绘。

2. 避免CSS、JS阻塞

CSS资源优于JS资源的引入，JS应当尽量少影响DOM的构建。

3. if-else 对比 switch

当判断条件数量越来越多时，越倾向于使用 switch 而不是 if-else。

4. 查找表

当条件语句特别多时，使用 switch 和 if-else 不是最佳的选择，这时不妨试一下查找表。查找表可以使用数组和对象来构建。

switch (index) {
    case '0':
        return result0
    case '1':
        return result1
    case '2':
        return result2
    case '3':
        return result3
    case '4':
        return result4
    case '5':
        return result5
    case '6':
        return result6
    case '7':
        return result7
    case '8':
        return result8
    case '9':
        return result9
    case '10':
        return result10
    case '11':
        return result11
}

可以将这个 switch 语句转换为查找表

const results = [result0,result1,result2,result3,result4,result5,result6,result7,result8,result9,result10,result11]

return results[index]

如果条件语句不是数值而是字符串，可以用对象来建立查找表

const map = {
  red: result0,
  green: result1,
}

return map[color]

三：经典问题

RQ1：首屏加载如何优化？

1.动态加载路由
2.合理使用缓存
3.UI框架按需加载
4.避免重复加载组件
5.压缩图片资源
6.使用SSR服务端渲染：组件或页面通过服务器生成html字符串，再发送到浏览器。