第一步:加载优化

  1. 减少HTTP请求。

    因为手机浏览器同时响应请求为4个请求(Android支持4个,iOS 5后可支持6个),所以要尽量减少页面的请求数,首次加载同时请求数不能超过4个。a) 合并CSS、JavaScript;b) 合并小图片,使用雪碧图(CSS SPRITE);

  2.  

    缓存。

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

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

  3.  

    压缩HTML、CSS、JavaScript

    减少资源大小可以加快网页显示速度,所以要对HTML、CSS、JavaScript等进行代码压缩,并在服务器端设置GZip。a) 压缩(例如,多余的空格、换行符和缩进);b) 启用GZip;

  4.  

    确保无阻塞

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

  5.  

    使用首屏加载

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

  6.  

    按需加载

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

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

  7.  

    预加载

    大型重资源页面(如游戏)可使用增加Loading的方法,资源加载完成后再显示页面。但Loading时间过长,会造成用户流失。对用户行为分析,可以在当前页加载下一页资源,提升速度;a) 可感知Loading(如进入空间游戏的Loading);b) 不可感知的Loading(如提前加载下一页);

  8.  

    压缩图片

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

    a) 使用智图(雪碧图);

    b) 使用其它方式代替图片(1. 使用CSS3 2. 使用SVG 3. 使用IconFont);

    c) 使用Srcset;

    d) 选择合适的图片(1. webP优于JPG 2. PNG8优于GIF);

    e) 选择合适的大小(1. 首次加载不大于1014KB 2. 不宽于640(基于手机屏幕一般宽度));

    减少Cookie、避免重定向以及异步加载第三方资源

  9. 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以及floatb) display:inline-block后不应该再使用floatc) display:block后不应该再使用vertical-alignd) 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选择与计算。

    每次Dom选择都要计算,缓存它

    · 缓存列表.length。

    每次.length都要计算,用一个变量保存这个值

    · 尽量使用事件代理,避免批量绑定事件

    · 尽量使用ID选择器。

    ID选择器是最快的

    · TOUCH事件优化

    使用touchstart、touchend代替click,因快影响速度快。但应注意Touch响应过快,易引发误操作

    第五步:渲染优化

    HTML使用Viewport

    Viewport可以加速页面的渲染,请使用以下代码<meta name=”viewport” content=”width=device-width, initial-scale=1″>

    · 减少Dom节点

    Dom节点太多影响页面的渲染,应尽量减少Dom节点

    · 动画优化

    a) 尽量使用CSS3动画b) 合理使用requestAnimationFrame动画代替setTimeoutc) 适当使用Canvas动画 5个元素以内使用css动画,5个以上使用Canvas动画(iOS8可使用webGL)

    · 高频事件优化

    Touchmove、Scroll 事件可导致多次渲染a) 使用requestAnimationFrame监听帧变化,使得在正确的时间进行渲染b) 增加响应变化的时间间隔,减少重绘次数

    · GPU加速。

    CSS中以下属性(CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video)来触发GPU渲染,请合理使用(PS:过渡使用会引发手机过耗电增加)

  1. 减少HTTP请求。

    因为手机浏览器同时响应请求为4个请求(Android支持4个,iOS 5后可支持6个),所以要尽量减少页面的请求数,首次加载同时请求数不能超过4个。a) 合并CSS、JavaScript;b) 合并小图片,使用雪碧图(CSS SPRITE);

  2.  

    缓存。

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

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

  3.  

    压缩HTML、CSS、JavaScript

    减少资源大小可以加快网页显示速度,所以要对HTML、CSS、JavaScript等进行代码压缩,并在服务器端设置GZip。a) 压缩(例如,多余的空格、换行符和缩进);b) 启用GZip;

  4.  

    确保无阻塞

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

  5.  

    使用首屏加载

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

  6.  

    按需加载

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

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

  7.  

    预加载

    大型重资源页面(如游戏)可使用增加Loading的方法,资源加载完成后再显示页面。但Loading时间过长,会造成用户流失。对用户行为分析,可以在当前页加载下一页资源,提升速度;a) 可感知Loading(如进入空间游戏的Loading);b) 不可感知的Loading(如提前加载下一页);

  8.  

    压缩图片

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

    a) 使用智图(雪碧图);

    b) 使用其它方式代替图片(1. 使用CSS3 2. 使用SVG 3. 使用IconFont);

    c) 使用Srcset;

    d) 选择合适的图片(1. webP优于JPG 2. PNG8优于GIF);

    e) 选择合适的大小(1. 首次加载不大于1014KB 2. 不宽于640(基于手机屏幕一般宽度));

  9.  

    减少Cookie、避免重定向以及异步加载第三方资源

    Cookie会影响加载速度,所以静态资源域名不使用Cookie。此外,重定向也会影响加载速度,所以在服务器正确设置避免重定向。最后,第三方资源不可控会影响页面的加载和显示,因此要异步加载第三方资源。

