23条前端性能优化,看懂就够了!!!

2023-05-30 0 521

后端操控性强化是个非常大的研究课题,假如要乌祖埃的说不然,估算八天感慨万千。因此他们就从前述的工程建设应用领域视角起程,聊他们最常邂逅的后端强化问题。

1. 增加HTTP允诺单次

尽可能分拆相片、CSS、JS。比如说加载两个页面,假如有5个css文档不然,那么会收到5次http允诺,这种会让采用者第二次出访你的页面的这时候理事长天数等候。而假如把那个5个文档制备两个不然,就只须要收到一次http允诺,节约互联网允诺天数,大力推进页面的加载。

2. 采用CDN

中文网站上动态天然资源即css、js全被采用cdn递送,相片。

3. 防止空的src和href

当link条码的href特性为空、script条码的src特性为空的这时候,应用领域程序图形的这时候会把现阶段页面的URL做为它的特性值,进而把页面的文档加载进去做为它的值。因此要防止犯这种的疏失。

4. 为文档头选定Expires

Exipres是用以增设文档的已过期天数的,一般对css、js、相片天然资源有效率。 他可以使文档具有内存性,这种山皮再出访反之亦然的天然资源时就通过应用领域程序内存区加载,不须要再收到http允诺。如下表所示范例:

网易博客的那个css文档的Expires天数是2016-5-04 09:14:14.

23条前端性能优化,看懂就够了!!!

5. 采用gzip填充文档

gzip能填充任何两个文档类别的积极响应,包括html,xml,json。大幅增大允诺回到的信息量。

6. 把CSS放到顶端

页面上的天然资源加载时从玩游戏下次序加载的,因此css放到页面的顶端能优先选择图形页面,让采用者觉得页面加载很快。

7. 把JS放到底部

加载js时会对后续的天然资源造成阻塞,必须得等js加载完才去加载后续的文档 ,因此就把js放到页面底部最后加载。

欢迎加入后端直播学习群一起学习交流:512676244

8. 防止采用CSS表达式

举个css表达式的范例

HTML

复制全屏

1

font-color: expression( (new Date()).getHours()%3 ? “#FFFFFF” : “#AAAAAA” );

2

​那个表达式会持续的在页面上计算样式,影响页面的操控性。并且css表达式只被IE支持。

9. 将CSS和JS放到外部文档中

目的是内存文档,可以参考原则4。 但有这时候为了增加允诺,也会直接写到页面里,需根据PV和IP的比例权衡。

10. 权衡DNS查找单次

增加主机名可以节约积极响应天数。但同时,须要注意,增加主机会增加页面中并行下载的数量。

IE浏览器在同一时刻只能从同一域名下载两个文档。当在两个页面显示多张相片时,IE 采用者的相片下载速度就会受到影响。因此网易会搞N个二级域名来放相片。

下面是网易博客的相片域名,他们可以看到他有多个域名,这种可以保证这些不同域名能同时去下载相片,而不用排队。不过假如当采用的域名过多时,积极响应天数就会慢,因为不用积极响应域名天数不一致。

23条前端性能优化,看懂就够了!!!

11. 精简CSS和JS

这里就涉及到css和js的填充了。比如说下表所示面的网易的两个css文档,把空格回车全部去掉,增加文档的大小。现在的填充工具有很多,基本主流的后端构建工具都能进行css和js文档的填充,如grunt,glup等。

12. 防止跳转

有种现象会比较坑爹,看起来没什么差别,其实多次了一次页面跳转。比如说当URL本该有斜杠(/)却被忽略掉时。例如,当他们要出访http://baidu.com 时,前述上回到的是两个包含301代码的跳转,它指向的是 http://baidu.com/(注意末尾的斜杠)。在nginx服务器可以采用rewrite;Apache服务器中可以采用Alias 或者 mod_rewrite或者the DirectorySlash来防止。

另一种是不用域名之间的跳转, 比如说出访http://baidu.com/bbs 跳转到http://bbs.baidu.com/。那么可以通过采用Alias或者mod_rewirte建立CNAME(保存两个域名和另外两个域名之间关系的DNS记录)来替代。

13. 删除重复的JS和CSS

重复调用脚本,除了增加额外的HTTP允诺外,多次运算也会浪费天数。在IE和Firefox中不管脚本是否可内存,它都存在重复运算JavaScript的问题。

14. 配置ETags

它用以判断应用领域程序内存里的元素是否和原来服务器上的一致。比last-modified date更具有弹性,例如某个文档在1秒内修改了10次,Etag可以综合Inode(文档的索引节点(inode)数),MTime(修改天数)和Size来精准的进行判断,避开UNIX记录MTime只能精确到秒的问题。 服务器集群采用,可取后两个参数。采用ETags增加Web应用领域带宽和负载

欢迎加入后端全栈开发交流圈一起学习交流:512676244

15. 可内存的AJAX

异步允诺反之亦然的造成采用者等候,因此采用ajax允诺时,要主动告诉应用领域程序假如该允诺有内存就去允诺内存文档。如下表所示代码片段, cache:true就是显式的要求假如现阶段允诺有内存不然,直接采用内存

HTML

复制全屏

1

$.ajax(

2

{

3

url : url,

4

dataType : “json”,

5

cache: true,

6

success : function(son, status){

7

}

8

16. 采用GET来完成AJAX允诺

当采用XMLHttpRequest时,应用领域程序中的POST方法是两个“两步走”的过程:首先

17. 增加DOM元素数量

这是一门大学问,这里可以引申出一堆强化的细节。想要具体研究的可以看后面推荐书籍。总之大原则增加DOM数量,就会增加应用领域程序的解析负担。

18. 防止404

比如说外链的css、js文档出现问题回到404时,会破坏应用领域程序的并行加载。

19. 增加Cookie的大小

Cookie里面别塞那么多东西,因为每个允诺都得带着他跑。

20. 采用无cookie的域

比如说CSS、js、相片等,客户端允诺动态文档的这时候,增加了 Cookie 的反复传输对主域名的影响。

21. 不要采用滤镜

IE独有特性AlphaImageLoader用于修正7.0以下版本中显示PNG相片的半透明效果。那个滤镜的问题在于应用领域程序加载相片时它会终止文档的呈现并且冻结应用领域程序。在每两个元素(不仅仅是相片)它都会运算一次,增加了内存开支,因此它的问题是多方面的。

完全防止采用AlphaImageLoader的最好方法就是采用PNG8格式来代替,这种格式能在IE中很好地工作。假如你确实须要采用AlphaImageLoader,请采用下划线_filter又使之对IE7以上版本的采用者无效。

22. 不要在HTML中缩放相片

比如说你须要的相片尺寸是50* 50

那就不用用一张500*500的大尺寸相片,影响加载

23. 增大favicon.ico并内存

以上是Yslow的23个强化原则,基本可以涵盖现在后端大部分的操控性强化原则了,很多更加geek和精细强化方法都是从这些原则里面延伸出来的。 具体想了解更多强化细则的童鞋建议去看看下面的一本书,毕竟页数多讲的也细嘛:

高操控性中文网站建设指南(第二版)》,这里面其实就是细化的讲解了上面的23原则。

后端强化是条漫长的路,不是说一天两天就能全部做完的。他们可以参考上面的准则去把他们目前能做的都给强化了,剩下的更加小的一些细节点不用太过着急,毕竟也是要考虑强化性价比的。比如说为了减小两个文档几个字节花上个把月根本不值得。这些强化的东西都可以在他们的工作中慢慢去通过积累,去通过google解决。

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务