前端性能优化

---

前言

从今天开始我将陆续在博客上整理前端面试题

---

前端性能优化

一、清理html

恰当放置css

如果将css样式表放在html后面的话，页面加载时会显示出来元素在加载样式，这样对视觉体验很不好，所以为了保证正确的渲染过程，我们可以将css放在文档头之内

恰当放置js

如果将js放置在head标签内或html文档的上部，这会阻塞HTML和CSS元素的加载过程。这个错误会导致页面加载时间过长。，所以我们可以将它放在底部来避免这个问题。

---

二、优化css性能

主要体现在

减少多余的css文件

很多css文件需要通过http请求来引入，所以尽量减少多余的css文件请求

使用link而不使用@import

@impport会阻止浏览器并行下载，而link不会

---

三、减少外部http请求

大多情况下，网页加载时间来源于外部的http请求，所以检查你网站的每个组成部分，消除任何影响访问者体验不好的成分。这些成分可能是：

不必要的图片
没用的js代码
过多的css
多余的插件

---

四，压缩css,js,html

---

五, 使用预先获取

预先获取（Predictive Fetch）模式的概念很简单，实现却不容易：Ajax应用程序必须猜测用户下一步要做什么，然后获取相应的数据。

主要有三类预先获取

◉链接预先获取
◉DNS预先获取
◉预先渲染
DNS是h5中的一个特性

<meta charset=”gbk”>
<link rel=”dns-prefetch” href=”//g.tbcdn.cn”>
<link rel=”dns-prefetch” href=”//gtms01.alicdn.com”>
<link rel=”dns-prefetch” href=”//img01.taobaocdn.com”>

DNS预先获取
DNS Prefetch也就是DNS预先获取，也是前段优化的一部分。在前段优化中关于DNS的有两点：一是减少DNS的请求次数，第二个就是进行DNS预先获取。

默认情况下，浏览器会对页面中已经出现的和当前域名不在同一个域的域名进行预先获取，并且缓存结果，这就是隐式的DNS Prefetch。但对于页面中没有出现的，我们就要进行显式的DNS Prefetch。使用link

<link rel=”dns-prefetch” href=”http://api.twitter.com”/>
DNS Prefetch应该尽量的放在网页的前面，推荐放在<meta charset=”/>后面。

PS:可以通过下面的标签禁止隐式的DNS Prefetch。

<meta http-equiv=”x-dns-prefetch-control” content=”off”>

---

六，使用cdn和缓存提高速度

使用cdn时，您可以将你网站的静态内容链接到全球各地的服务器扩展网络。如果你的网站观众遍布全球，这个功能就十分有用。cdn允许你的网站访问者从最近的服务器加载数据，以便全球范围内快速分发。cdn是一种缓存方法，可以极大改善资源的分发时间，同时还能实现一些其他的缓存技术，如利用浏览器缓存。

---

总结

以上就是今天要讲的内容，本文简单介绍了前端性能的优化，后续有可能继续扩充