前端性能的一些理解

前端性能的一些理解

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

现在我们分析一下可能影响我们网站性能的原因，大家应该都听说过著名的雅虎军规，他提出网站性能优化的34条法则，有兴趣的话应该好好看看。（​​rel="dns-prefetch" href="//widget.foo.com">

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

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

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

#social a {…}

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

html body .wrapper #content a {}

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

#nav a {}

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。