高端网站Html 5前端性能优化指南。

高端网站Html 5前端性能同样需要优化,主要有PC优化手段在Mobile侧同样适用、在Mobile侧我们提出三秒种渲染完成首屏指标、基于第二点,首屏加载3秒完成或使用Loading等优化方法,下面和小编一起看看吧。

概述

高端网站Html 5前端性能优化指南

  1. PC优化手段在Mobile侧同样适用

  2. 在Mobile侧我们提出三秒种渲染完成首屏指标

  3. 基于第二点,首屏加载3秒完成或使用Loading

  4. 基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB

  5. Mobile侧因手机配置原因,除加载外渲染速度也是优化重点

  6. 基于第五点,要合理处理代码减少渲染损耗

  7. 基于第二、第五点,所有影响首屏加载和渲染的代码应在处理逻辑中后置

  8. 加载完成后用户交互使用时也需注意性能

[加载优化]

加载过程是最为耗时的过程,可能会占到总耗时的80%时间,因此是优化的重点

减少HTTP请求

因为手机浏览器同时响应请求为4个请求(AndROId支持4个,iOS 5后可支持6个),所以要尽量减少页面的请求数,首次加载同时请求数不能超过4个。

a)合并CSS、Javascript
b)合并小图片,使用雪碧图

缓存

使用缓存可以减少向服务器的请求数,节省加载时间,所以所有静态资源都要在服务器端设置缓存,并且尽量使用长Cache(长Cache资源的更新可使用时间戳)

a) 缓存一切可缓存的资源
b) 使用长Cache(使用时间戳更新Cache)
c) 使用外联式引用CSS、JavaScript

压缩HTML、CSS、JavaScript

减少资源大小可以加快网页显示速度,所以要对HTML、CSS、JavaScript等进行代码压缩,并在服务器端设置GZip。

a) 压缩(例如,多余的空格、换行符和缩进)
b) 启用GZip

无阻塞

写在HTML头部的JavaScript(无异步),和写在HTML标签中的Style会阻塞页面的渲染,因此CSS放在页面头部并使用link方式引入,避免在HTML标签中写Style,JavaScript放在页面尾部或使用异步方式加载。

使用首屏加载

首屏的快速显示,可以大大提升用户对页面速度的感知,因此应尽量针对首屏的快速显示做优化。

按需加载

将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载,可以大大提升重要资源的显示速度和降低总体流量。

PS:按需加载会导致大量重绘,影响渲染性能

a) LazyLoad
b) 滚屏加载
c) 通过Media Query加载

预加载

大型重资源页面(如游戏)可使用增加Loading的方法,资源加载完成后再显示页面。但Loading时间过长,会造成用户流失。

对用户行为分析,可以在当前页加载下一页资源,提升速度。

a) 可感知Loading(如进入空间游戏的Loading)
b) 不可感知的Loading(如提前加载下一页)

压缩图片

图片是最占流量的资源,因此尽量避免使用他,使用时选择最合适的格式(实现需求的前提下,以大小判断),合适的大小,然后使用智图压缩,同时在代码中用Srcset来按需显示。

PS:过度压缩图片大小影响图片显示效果

a) 使用智图( http://zhitu.tencent.com/ )
b) 使用其它方式代替图片(1. 使用CSS3 2. 使用SVG 3. 使用IconFont)
c) 使用Srcset
d) 选择合适的图片(1. webP优于JPG 2. PNG8优于GIF)
e) 选择合适的大小(1. 首次加载不大于1014KB 2. 不宽于640(基于手机屏幕一般宽度))

减少Cookie

cookie会影响加载速度,所以静态资源域名不使用Cookie。

避免重定向

重定向会影响加载速度,所以在服务器正确设置避免重定向。

异步加载第三方资源

第三方资源不可控会影响页面的加载和显示,因此要异步加载第三方资源。

[脚本执行优化]

脚本处理不当会阻塞页面加载、渲染,因此在使用时需当注意:

CSS写在头部,JavaScript写在尾部或异步。

避免图片和iFrame等的空Src,空Src会重新加载当前页面,影响速度和效率。

尽量避免重设图片大小。

重设图片大小是指在页面、CSS、JavaScript等中多次重置图片大小,多次重设图片大小会引发图片的多次重绘,影响性能。

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

[CSS优化]

尽量避免写在HTML标签中写Style属性

避免CSS表达式

CSS表达式的执行需跳出CSS树的渲染,因此请避免CSS表达式。

