全国服务热线:17742004931

您现在的位置是: 首页 > 建站新闻 > 【前端如何进行网站性能优化】前端如何进行网站性能优化

【前端如何进行网站性能优化】前端如何进行网站性能优化

2020-03-08 09:30:00

一、从用户的角度来看:页面加载速度更快,用户体验更好。2。从服务器的角度来看:减少页面请求和请求带宽,可以节省相当多的资源。

优化方法:

页面级别的HTTP请求数量如何?每个请求都有成本:时间成本、资源成本。

DNS寻址与服务器建立连接以发送数据并等待服务器响应接收数据

请求数太大。浏览器需要分批进行,以增加用户的等待时间

一、从设计层面简化页面。如果你的主页和百度的一样简单,下一步就什么都不用了。如果你想变得漂亮--

2、正确设置HTTP缓存可以大大减少HTTP请求

如前所述,浏览器可以请求并发请求,这使得它能够更快地加载资源。但是,当加载外部链脚本时,它将阻塞其他资源。例如,在加载脚本之前,其后面的图片、样式和其他脚本将被阻止,并且在加载脚本之前不会开始加载。如果脚本放在比较的顶部,它将影响整个页面的加载速度,从而影响用户体验。解决这个问题有很多方法。这里有一个更详细的介绍(这里是翻译和更详细的例子)。最简单的方法是尽可能向后移动脚本,以减少对并发下载的影响

随着JavaScript框架的普及,越来越多的网站也在使用这个框架。然而,框架通常包含许多功能,而不是每个页面都需要这些功能。下载不必要的脚本是对资源的浪费-包括带宽和执行时间。目前,有两种方法。一个是为流量非常大的页面定制一个专用的小框架,另一个是lazyload。Yui使用第二种方法。在YUI的实现中,首先只加载核心模块,其他模块只有在需要使用时才能加载。

如果将CSS放在body等其他地方,浏览器可能在下载并解析到CSS之前就已经开始渲染页面,导致页面从没有CSS状态跳到CSS状态,用户体验更差。此外,一些浏览器将在CSS下载完成后开始呈现页面。如果CSS位于底部,浏览器将延迟渲染时间。

对于以目录形式访问的HTTP链接,很多人都会忽略该链接是否在结尾处带“/”。如果您的服务器对此有不同的处理方式,那么您需要注意它。很可能隐藏了301个跳,并添加了额外的请求。详见下图。***个链接以不以“/”结尾的方式访问,因此服务器有一个跳转。

DOM操作是脚本中最消耗性能的操作:添加、删除和查询DOM元素,以及操作DOM集合。如果脚本包含大量的DOM操作,请注意:

每当eval或函数构造函数对字符串表示的源代码执行操作时,脚本引擎需要将源代码转换为可执行代码。这是一个资源密集型操作—通常比简单的函数调用慢100倍以上。Eval函数的效率特别低。由于传递给eval的字符串的内容无法预先知道,eval将解释要在其上下文中处理的代码,即编译器无法优化上下文,因此只有浏览器才能在运行时解释代码。这对性能有重大影响。函数构造函数略优于Eval,因为使用此代码不会影响周围的代码;但是,它仍然很慢。此外,使用Eval和function不利于JavaScript压缩工具执行压缩。

前一篇文章讨论了范围链查找问题,这在循环中需要特别注意。如果需要在循环中访问不在此作用域下的变量,请在遍历前用局部变量缓存该变量,并在遍历后重写该变量,这对全局变量尤为重要,因为全局变量位于作用域链的顶部,搜索次数最多。

JavaScript中的数据访问包括直接数量(字符串、正则表达式)、变量、对象属性和数组。对直接数量和局部变量的访问最快,对对象属性和数组的访问需要更多的开销。当出现以下情况时,建议将数据放入局部变量:A.多次访问任何对象属性B.多次访问任何数组成员。此外,应尽可能减少对象和数组深度搜索。

在JavaScript中使用“+”符号拼接字符串效率低下,因为每次运行都会打开新内存并生成新的字符串变量,然后将拼接结果分配给新变量。相比之下,更有效的方法是使用数组的join方法将需要缝合的字符串放入数组中,***调用join方法得到结果。但是,在使用数组时会有一定的开销,因此当需要拼接许多字符串时,可以考虑使用这种方法。

有关JavaScript优化的更多详细信息,请参阅:writeefficient JavaScript(PPT)efficient JavaScript

在大多数人看来,浏览器对CSS选择器的解析是从左到右的,例如

对于这样的选择器,如果从右向左解析,效率会非常高,因为***个ID选择基本上限制了搜索的范围,但实际上,浏览器是从右向左解析选择器的。像上面的选择器一样,浏览器必须遍历以找到每个a标记的祖先节点,这并不像以前所认为的那样高效。根据浏览器的行为特点,编写选择器时需要注意的事项很多。有人列出了11个。详情请参阅此处。

现在越来越多的人开始关注HTML本身的优化。详情请参阅本文摘要。

图像压缩是一项技术性的工作,但目前在这个领域有很多工具。压缩后,往往会带来很好的效果。具体的压缩原理和方法在Evan-faster网站的第10章中有详细的描述。如果你感兴趣的话,可以看看。

本文从页面级和代码级两个粒度总结了前端优化的各种方法。这些方法基本上可以供前端开发人员在开发过程中参考和实践。另外,一个完整的前端优化还应该包括很多其他的方式,比如CDN、gzip、多域名、无cookie服务器等,因为对于开发者来说可操作性不强,所以我们这里就不谈了。

JUST FOR YOU

一个网站一千种风格,一个用户一千个哈姆雷特

优帮云企业快速建站让全国中小企业更好、更快拥有企业品牌官网

立即建站
优帮云

致力于网站建设,改变企业营销模式

电话咨询 17742004931

联系我们

  • 地 址:杭州市联胜路10号华立云立方
  • 电 话:17742004931 17742004931
  • 联 系:方经理
  • Q Q:2885116112
  • 邮 箱:2885116112@qq.com
微信二维码

扫码关注我们