前端的性能优化

html

1. 减少relfow: 使用div，而不是table布局。可能会进行样式修改的元素尽量在末端加class，这样回流时，重新渲染的范围比较小。隐藏属性可多用visibility 或opacity，少用display,因为display引起回流，而另外两个只引起repaint
2. 精简文档中的div,span,li的嵌套，减轻html代码量

css

1. 由于css选择器是从右向左解析，所以需要降低 CSS 选择器的复杂性，避免节点层级过多，可以使用性能更高的选择器，如类选择器
2. 简单动画避免使用js，而是使用CSS的 transform,transition和,animation 搭配 @keyframes完成

js

1. 函数防抖与节流
2. 使用事件委托可以节省内存
3. 避免频繁操作增删DOM
4. js的引入可按需加载
5. 懒加载

文件

1. css文件放在最顶部，优先渲染，体验更好
2. js放在最底部，避免阻塞
3. 使用不同大小的图片,例如：用户列表（thumbnail）
4. minify uglify压缩js、css文件
5. css sprite（icon）利用background-position， 减小图片请求数量
6. 使用字体图标 iconfont 代替图片图标,使用时就跟字体一样，可设置属性，例如 font-size、color 等
7. 图片多用矢量图（SVG），往往比图像小很多，缩放不失真

http

1. 使用缓存机制，比如引入的第三方库一般都比较稳定，不会经常改变。所以将它们单独提取出来，进行长期缓存；对于频繁变动的资源。可用no-cache搭配eTag或者last-modified使用，虽然没有减少请求次数，但是减小了响应数据大小
2. 使用CDN提供静态文件，例如item_image

关于性能优化，再在宏观一点的角度可由以下几个方面入手

1. 交互方面
   骨架屏，首屏优化
2. 打包方面
   tree shaking, code spliting, uglify, minify
3. coding 方面
   少用闭包;页面销毁时及时的Unsubscribe;对事件的监听也需解绑；懒加载

针对如何减少白屏时间的优化

性能检测指标

Navigation Timing 的处理模型。从当前浏览器窗口卸载旧页面开始，到新页面加载完成，
整个过程一共被切分为 9 个小块：
提示卸载旧文档、重定向/卸载、应用缓存、DNS 解析、TCP 握手、HTTP 请求处理、HTTP 响应处理、DOM 处理、文档装载完成。
两两事件之间计算时间差，从而获取中间过程的耗时

使用Navigation Timing API ，实现精准的页面性能打点；
通过 window.performance 属性获取
window.performance.timing 接口（定义了从 navigationStart 至 loadEventEnd 的 21 个只读属性）

• 白屏时间
  用户看到页面展示出现一个元素的时间
  可以直接采用 domInteractive - fetchStart ，此时页面资源加载完成，即将进入渲染环节。

• 首屏时间
  首屏时间是指页面第一屏所有资源完整展示的时间
  loadEventStart - fetchStart，此时页面DOM树已经解析完成并且显示内容

• 数据传输耗时
  responseEnd - responseStart

• FCP (First Contentful Paint)
  浏览器从响应用户输入网址地址，到浏览器开始渲染内容的时间。
  可以直接反映网站性能的优劣。
  通过 performance.getEntriesByType(‘paint’)[1] 来获得这个时间

针对白屏时间的优化

DNS 预解析

可以通过 DNS 预解析的方式提前获取 IP 地址，以缩短后续请求的响应时间。
前端可以通过 dns-prefetch 预解析
<link rel="dns-prefetch" href="https://hzfe.org/" />

TCP 连接优化

通过 preconnect 在请求发送前预先执行一些操作，这些操作包括 DNS 解析，TCP 握手 和 TLS 协商
<link href="https://hzfe.org" rel="preconnect" />

请求优化

通过使用 HTTP/2 协议，有多路复用、首部压缩、二进制分帧和服务端推送等特性，加快请求的响应速度

页面解析优化

服务端渲染（Server-Side Rendering）
前后端分离的开发模式，由于需要等待 JS 文件和接口加载完成之后才能渲染页面，导致白屏时间变长。
服务端渲染是指在服务端将页面的渲染逻辑处理好，然后将处理好的 HTML 直接返回给前端展示。这样即可减少页面白屏的时间。