移除空的CSS规则

空的CSS规则增加了CSS文件的大小,且影响CSS树的执行,所以需移除空的CSS规则。

正确使用DISPlay的属性

Display属性会影响页面的渲染,因此请合理使用。

a) display:inline后不应该再使用width、height、margin、padding以及float
b) display:inline-block后不应该再使用float
c) display:block后不应该再使用vertical-align
d) display:table-*后不应该再使用margin或者float

不滥用Float

Float在渲染时计算量比较大,尽量减少使用。

不滥用Web字体

Web字体需要下载,解析,重绘当前页面,尽量减少使用。

不声明过多的Font-size

过多的Font-size引发CSS树的效率。

值为0时不需要任何单位

为了浏览器的兼容性和性能,值为0时不要带单位。

标准化各种浏览器前缀

a) 无前缀应放在最后
b) CSS动画只用 (-webkit- 无前缀)两种即可
c) 其它前缀为 -webkit- -moz- -ms- 无前缀 四种,(-o-Opera浏览器改用blink内核,所以淘汰)

避免让选择符看起来像正则表达式

高级选择器执行耗时长且不易读懂,避免使用。

[JavaScript执行优化]

减少重绘和回流

a) 避免不必要的Dom操作
b) 尽量改变Class而不是Style,使用classList代替className
c) 避免使用document.write
d) 减少drawImage

缓存Dom选择与计算

<br data-style="margin:0px;padding:0px;max-width:100

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/217892.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
重蔚的头像重蔚管理团队
上一篇 2023年2月14日 01:40
下一篇 2023年2月14日 01:40

相关推荐

  • 分享jQuery如何获取表格已勾选checkbox的索引。

    jQuery 是一个流行的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画以及 Ajax 等 Web 开发常见任务,在 jQuery 中获取 HTML 元素是其基础功能之一,以下是一些基本的方法来使用 jQuery 获取 HTML 内容。 …

    2024年6月23日
    00
  • 关于如何用html制作贪吃蛇皮肤。

    贪吃蛇是一款经典的小游戏,它的玩法简单,但却能让人沉迷其中,在HTML中制作贪吃蛇需要使用JavaScript来实现游戏的逻辑和交互,下面是详细的技术教学,帮助你在HTML中制作贪吃蛇。 (图片来源网络,侵删) 1、创建…

    2024年6月25日
    00
  • 分享用html如何表示字体粗细。

    在HTML中,我们无法直接设置字体的粗细,我们可以使用CSS(级联样式表)来设置字体的粗细,CSS是一种样式表语言,用于描述HTML或XML(包括各种XML方言,如SVG、MathML或XHTML)文档的呈现。 (图片来源网络,侵删)…

    2024年6月24日
    00
  • 教你html如何给文字加个框边框。

    在HTML中,给文字加个框可以使用<div>标签和CSS样式来实现,下面将详细介绍如何给文字加个框的操作步骤和相关技术教学。 (图片来源网络,侵删) 我们需要使用<div>标签来创建一个容器,然后将要加框的…

    2024年6月24日
    00
  • 分享html如何换字体。

    在HTML中,可以通过使用CSS(层叠样式表)来更改字体,下面将详细介绍如何在HTML中使用CSS来更改字体。 (图片来源网络,侵删) 1、内部样式表 可以在HTML文档的<head>部分使用<style>标签来定义内部样…

    2024年6月25日
    00
  • html网页如何嵌入php。

    在HTML网页中嵌入PHP代码,可以让我们创建动态的网页内容,以下是详细的技术教学,帮助您了解如何在HTML中嵌入PHP代码。 (图片来源网络,侵删) 1. 准备工作 确保您的服务器支持PHP,并且已经正确安装和配置了PHP…

    2024年6月23日
    00
  • 教你html中获取当前日期。

    要抓取今日汇率,可以使用Python的requests库和BeautifulSoup库来实现,以下是详细的技术教学: (图片来源网络,侵删) 1、确保已经安装了Python环境,如果没有安装,可以从官网下载并安装:https://www.python.or…

    2024年6月25日
    01
  • 关于如何用html制作一个二维码。

    在HTML中制作一个二维码,通常需要借助第三方的JavaScript库,这里我们将使用名为“qrcode”的库来生成二维码,以下是详细的步骤: (图片来源网络,侵删) 1、你需要在你的HTML文件中引入“qrcode”库,你可以从它的Gi…

    2024年6月26日
    00

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息