前端优化面试题大全

以下题目是根据网上多份面经收集而来的，题目相同意味着被问的频率比较高，有问题欢迎留言讨论，喜欢可以点赞关注。

https://coding.imooc.com/class/448.html
慕课网优化视频

从各个方面谈谈前端性能优化手段x8

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

性能优化总结

1、 编码优化

• js优化
  ①数据读取·在局部作用域进行变量缓存；避免嵌套过深，数据扁平化；
  ②循环：减少循环次数；减少遍历的数据量；完成目的后马上结束循环；避免重复计算，相同的执行结果应该使用缓存；倒序循环会略微提升性能；尽量避免使用 for-in 循环，因为它会枚举原型对象，耗时大于普通循环: ；
  ③减少cookie 体积能有效减少每次请求的体积和响应时间：去除不必要的 cookie；压缩 cookie 大小；设置 domain 与过期时间；
  ④dom优化：减少访问 dom 的次数，如需多次，将 dom 缓存于变量中,使用事件委托，避免大量的事件绑定，减少重绘与回流:多次操作合并为一次；减少对计算属性的访问；
• css优化:避免多层级的选择器嵌套；减少使用通配符与属性选器； 减少不必要的多余属性，优先使用 css 动画；使用 替代原生 @import；
• html 优化:减少dom数量，避免不必要的节点或嵌套；避免空标签，能减少服务器压力，因为 src 为空时，浏览器仍然会发起请求；语义化标签有利于 SEO 与浏览器的解析时间；减少使用 table 进行布局，避免使用
  与

  ---

  ；

2、页面基础优化
①引入位置: css 文件中引入， js 文件底部引入；影响首屏的，优先级很高的 js 也可以头部引入，甚至内联；
②减少请求(http 1.0 - 1.1)，合并请求，正确设置 http 缓存；
③减少文件体积:删除多余代码: tree-shaking UglifyJs code-spliting混淆 / 压缩代码开启 gzip 压缩；
④图片优化:选择合适格式，例如非透明时可用 jpg；非苹果端，使用 webp；小图片合成雪碧图，低于 5K 的图片可以转换成 base64 内嵌；合适场景下，使用 iconfont 或者 svg；
⑤使用缓存:
<浏览器缓存>: 通过设置请求的过期时间，合理运用浏览器缓存；
: 静态文件合理使用 CDN 缓存技术；HTML 放于自己的服务器上；打包后的图片 / js / css 等资源上传到 CDN 上，文件带上 hash 值；由于浏览器对单个域名请求的限制，可以将资源放在多个不同域的 CDN 上，可以绕开该限制；
<服务器缓存>: 将不变的数据、页面缓存到 内存 或 远程存储(redis等) 上；
<数据缓存>: 通过各种存储将不常变的数据进行缓存，缩短数据的获取时间；

360搜索图片这种的瀑布流布局

https://juejin.im/post/5cd0bdfc6fb9a031f10ca08c#heading-53

图片懒加载实现

https://juejin.im/post/5cd0bdfc6fb9a031f10ca08c#heading-53

如何提高图片懒加载的效率；

页面DOM节点太多，会出现什么问题？如何优化？

不利于seo，渲染耗时,页面卡顿。尽量不要嵌套太深层的节点

如何做性能监测

优化构建速度

代码分装 模块化 cdn 异步加载组件

前端性能优化

1、js css；2 图片；3 缓存预加载； 4 SSR； 5 多域名加载；6 负载均衡
并发请求资源数上限（6个）

base64为什么能提升性能，缺点

原因：网页上的每一个图片，都是需要消耗一个 http 请求下载而来的图片的下载始终都要向服务器发出请求，要是图片的下载不用向服务器发出请求，base64可以随着 HTML 的下载同时下载到本地.减少https请求。

1.可以将二进制流转为字符流；方便传输数据，对数据进行简单的加密，肉眼安全。
缺点：
1.信息量在原有基础上增加33%;
2.编码和解码需要计算量，耗费CPU.

1.什么是Base64
Base64是网络上最常见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来标识二进制数据的方法。Base64是一种可逆的编码方式，是一种用64个Ascii字符来表示任意二进制数据的方法。主要用于将不可打印字符转换为可打印字符，或者简单的说将二进制数据编码为Ascii字符，

2.什么时候使用Base64?
**
1.Base64一般用于在HTTP协议下传输二进制数据，由于HTTP协议是文本协议，所以在HTTP写一下传输二进制数据需要将二进制数据转化为字符数据，网络传输只能传输可打印字符，在ASCII码中规定，0-31、128这33个字符属于控制字符，32~127这95个字符属于可打印字符那么其它字符怎么传输呢，Base64就是其中一种方式，
2.将图片等资源文件以Base64编码形式直接放于代码中，使用的时候反Base64后转换成Image对象使用。
3.偶尔需要用这条纯文本通道传一张图片之类的情况发生的时候，就会用到Base64，比如多功能Internet 邮件扩充服务（MIME）就是用Base64对邮件的附件进行编码的。

