1. 程式人生 > >前端性能優化之-dns預解析

前端性能優化之-dns預解析

maximum 頁面 mini theme sde link them ade 性能

預解析的實現:

1. 用meta信息來告知瀏覽器, 當前頁面要做DNS預解析:<meta http-equiv="x-dns-prefetch-control" content="on" /> 2. 在頁面header中使用link標簽來強制對DNS預解析: <link rel="dns-prefetch" href="http://baidu.com" />

註:dns-prefetch需慎用,多頁面重復DNS預解析會增加重復DNS查詢次數。

代碼示例:

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="x-dns-prefetch-control" content="on" />
<link rel="dns-prefetch" href="https://unpkg.com" />
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net" />
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

前端性能優化之-dns預解析