HTML页面优化的更多相关文章

  1. [课程设计]Scrum 3.2 多鱼点餐系统开发进度(页面优化&下单详细信息页面)

    Scrum 3.2 多鱼点餐系统开发进度(页面优化&下单详细信息页面)  1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选 ...

  2. 高效率http页面优化法则一【JS对DOM的操作】

    高效http页面优化法则一很多人都认为JS的效率太慢了,都不愿意用js来实现相对困难一点的程序逻辑.在这里我要说的是其实js的效率并不慢,慢的是DOM,如果操作好DOM,你的js效率将提高接近千倍(这 ...

  3. Scrum 3.2 多鱼点餐系统开发进度(页面优化&下单详细信息页面)

    Scrum 3.2 多鱼点餐系统开发进度(页面优化&下单详细信息页面)  1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选 ...

  4. 本人为项目组制定的一份页面优化指南(easyui页面优化方案)

    #本人为项目组制定的一份页面优化指南(easyui页面优化方案) ##背景 这是一篇我之前为项目组制定的页面优化指南,主要是面向表单页面,典型的像[注册用户](https://passport.cnb ...

  5. 网站页面优化必然趋势—WebP 图片!

    本文梗概:众所周知,浏览器可以通过 HTTP 请求的 Accpet 属性 来指定接收的内容类型.依靠这个技术,可以在不修改任何 HTML/CSS 或者图片的情况下,向浏览器提供优化的图片,从而降低带宽 ...

  6. 页面优化,谈谈重绘(repaint)和回流(reflow)

    一.前言 偶尔在面试过程中遇到过重汇与回流reflow的问题,毕竟页面优化也是考核一个开发者能力的关键之一,上篇文章聊了下documentfragment也是为了减轻回流问题,那么本篇文章好好介绍下重 ...

  7. 前端开发工程师 - 04.页面架构 - CSS Reset & 布局解决方案 & 响应式 & 页面优化 &规范与模块化

    04.页面架构 第1章--CSS Reset 第2章--布局解决方案 居中布局 课堂交流区 水平列表的底部对齐 如图所示,一个水平排列的列表,每项高度都未知,但要求底部对齐,有哪些方法可以解决呢? & ...

  8. Linux(7)- Nginx.conf主配置文件、Nginx虚拟主机/访问日志/限制访问IP/错误页面优化、Nginx反向代理、Nginx负载均衡

    一.Nginx.conf主配置文件 Nginx主配置文件conf/nginx.conf是一个纯文本类型的文件,整个配置文件是以区块的形式组织的.一般,每个区块以一对大括号{}来表示开始与结束. 核心模 ...

  9. PHP.31-TP框架商城应用实例-后台7-商品会员修改-页面优化,多表数据更新

    商品表修改功能 1.页面优化,类似添加页面 <layout name="layout" /> <div class="tab-div"> ...

  10. web前端页面优化——个人见解

    web前端页面优化,我们从JavaScript.css.html这3个方面说下,我的见解,希望大神们能有刚好优化方法,一起探讨. 一.  有关javascript方面 优化见解. 1. 首先举个例子: ...

随机推荐

  1. python 学习(二)--关于类

    1.没有权限控制,在类方法或变量前加 "__" 两下划线,则变为"私有"变量(实际通过_<类名>__<变量或方法名> 可以访问) 2.类 ...

  2. Bootstrap栅格系统详解,响应式布局

    Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...

  3. Codeforces 731C:Socks(并查集)

    http://codeforces.com/problemset/problem/731/C 题意:有n只袜子,m天,k个颜色,每个袜子有一个颜色,再给出m天,每天有两只袜子,每只袜子可能不同颜色,问 ...

  4. java.sql.SQLException: ORA-00972: 标识符过长

    经仔细检查,发现sql语句其中两个字段之间没有逗号!

  5. Spring MVC上传文件

    Spring MVC上传文件 1.Web.xml中加入 <servlet> <servlet-name>springmvc</servlet-name> <s ...

  6. HDU 1525 Euclid's Game 博弈

    Euclid's Game Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  7. CentOS 7.2.1511编译安装Nginx1.10.1+MySQL5.6.33+PHP5.6.26

    准备篇 一.防火墙配置 CentOS 7.x默认使用的是firewall作为防火墙,这里改为iptables防火墙. 1.关闭firewall: systemctl stop firewalld.se ...

  8. [转]Meta http-equiv属性详解

    http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变 ...

  9. TFS二次开发、C#知识点、SQL知识总结目录

    TFS二次开发系列 TFS二次开发系列:一.TFS体系结构和概念 TFS二次开发系列:二.TFS的安装 TFS二次开发系列:三.TFS二次开发的第一个实例 TFS二次开发系列:四.TFS二次开发Wor ...

  10. Reactor事件驱动的两种设计实现:面向对象 VS 函数式编程

    Reactor事件驱动的两种设计实现:面向对象 VS 函数式编程 这里的函数式编程的设计以muduo为例进行对比说明: Reactor实现架构对比 面向对象的设计类图如下: 函数式编程以muduo为例 ...