意义:网页上的每一个图片，都是需要消耗一个 http 请求下载而来的（所有才有了 csssprites 技术的应运而生，但是 csssprites 有自身的局限性）。图片的下载始终都要向服务器发出请求，要是图片的下载不用向服务器发出请求，base64可以随着 HTML 的下载同时下载到本地.减少https请求。

image.png

如果图片足够小且因为用处的特殊性无法被制作成雪碧图（CssSprites），在整个网站的复用性很高且基本不会被更新。

webpack性能优化手段

SSR对性能优化的提升在哪里

https://juejin.im/post/5c92f499f265da612647b754#heading-9
ssr优缺点，ssr性能优化，node中间层细节处理
SSR，俗称 服务端渲染 (Server Side Render)，讲人话就是: 直接在服务端层获取数据，渲染出完成的 HTML 文件，直接返回给用户浏览器访问。

SE0

对于SEO的话，我们主要是为了在搜索的时候让自己的网站排名靠前。那么我们可以理解一下网络爬虫，然后对于这方面的优化就会有一个大概的理解。网页爬虫，通过一个入口，访问符合规则的很多URL，来获得页面，通过解析页面标签的结构，来存放一些关键信息。比如网页head中的title,meta的 describe，keywords。还有一些内容，但是因为爬虫并不是浏览器，所以一般不能在遇到script、link这些需要额外发起网络请求的资源并解析，所以对于大部分只是分析静态的页面。那么，我们就可以知道：前端性能优化（JS原生和vue）规范编写html结构，便于爬虫解析 关键词，title，内容等信息要完善
减少使用js输出内容

首屏加载如何优化

1、css / js 分割，使首屏依赖的文件体积最小，内联首屏关键 css / js；
非关键性的文件尽可能的 异步加载和懒加载，避免阻塞首页渲染；
使用dns-prefetch / preconnect / prefetch / preload等浏览器提供的资源提示，加快文件传输；

2、谨慎控制好 Web字体，一个大字体包足够让你功亏一篑；
控制字体包的加载时机；
如果使用的字体有限，那尽可能只将使用的文字单独打包，能有效减少体积；

3、合理利用 Localstorage / server-worker等存储方式进行 数据与资源缓存；

4、分清轻重缓急:
重要的元素优先渲染；
视窗内的元素优先渲染；

5、服务端渲染(SSR)
减少首屏需要的数据量，剔除冗余数据和请求；
控制好缓存，对数据/页面进行合理的缓存；
页面的请求使用流的形式进行传递；

6、优化用户感知

利用一些动画 过渡效果，能有效减少用户对卡顿的感知；
尽可能利用 骨架屏(Placeholder) / Loading 等减少用户对白屏的感知；
动画帧数尽量保证在 30帧 以上，低帧数、卡顿的动画宁愿不要；
js 执行时间避免超过 100ms，超过的话就需要做:
寻找可 缓存 的点；
任务的 分割异步 或 web worker 执行；

整个前端性能提升大致分几类

一个网页从请求到呈现花了很长时间，如何排查，访问速度要快

https://www.cnblogs.com/jiangjunli/p/7372673.html
1 网站服务器速度或租用空间所在服务器速度
①ping 一下IP地址或域名，ping命令看连接到服务器的时间和丢包情况。
②查看同台服务器上其它网站的打开速度

2 电信和联通互访瓶颈问题
解决办法：如果购买空间的话，建议购买双线空间或多线空间。这已不是新鲜的概念，大部分的虚拟主机商都有两线或多线空间，价格高一些，但是从用户体验角度来说是物有所值的。
3 从网站本身找问题，网站的问题包括网站程序设计，网页设计结构，网页内容三个部分。
大图片轮播 js阻塞 table布局 嵌套太多 可能有错误的代码 flash文件存在

项目上线前，你们做过哪些性能优化：

• 图片预加载，css样式表放在顶部且link链式引入，javascript放在底部body结束标签前;

• 使用dns-prefetch对项目中用到的域名进行 DNS 预解析，减少 DNS 查询，如： ;

• 减少http请求次数:图片静态资源使用CDN托管;API接口数据设置缓存，CSS Sprites/SVG Sprites(如有疑惑：该如何以正确的姿势插入SVG Sprites？这篇说的很详细), JS、CSS源码压缩、图片大小控制合适，使用iconfont(字体图标)或SVG，它们比图片更小更清晰，网页Gzip压缩;

• 减少DOM操作次数，优化javascript性能;

• 减少 DOM 元素数量，合理利用:after、:before等伪类;

• 避免重定向、图片懒加载;

• 前后端分离开发，资源按需加载，最好能做到首屏直出(即服务端渲染);

• 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性) ;

• 多域名分发划分内容到不同域名，解决浏览器域名请求并发数问题，同时也解决了请求默认携带的cookie问题;

• 尽量减少 iframe 使用，它会阻塞主页面的渲染;

• 对所有资源压缩 JavaScript 、 CSS 、字体、图片等，甚至html;

• 避免src为空

• 多域名分发划分内容到不同域名

针对React的性能优化手段
介绍react优化