前端性能优化建议

 更新时间:2020年09月17日 09:03:34   作者:追梦者  
这篇文章主要分享了一些前端性能优化的建议,帮助大家提高页面性能,感兴趣的朋友可以了解下

前言:

一说到性能优化,大家都不约而同的想起了雅虎的军规,2-5-8原则,3秒的首屏准则等等,这些规则在开发中虽然不是强制要求的,但是为了追求页面性能的完美体验,就不得不对代码进行修改和优化。

下面就与大家一同分享一下我了解的一些性能优化指标:

一.加载优化

1. 减少HTTP请求:尽量减少向服务器发送的请求数,节省网络资源,所有静态资源都要放在服务器端并设置缓存,并且要尽量使用长缓存。

2. 压缩代码:减少资源大小可加快网页的显示速度,对代码进行压缩,并在服务器开启Gzip

3. 无阻塞:头部内联的样式和脚本会阻塞页面的渲染,样式放在头部使用link引入,脚本放在尾部并使用异步方式加载。

4. 首屏加载:首屏快速显示可大大的提升用户对页面速度的感知,应尽量针对首屏的快速显示做出相应的优化。

5. 按需加载:将不影响首屏的资源和当前屏幕不使用的资源放到用户需要时才加载,可大幅度提升显示速度和降低总体流量。但是按需加载会导致大量重绘,影响渲染性能。

6. 预加载:大型资源页面可使用Loading,资源加载完成后再显示页面,但是加载时间过长,会造成负体验。

7. 压缩图像:使用图像时选择最合适的格式和大小,然后使用工具压缩,同时在代码中进行图片懒加载。

8. 减少Cookie:Cookie会影响加载速度,所以尽量减少不必要的Cookie。

9. 异步加载第三方资源:第三方资源不可控,会影响页面加载,所以要异步加载第三方资源。

二.执行优化

1.css写在头部,js写在尾部并异步。

2.避免img、iframe等标签的src属性为空:空src会重新加载当前页面,影响速度和效率。

3.尽量避免重置图像大小:多次重置图像大小会引发图像的多次重绘,影响性能。

4.图像尽量避免使用DataURL:DataURL图像没有使用图像压缩算法,文件会变大,并且要解码后再渲染,加载慢耗时长。

三.渲染优化

1.设置Viewport:HTML的viewport可加快页面的渲染。

2.减少DOM结点:DOM结点太多会影响页面的渲染。

3.尽量使用css3动画,合理使用requestAnimationFrame动画代替setTimeout。

4.优化高频事件:scroll、touchmove等事件尽量使用函数防抖节流等进行限制。

四.样式优化

1.避免在HTMl中书写style。

2.避免css表达式:css表达式的执行需要跳出css树的渲染。

3.移除css空规则:css空规则增加了css文件的大小。

4.正确使用display:display会影响页面的渲染。

5.不滥用float:float在渲染时计算量较大,尽量减少使用。

6.不滥用WEB字体:WEB字体需要下载、解析、重绘当前页面,尽量减少使用。

五.脚本优化

1.尽量减少回流和重绘。

2.缓存DOM选择与计算:每次DOM选择都要计算和缓存。

3.缓存.length的值:每次.length计算使用一个变量保存值。

4.尽量使用事件代理:避免批量绑定事件。

5.尽量使用id选择器:id选择器选择元素是最快的。

2-5-8原则

在前端开发中,此规则作为一种开发指导思路,针对浏览器页面的性能优化。

o 用户在2秒内得到响应,会感觉页面的响应速度很快 Fast

o 用户在2~5秒间得到响应,会感觉页面的响应速度还行 Medium

o 用户在5~8秒间得到响应,会感觉页面的响应速度很慢,但还可以接受 Slow

o 用户在8秒后仍然无法得到响应,会感觉页面的响应速度垃圾死了(「此时会有以下四种可能」)

§ 难道是网速不好,发起第二次请求 => 刷新页面

§ 什么垃圾页面呀,怎么还不打开 => 离开页面,有可能转投竞争对手的网站

§ 垃圾程序猿,做的是什么页面啊 => 咒骂开发此页面的程序猿

§ 断网了 => 网线断了?Wi-Fi断了?信号不好?话费用完了?

Ok完事儿,这就是本小白总结的一点点小经验啦~

以上就是前端性能优化建议的详细内容,更多关于前端性能优化的资料请关注脚本之家其它相关文章!

相关文章

  • js保存当前路径(cookies记录)

    js保存当前路径(cookies记录)

    曾经做了一个取消订单的功能。这个功能在个人中心里面有,在订单的详细页面也有。按照正常的思路,这两块都可以提交到相同的action去处理,但是返回的页面是不一样的,都是返回到当前页面就可以了。
    2010-12-12
  • javascript使用递归算法求两个数字组合功能示例

    javascript使用递归算法求两个数字组合功能示例

    这篇文章主要介绍了javascript使用递归算法求两个数字组合功能,结合实例形式分析了JS基于递归算法的数组遍历、判断、转换等相关操作技巧,需要的朋友可以参考下
    2017-01-01
  • JS PHP字符串截取函数实现原理解析

    JS PHP字符串截取函数实现原理解析

    这篇文章主要介绍了JS PHP字符串截取函数实现原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • JavaScript实现点击文字切换登录窗口的方法

    JavaScript实现点击文字切换登录窗口的方法

    这篇文章主要介绍了JavaScript实现点击文字切换登录窗口的方法,涉及javascript操作div层及相关样式的技巧,需要的朋友可以参考下
    2015-05-05
  • 基于JavaScript操作DOM常用的API小结

    基于JavaScript操作DOM常用的API小结

    DOM(Document Object Model)即文档对象模型,针对 HTML 和 XML 文档的 API(应用程序接口)。本篇文章给大家介绍javascript操作dom常用的api小结,对javascript dom api相关知识感兴趣的朋友一起学习吧
    2015-12-12
  • xmlHTTP实例

    xmlHTTP实例

    xmlHTTP实例...
    2006-10-10
  • JS的replace方法详细介绍

    JS的replace方法详细介绍

    replace() 方法的参数 replacement 可以是函数而不是字符串。在这种情况下,每个匹配都调用该函数,它返回的字符串将作为替换文本使用
    2012-11-11
  • stackoverflow常用工具库总结

    stackoverflow常用工具库总结

    这篇文章主要为大家介绍了stackoverflow常用工具库总结,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • ES6入门教程之变量的解构赋值详解

    ES6入门教程之变量的解构赋值详解

    这篇文章主要给大家介绍了关于ES6入门教程之变量的解构赋值的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用ES6具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-04-04
  • JavaScript初学者容易犯的几个错误

    JavaScript初学者容易犯的几个错误

    JavaScript 是对初学者比较友好的一门编程语言,基本上花个半小时看下语法就能写出能运行的代码。JavaScript 是动态脚本语言,对数据类型没有太多的限制,写起来非常灵活。但正因为如此,初学者如果不深入了解语言本身,往往会犯一些错误,从而导致一些很难发现的 bug。
    2021-05-05

最新评论