从零到精通：Typography排版在前端开发中的关键技巧与实战经验分享

优化前：卡得不行

最近在做一个项目，里面的Typography排版部分真是让我头疼。加载时间长不说，滚动起来还卡顿，用户体验极差。优化前的加载时间大概在5秒左右，用户打开页面后基本上就是看着一个空白页，等啊等啊，最后才慢慢加载出来。这体验简直了，我自己都受不了。

找到瓶颈了！

首先，我得找找问题出在哪里。用了一些工具，比如Chrome DevTools的Performance面板和Lighthouse，发现有几个主要的问题：

• 字体文件过大：项目中用了好几个自定义字体，每个字体文件都挺大的，加起来就更严重了。
• CSS选择器复杂度高：CSS选择器写得太复杂，导致渲染时间很长。
• 不必要的重绘和回流：一些不必要的DOM操作导致了大量的重绘和回流，影响了性能。

找到了这些问题，接下来就是解决它们了。

优化后：流畅多了

字体优化

首先是字体问题。原来的代码是这样的：

@font-face {
  font-family: 'MyCustomFont';
  src: url('/fonts/MyCustomFont.woff2') format('woff2'),
       url('/fonts/MyCustomFont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'MyCustomFont', sans-serif;
}

优化后的代码是这样的：

@font-face {
  font-family: 'MyCustomFont';
  src: url('/fonts/MyCustomFont.woff2') format('woff2');
  font-display: swap;
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'MyCustomFont', sans-serif;
  font-size: 16px;
}

这里主要是做了两件事：

1. 减少字体文件数量：只保留了woff2格式的字体文件，因为woff2压缩比更高，加载更快。
2. 添加font-display属性：使用font-display: swap;可以确保字体在加载时不会造成页面布局的闪动。

优化后，字体加载时间大大缩短了。

CSS选择器简化

原来的CSS选择器是这样的：

.header .nav .menu-item a {
  color: #000;
  text-decoration: none;
}

.header .nav .menu-item a:hover {
  color: #ff0000;
}

优化后的代码是这样的：

.menu-item a {
  color: #000;
  text-decoration: none;
}

.menu-item a:hover {
  color: #ff0000;
}

这里主要做了两件事：

1. 简化选择器：去掉多余的嵌套选择器，直接使用.menu-item a，这样可以提高CSS解析速度。
2. 合并样式：尽量合并相似的样式，减少CSS文件的大小。

优化后，CSS解析时间和渲染时间明显减少了。

减少重绘和回流

原来的代码是这样的：

function updateText() {
  const element = document.getElementById('myElement');
  element.style.color = '#ff0000';
  element.innerHTML = 'New Text';
}

优化后的代码是这样的：

function updateText() {
  const element = document.getElementById('myElement');
  element.textContent = 'New Text';
  element.style.color = '#ff0000';
}

这里主要做了两件事：

1. 先修改textContent再修改style：这样做可以减少重绘和回流的次数，提高性能。
2. 批量更新DOM：尽量减少对DOM的操作频率，一次性更新多个属性。

优化后，页面滚动和交互变得流畅多了。

性能数据对比

经过这一系列优化，效果非常显著：

• 加载时间：从原来的5秒左右降到了800毫秒左右。
• 首屏渲染时间：从原来的3秒左右降到了500毫秒左右。
• 滚动流畅度：原来滚动时会卡顿，现在基本没有卡顿现象。

这些优化方法亲测有效，希望对你也有帮助。

以上是我的优化经验，有更好的方案欢迎交流

这次优化过程中踩了不少坑，也学到了不少东西。如果你有更好的优化方案或者发现了我的不足之处，欢迎在评论区留言交流。希望这篇博客能对你有所帮助。