前端性能的一些理解

如果你是一个小网站，日pv很小的话，当然不太用在意性能这方面东西，但是你是一个大型网站的，日均pv十万甚至数十万以上的网站，那么性能就是一个不可忽视的问题。全国各地网络环境的不一样，就会导致网站访问速度的差异，速度越快的话，比如我们常说的首屏时间，一般来说，用户在一个页面停留3秒如果还没有页面显示，那么用户很可能就会走，所以这对于产品是很大的问题，所以应当引起重视。

---

现在我们分析一下可能影响我们网站性能的原因，大家应该都听说过著名的雅虎军规，他提出网站性能优化的34条法则，有兴趣的话应该好好看看。（http://www.imooc.com/view/50）这里的视频也可以看看。但是雅虎军规不一定都适用，比如视频网站，我们需要的是视频先播放出来，这个要具体网站具体分析。

---

查资料，网站性能优化不光雅虎的34条军规，还有就是平时写代码的时候，一定要减少代码量，能省就省，能复用的就复用，比如我们平时的css代码要把相似的代码模块化，然后到用的时候引用就可以，然后发布之前进行压缩代码，dom绘制是很浪费性能的，所以要注意不要把html代码的结构写的太深，一般不要炒作三层结构，我昨天看慕课网上讲前端性能优化有一个很好的是视频，这位老师还讲了很多关于后端优化很的措施，建议大家看看，还有计算机网络，http协议这些网络方面的优化都是需要注意的问题，性能优化是一整套方案，不一定要前后端分离的太开，比如一个页面的渲染问题，可以交给前端渲染，也可以后端渲染，有时候后端直接渲染好，然后发给你，这也有可能起到一定作用，还有就是有很多具体可操作的方案；

---

雅虎军规是主要，尽可能并行，dns查询是很费时间的，所以有可能的话要提前欲取，

<link rel="dns-prefetch" href="//widget.foo.com">

比如这样，还有要注意css也是很影响性能的，他需要有以下的知识，1.永远不要从一个固定/资源域名提供
服务 因为这会引起DNS查询并进一步延迟渲染。 因为当网站访问量大的时候，将不得不有些资源在不同的子域名，2.先提供服务，让浏览器先忙着
3.合并他，让他只需要一个http请求，
4.压缩并简化他，让所占空间尽可能少
5.缓存他的一切，不要让再次请求重复的资源
还有一些很细的解决办法，使用JPGs，还有谷歌现在用的比较新的webp技术，这些都是优化图片的一个好的方式，当然最好的方式不用图片，如今css3和html5的出现，使得用代码写图片成为了可能。

---

css sprites的好处自然不用多说可以减少http请求，但是他也是有一些副作用的
1.在合成一张图之后，如果一张图片发生变化，那么里面的整个图片都要发生变化，当然好的设计师会单独保存每个图片的信息，进行重新合成就行了，但是这远没有切图来的方便。
2.项目在改变图片的位置的时候，大型的sprite会导致无尽的测试和图片状态的重新摆放，
3.有些人滥用会把背景图片也当作sprite使用，会对文档的语义化产生影响，降低html的alt和title潜在益处。

---

可以说是处处有性能问题，最常见的css选择器的写法，也存在一些性能问题，让css选择器尽快的找到要渲染的特定样式，
比如这样的代码

#social a {…}

浏览器会定位到social下所有的a选择器，如果是大量的a标签的话，这样就会渲染到太多我们不需要的元素了，现在我们可以看看关键选择器，在我们使用组合选择器的时候，其实有时候远不如其中的关键选择器来的有效，所以我们要简化css选择器的书写，只要能让浏览器更快的找到要渲染的元素，我们为了让浏览器找到特定的元素，会写出这样的代码

html body .wrapper #content a {}

这样非常的不好，浏览器会找我们每个选择器下的所有标签，这里写的太多了，我们说选择器最多不要超过三个，根据具体代码我们修改成这样：

#nav a {}

这样就很符合我们的要求了，我们删除我们不必要的限制，来使我们的选择器更加的简单和高效，