前端面试题之性能优化详细篇

简要说明

网站性能说简单点就是网站打开速度快不快，页面中的动画够不够流畅，表单提交的速度是否够快，列表滚动页面切换是否卡顿。性能优化就是让网站变得快。

在MDN上对web性能的定义是网站或应用程序的客观度量和可感知的用户体验。比如减少页面加载事件(减少文件体积，减少HTTP请求，使用预加载)，让网站尽快可用(懒加载或者分片加载)，平滑的交互性(使用CSS替代JS动画，减少UI重绘)，感知表现(加载动画，loading等给用户感觉快)，性能测定(性能指标，性能测试，性能监控以便持续优化，毕竟性能优化是个持续的过程)。

页面性能关乎到用户的留存，网站的转换率，用户体验和网站的传播，甚至影响搜索排名遭到用户投诉，当然也会影响开发的效率。

常规的前端性能优化手段

1.content方面

• 减少HTTP请求：合并文件、CSS精灵、inline Image

• 减少DNS查询：DNS查询完成之前浏览器不能从这个主机下载任何任何文件。方法：DNS缓存、将资源分布到恰当数量的主机名，平衡并行下载和DNS查询

• 避免重定向：多余的中间访问

• 使Ajax可缓存

• 非必须组件延迟加载

• 未来所需组件预加载

• 减少DOM元素数量

• 将资源放到不同的域下：浏览器同时从一个域下载资源的数目有限，增加域可以提高并行下载量

• 减少iframe数量

• 不要404

2.Server方面

• 使用CDN
• 添加Expires或者Cache-Control响应头
• 对组件使用Gzip压缩
• 配置ETag
• Flush Buffer Early
• Ajax使用GET进行请求
• 避免空src的img标签

3.Cookie方面

• 减小cookie大小
• 引入资源的域名不要包含cookie

4.css方面

• 将样式表放到页面顶部
• 不使用CSS表达式
• 不使用IE的Filter
• Javascript方面
• 将脚本放到页面底部
• 将javascript和css从外部引入
• 压缩javascript和css
• 删除不需要的脚本
• 减少DOM访问
• 合理设计事件监听器

5.图片方面

• 优化图片：根据实际颜色需要选择色深、压缩
• 优化css精灵
• 不要在HTML中拉伸图片
• 保证favicon.ico小并且可缓存

webpack优化前端性能

• 压缩代码:删除多余的代码、注释、简化代码的写法等等方式。可以利用webpack的UglifyJsPlugin和ParallelUglifyPlugin来压缩JS文件， 利用cssnano（css-loader?minimize）来压缩css
• 利用CDN加速: 在构建过程中，将引用的静态资源路径修改为CDN上对应的路径。可以利用webpack对于output参数和各loader的publicPath参数来修改资源路径
• Tree Shaking: 将代码中永远不会走到的片段删除掉。可以通过在启动webpack时追加参数–optimize-minimize来实现
• Code Splitting: 将代码按路由维度或者组件分块(chunk),这样做到按需加载,同时可以充分利用浏览器缓存
• 提取公共第三方库: SplitChunksPlugin插件来进行公共模块抽取,利用浏览器缓存可以长期缓存这些无需频繁变动的公共代码

如何使用CSS提高页面性能？

• 内联首屏关键CSS
• 异步加载CSS
• 资源压缩
• 合理使用选择器
• 减少使用昂贵的属性
• 不要使用@import

CSS优化、提高性能的方案？

• 避免过度约束
• 避免后代选择符
• 避免链式选择符
• 使用紧凑的语法
• 避免不必要的命名空间
• 避免不必要的重复
• 最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
• 避免！important，可以选择其他选择器
• 尽可能的精简规则，你可以合并不同类里的重复规则

摘自：https://fe.ecool.fun/topic-list?pageNumber=1&orderBy=updateTime&order=desc&tagId=20