前端性能优化建议

前言：

一说到性能优化，大家都不约而同的想起了雅虎的军规，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完事儿，这就是本小白总结的一点点小经验啦～

以上就是前端性能优化建议的详细内容，更多关于前端性能优化的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • jQuery按需加载轮播图(web前端性能优化)

    jQuery按需加载轮播图(web前端性能优化)

    引言 关于幻灯轮播图,想必大家都不陌生,尤其是基于 jQuery 的,插件.代码网上一搜一大堆,但是真正符合自己需求的几乎没有,所以我要打造一个符合自身需求,经得起广大网民考验的 jQuery 轮播图! 思路 为什么说网上其他一些轮播图不符合我的要求?我的需求又是什么呢? 现在网上可以找到的多数幻灯轮播图的 jQuery 插件的作法是,先把图片和链接的 HTML 写好,然后控制隐藏和显示来轮流展示当前的幻灯图片.但是对用户而言,我们始终只是看到当前的一张图片,那其他几张隐藏的图片为什么要事先加载

  • 前端性能优化及技巧

     前言        为什么要优化性能对于前端工程师如此重要 在行业内有句话不知道大家有没有听说过,'懂得性能优化并且研究过jquery源代码的人和不懂得性能优化写出来的代码对于性能的消耗会相差上百倍甚至上千倍',现在的javascript属于从ECMAscript3到ECMAscript5以及ECMAscript6的一个过渡的过程.在javascript的编写不健全的时候编写代码方法不得当,引起的问题也是不容忽视的. 性能优化 下面将自己对于性能优化的一些见解与大家分享: 1.精灵图     

  • 提高Web性能的前端优化技巧总结

    这篇文章讲述可以帮助 改善优化前端的技术,非常有用.主要内容有清理代码.压缩图片.压缩外部资源.使用CDN,以及一些其它方法.这些方法会为你的网站带显著的速度提升和整体性能提升. 一. 清理 HTML 文档 HTML,即超文本标记语言,几乎是所有网站的支柱.HTML 为网页带来标题.子标题.列表和其它一些文档结构的格式.在最近更新的 HTML5 中,甚至可以创建图表. HTML 很容易被网络爬虫识别,因此搜索引擎可以根据网站的内容在一定程度上实时更新.在写 HTML 的时候,你应该尝试让它 简洁

  • 网站前端和后台性能优化的34条宝贵经验和方法

    1 减少HTTP请求数量 (Minimize HTTP Requests) tag:content 80%的用户响应时间被花费在前端,而这其中的绝大多数时间是用于下载页面中的图片.样式表.脚本以及Flash这些组件.减少这些组件的数量就可以减少展示页面所需的请求数,而这是提高网页响应速度的关键. 朴素的页面设计当然是减少组件的一种途径,但有没有能兼顾丰富的页面内容和快速的响应速度的方法呢?下面就是一些不错的技巧,能在提供丰富的页面展现的同时,减少Http请求数量: 合并文件,通过把所有脚本置于一

  • WEB前端性能优化的7大手段详解

    减少请求数量 合并 如果不进行文件合并,有如下3个隐患 1.文件与文件之间有插入的上行请求,增加了N-1个网络延迟 2.受丢包问题影响更严重 3.经过代理服务器时可能会被断开 但是,文件合并本身也有自己的问题 1.首屏渲染问题 2.缓存失效问题 所以,对于文件合并,有如下改进建议 1.公共库合并 2.不同页面单独合并 图片处理 1.雪碧图 CSS雪碧图是以前非常流行的技术,把网站上的一些图片整合到一张单独的图片中,可以减少网站的HTTP请求数量,但是当整合图片比较大时,一次加载比较慢.随着字体图

  • 写给前端工程师的Web前端性能优化的10点建议

    1. 减少HTTP请求 在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出. 一个正常HTTP请求的流程简述:如在浏览器中输入"www.xxxxxx.com"并按下回车,浏览器再与这个URL指向的服务器建立连接,然后浏览器才能向服务器发送请求信息,服务器在接受到请求的信息后再返回相应的信息,浏览器接收到来自服务器的应答信息后,对这些数据解释执行. HTTP协议是无状态的应用层协议,意味着每次HTTP请求都需要建立通信链路.进

  • webpack学习教程之前端性能优化总结

    webpack学习教程之前端性能优化总结

    前言 曾几何时,我们是如上图的方式引入JS资源的,相信现在很少遇见了.近年来Web前端开发领域朝着规范开发的方向演进.体现在以下两点: 1.MVC研发构架.多多益处(逻辑清晰,程序注重数据与表现分离,可读性强,利于规避和排查问题...) 2.构建工具层出不穷.多多益处(提升团队协作,以及工程运维,避免人工处理琐碎而重复的工作) 模块化开发 将前端性能优化理论落地,代码压缩,合并,缓存控制,提取公共代码等 其他的还包括比如你可以用ES 6 或CoffeeScript写源码,然后构建出浏览器支持的E

  • 前端性能优化建议

    前言: 一说到性能优化,大家都不约而同的想起了雅虎的军规,2-5-8原则,3秒的首屏准则等等,这些规则在开发中虽然不是强制要求的,但是为了追求页面性能的完美体验,就不得不对代码进行修改和优化. 下面就与大家一同分享一下我了解的一些性能优化指标: 一．加载优化 1. 减少HTTP请求:尽量减少向服务器发送的请求数,节省网络资源,所有静态资源都要放在服务器端并设置缓存,并且要尽量使用长缓存. 2. 压缩代码:减少资源大小可加快网页的显示速度,对代码进行压缩,并在服务器开启Gzip 3. 无阻塞:头部

  • 利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)

    利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)

    背景 我们经常使用 Chrome Dev Tools 来开发调试,但是很少知道怎么利用它来分析页面性能,这篇文章,我将详细说明怎样利用 Chrome Dev Tools 进行页面性能分析及性能报告数据如何解读. 分析面板介绍 上图是 Chrome Dev Tools 的一个截图,其中,我认为能用于进行页面性能快速分析的主要是图中圈出来的几个模块功能,这里简单介绍一下: Network : 页面中各种资源请求的情况,这里能看到资源的名称.状态.使用的协议(http1/http2/quic...).

  • vue前端性能优化之预加载和懒加载示例详解

    目录 预加载 图片预加载 JS预加载 js的加载方式 preload prefetch Preload & Prefetch 的区别 不同资源加载的优先级规则 懒加载 图片懒加载 路由懒加载 组件懒加载 最后 预加载 预加载简单来说就是将所有所需的资源提前请求加载到本地,这样后面在需要用到时就直接从缓存取资源:我们使用该技术预先告知浏览器,等下某些资源可能要被使用,先把资源下载下来,不要等使用的时候再下载,可以看出这样的加载技术会增加服务器的压力,但是用户的体验会比较好,因为可以较快的看到后面的

  • C#中Span相关的性能优化建议

    目录 引言 什么是Span 关于String的一段性能提升 测试代码 最终性能对比 写在最后 引言 C# 是一门现代化的编程语言,与Java十分的相似.熟练的开发者甚至能三天无缝切换到Java.生态性能也是遍地开花.今天, 让我们来学习一下C#中的Span相关的性能优化吧 什么是Span System.Span 是在 .NET 中发挥关键作用的新值类型.使用它,可以表示任意内存的相邻区域,无论相应内存是与托管对象相关联,还是通过互操作由本机代码提供,亦或是位于堆栈上.除了具有上述用途外,它仍能确

  • oracle 性能优化建议小结

    原则一:注意WHERE子句中的连接顺序: ORACLE采用自下而上的顺序解析WHERE子句,根据这个原理,表之间的连接必须写在其他WHERE条件之前, 那些可以过滤掉最大数量记录的条件必须写在WHERE子句的末尾. 尤其是"主键ID=?"这样的条件. 原则二: SELECT子句中避免使用 ' * ': ORACLE在解析的过程中, 会将'*' 依次转换成所有的列名, 这个工作是通过查询数据字典完成的, 这意味着将耗费更多的时间 . 简单地讲,语句执行的时间越短越好(尤其对于系统的终端用

随机推荐