search

fangmd / blogsource

6 stars 0 forks source link

前端优化 #51

Open fangmd opened 3 years ago

fangmd commented 3 years ago

网络优化

dns-prefetch

dns-prefetch，DNS 预获取

前端关于 DNS 优化有2点：1. 减少 DNS 请求获取次数(http尽量使用同一个域名)。2. DNS 预获取

使用：DNS Prefetch 应该尽量的放在网页的前面，推荐放在 <meta charset="UTF-8"> 后面。

<link rel="dns-prefetch" href="//api.share.zhix.net">

浏览器 DNS 获取策略：浏览器缓存——系统缓存——路由器缓存——ISP DNS缓存——递归搜索。

浏览器与获取 DNS 和内容加载时异步的，所以预获取DNS不会影响页面加载。

dns-prefetch 关闭和打开:

// 开启DNS Prefetch
<meta http-equiv="x-dns-prefetch-control" content="on">

// 关闭DNS Prefetch
<meta http-equiv="x-dns-prefetch-control" content="off">
fangmd commented 1 year ago

性能优化 all

减少 reflow和repaint

  1. 避免 JS 去修改元素的 css 属性
  2. 避免多次修改 css 属性
  3. 可以通过 chrome performance 面板分析 reflow/repaint 时间