前端性能优化面试涨薪必备

前端性能优化是一个大的课题，需要花好多时间才能理解，之前对前端优化陆陆续续有一些了解。所以这次从渲染优化，打包优化，代码优化做了一个系统的总结，并且引申出了几个需要关注的问题，文章可能有点长，大家一定要看到最后。最后写作不易，希望觉得还可以的话，帮忙点赞一波，提前感谢了。当然如果有写不好的地方，也请指出来，我会积极改进，共同成长。

1. 从输入url到页面展示发生了什么？（万能面试题）

涉及知识点：（宏观）

• DNS：其实就是一个网络协议，把我们的域名解析成对应的IP地址；

• TCP：基于IP地址发起一个TCP的连接，三次握手；

• HTTP/SSL：http基于TCP，定制了解析的逻辑；

  • 前端到底是怎么上线的？

    • 小应用：开发完毕，将html、css、js代码打包丢到 nginx 上。
    • 带数据的中型应用：开发完毕，模板（html等）丢在 server（smarty、jsp），静态资源放 cdn。
    • 大应用：静态资源 contentHash 更好的利用缓存 => 文件冗余

  • 浏览器缓存的逻辑：强缓存、协商缓存

• 响应解析（SPA、同构）

  • SPA：返回的是一个空的html，逻辑都在js里，缺点是首屏渲染太慢（vue、react默认的）
  • 同构（首屏渲染速度+SEO）：nuxt、next
  1. 需要nodejs环境，应用首屏，现在node里面执行渲染一下，返回浏览器
  2. 后续就是单页面的逻辑。

  从输入url到页面渲染的时间怎么变短？每一步都有对应的参数指标

• 浏览器渲染（推荐文章：浏览器是如何工作的？How browser work）
  浏览器解析 html、css 执行 js

  1. 解析html（AST） dom tree
  2. 解析css csstree，css的选择器优化等
  3. 合并成 render tree
  4. 浏览器调用操作系统渲染
  5. 重绘回流等

简单粗暴的优化策略：

• 文件加载的更少
  • 缓存 CDN
  • 图片优化
    • JPEG
    • PNG：颜色丰富、背景透明
    • GIF：动态图，体积最小
    • Webp：兼容性一般
    • 压缩工具、不同尺寸
    • 渐进加载（先加载占位 => 低像素 => 实际图片）、懒加载
  • 静态文件优化
  • 浏览器优化
  • 文件合并压缩等
• 代码执行的更少
  • 节流防抖
  • 按需执行
  • 回流重绘
  • 框架优化（比如 vue3 的静态标记）
  • html、css、JavaScript
    • 减少DOM操作
    • 尽量避免通配符，正则表达式等

优化报告：使用Performance报告
页面加载的性能指标：LightHouse（devTools，插件，cli，module）

2. 承接页是如何实现秒开的？

用户承接页，是承载上游的落地页，其核心职能是承接流量、转化用户。对用户增长业务来说，如何让用户更快看到页面，是影响用户决策、决定拉新成功的关键。用增承接页的目标用户是手淘低活用户，这部分人的手机设备中低端占比90%以上，网络条件也不稳定，这对于我们承接页的性能、体验提出了更高的要求。

淘宝承接页是如何实现秒开的

浏览器优化