前端优化都有啥

前端优化

网络层面

请求过程优化

1. 减少 HTTP 请求

2. 使用 HTTP2

3. 使用服务端渲染

   客户端渲染: 获取 HTML 文件，根据需要下载 JavaScript 文件，运行文件，生成 DOM，再渲染。 服务端渲染：服务端返回 HTML 文件，客户端只需解析 HTML。

   优点：首屏渲染快，SEO 好。

   缺点：配置麻烦，增加了服务器的计算压力。

4. 静态资源使用 CDN

5. DNS 预解析 （采用DNS Prefetch 一种DNS 预解析技术）

<link rel="dns-prefetch" href="www.baidu.com" />
//只有部分浏览器支持

6.压缩 (采用Gzip压缩)

减少不必要的请求（浏览器缓存）

1. 强缓存
2. 协商缓存（对比缓存）
3. CDN缓存
4. 预加载

<link rel='prefetch' href='main.js'>
//只有部分浏览器支持

5. 预渲染

<link rel='prerender' href='http://www.a.com'> 
//只有部分浏览器支持

6. 应用缓存(Cookie,Storage,Service Worker)

浏览器渲染层面优化

1. 优化资源加载

• CSS文件放在head中，先外链，后本页
• JS文件放在body底部，先外链，后本页
• 异步script标签 （defer: 异步加载，在HTML解析完成后执行。defer的实际效果与将代码放在body底部类似async: 异步加载，加载完成后立即执行）

2.减少重绘回流

避免使用层级较深的选择器，避免使用CSS表达式，元素适当地定义高度或最小高度，给图片设置尺寸,不要使用table布局，能够使用CSS实现的效果，尽量使用CSS而不使用JS实现

前端性能优化（一）

前端性能优化的七大手段

前端性能优化 24 条建议（2020）