前端优化
学习知乎代码细节
有关html head 的优化细节head
1.dns-prefetch
<link rel="dns-prefetch" href="//pic1.zhimg.com">
<meta name="force-rendering" content="webkit">
强制使用webkit内核渲染
<link rel="search" type="application/opensearchdescription+xml" href="https://static.zhihu.com/static/search.xml" title="知乎">
这个标签可以指定搜索栏的快捷方式
知乎的search.xml
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
<InputEncoding>utf-8</InputEncoding>
<ShortName>知乎</ShortName>
<Description>发现更大的世界</Description>
<Image height="16" width="16" type="image/x-icon">https://www.zhihu.com/static/favicon.ico</Image>
<Url type="text/html" template="http://www.zhihu.com/search?q={searchTerms}"/>
</OpenSearchDescription>
- 针对手Q分享到qq，微信，朋友圈
<meta itemprop="name" content="H5分享也可以很任性的一段代码包办">
<meta itemprop="description" content="如何做到大道为简，通用的一段让页面分享后有脸有标题有摘要">
<meta itemprop="image" content="http://pp.myapp.com/ma_icon/0/icon_11778207_1453189893/96">
<meta itemprop="url" content="https://www.zhihu.com/question/311212158/answer/589935905">
preconnet
浏览器要建立一个连接，一般需要经过DNS查找，TCP三次握手和TLS协商（如果是https的话），这些过程都是需要相当的耗时的，所以preconnet，就是一项使浏览器能够预先建立一个连接，等真正需要加载资源的时候就能够直接请求了。
而一般形式就是
<link rel="preconnect" href="//example.com">
<link rel="preconnect" href="//cdn.example.com" crossorigin>
解释href的属性值，如果是合法的URL，然后继续判断URL的协议是否是http或者https否则就结束处理
如果当前页面host不同于href属性中的host,crossorigin其实被设置为anonymous(就是不带cookie了)，如果希望带上cookie等信息可以加上crossorign属性,corssorign就等同于设置为use-credentials
网友评论