常见的web前端性能优化
一、
语义化HTML:语义化HTML的好处是可以使代码简洁清晰、支持不同设备、利于搜索引擎、便于团队开发;
减少DOM节点:加速页面渲染;
给图片加上正确的宽高值:这可以减少页面重绘,同时防止图片缩放;
防止src属性和link的href属性为空:当值为空时,浏览器很可能会把当前页面当成其属性值加载;
正确的闭合标签:如避免使用<div/>,浏览器会多一个将它解析成<div\></div\>的过程;
链接为目录或首页的地址后面加”/”,如http://www.baidu.com/;
用LINK而不用@import方式导入样式;
样式放在页头,JS放在页尾;
二、
避免使用 CSS Expressions(CSS表达式):如如background-color: expression( (new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00″ ) ;
避免使用 CSS Filter(CSS滤镜);
使用CSS缩写,减少代码量;
通过CSSSprites把同类图片合成一张,减少图片请求;
减少查询层级:如.header .logo要好过.header .top .logo;
减少查询范围:如.header>li要好过.header li;
避免TAG标签与CLASS或ID并存:如a.top、button#submit;
删除重复的CSS;
三、
尽量少用全局变量;
使用事件代理绑定事件,如将事件绑定在body上进行代理;
避免频繁操作DOM节点;
不使用EVAL;
减少对象查找,如a.b.c.d这种查找方式非常耗性能,尽可能把它定义在变量里;
类型转换:把数字转换成字符串使用”" + 1,浮点数转换成整型使用Math.floor()或者Math.round();
避免对字符串进行循环操作,譬如替换、查找,应使用正则表达式;
删除重复的JS;
四、
尽量合并CSS、JS文件,或将其直接写在页面上,减少HTTP请求;
压缩CSS、JS文件,缩短文件传输时间;避免404错误:特别要避免给404指定一个停摆页面,否则所有404错误都将会加载一次页面;
一般要求减少DNS查询次数,如同一个页面的请求资源尽量少的使用不同的主机名,这可以减少网站并行下载的数量,但很多网站为了加速下载资源其实是特意用了多个主机 名,这里要做一个权衡;
使用CDN加速,使用户从离自己最近的服务器下载文件;
减少Cookie的大小,使用无cookie的域,客户端请求静态文件的时候,减少 Cookie 的反复传输对主域名的影响;
为文件头指定Expires,使内容具有缓存性;
使用gzip压缩内容;
加载方面的优化:
减少HTTP请求。
因为手机浏览器同时响应请求为4个请求(Android支持4个,iOS 5后可支持6个),所以要尽量减少页面的请求数,首次加载同时请求数不能超过4个。a) 合并CSS、JavaScript;b) 合并小图片,使用雪碧图(CSS SPRITE);
缓存。
使用缓存可以减少向服务器的请求数,节省加载时间,所以所有静态资源都要在服务器端设置缓存,并且尽量使用长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) 使用智图(雪碧图);
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以及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
为document.getElementById("myDIV").classList.add("mystyle"); d iv元素添加class
c) 避免使用document.write
d) 减少drawImage
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
img.onload = function(){
//向画布上绘制图片
ctx.drawImage(img,10,10);
}
· 缓存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:过渡使用会引发手机过耗电增加)
常见的web前端性能优化的更多相关文章
- WEB前端性能优化常见方法
1.https://segmentfault.com/a/1190000008829958 (WEB前端性能优化常见方法) 2..https://blog.csdn.net/mahoking/arti ...
- Web前端性能优化全攻略
网页制作poluoluo文章简介:Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多网站无情忽视的技术. Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多 ...
- Web前端性能优化全攻略[转载]
1. 尽量减少 HTTP 请求 (Make Fewer HTTP Requests) 作为第一条,可能也是最重要的一条.根据 Yahoo! 研究团队的数据分析,有很大一部分用户访问会因为这一条而取得最 ...
- 前端进阶(1)Web前端性能优化
前端进阶(1)Web前端性能优化 Web前端性能优化, 不仅能够改善站点的用户体验,并且能够节省相当的资源利用.下面将从1)服务器.2)html内容.3)css. 4)javascript. 5)图片 ...
- web前端性能优化指南(转)
web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络 ...
- Web前端性能优化教程09:图像和Cookie优化
本文是Web前端性能优化系列文章中的第九篇,主要讲述内容:图像和Cookie优化.完整教程可查看: 一. 图像优化 图像基础知识 gif: 适用于动画效果,例如提示的滚动条图案 jpg: 是一种使用 ...
- Web前端性能优化教程06:减少DNS查找、避免重定向
本文是Web前端性能优化系列文章中的第六篇,主要讲述内容:减少DNS查找.避免重定向.完整教程可查看: 一.减少DNS查找 基础知识 DNS(Domain Name System): 负责将域名UR ...
- Web前端性能优化教程08:配置ETag
本文是Web前端性能优化系列文章中的第五篇,主要讲述内容:配置ETag.完整教程可查看:Web前端性能优化 什么是ETag? 实体标签(EntityTag)是唯一标识了一个组件的一个特定版本的字符串, ...
- Web前端性能优化教程05:网站样式和脚本
本文是Web前端性能优化系列文章中的第五篇,主要讲述内容:网站样式和脚本代码的放置位置.使用外部javascript和css.完整教程可查看:Web前端性能优化 一.将样式表放在顶部 可视性回馈的重要 ...
随机推荐
- Java-多线程编程(一)
创建多线程 [Thread class]1.继承Thread类,重写run() [Runnable接口]2.实现Runnable接口,重写run() [*Callable接口]3.实现Callable ...
- 洛谷P4145 上帝造题的七分钟2/花神游历各国 [树状数组,并查集]
题目传送门 题目背景 XLk觉得<上帝造题的七分钟>不太过瘾,于是有了第二部. 题目描述 "第一分钟,X说,要有数列,于是便给定了一个正整数数列. 第二分钟,L说,要能修改,于是 ...
- 德州扑克AI
德州扑克: 1:outs数,就是所听的牌的数量. 例子: 1:听顺子 4567 outs数就是8,能够成顺子的牌为3和8. 5689 outs数就是4,能够成顺子的牌只有7. 2:听同花 35 ...
- java.lang.NegativeArraySizeException
两台android设备发送图片. 发送端: Socket socket = null; try { socket = new Socket(ip, 8888); byte[] bytes = Scre ...
- [Codeforces #188] Tutorial
Link: Codeoforces #188 传送门 A: 先全转为正数,后面就全是指数级增长了 #include <bits/stdc++.h> using namespace std; ...
- JavaScript的深拷贝与浅拷贝
深拷贝和浅拷贝是在面试中经常遇到的问题.今天在这里总结一下. 深拷贝与浅拷贝的问题,涉及到JavaScript的变量类型,先来说说变量的类型,变量类型包括基本类型和引用类型. 基本类型:Undefin ...
- mysql 下 计算 两点 经纬度 之间的距离 含具体sql语句
文章转载地址 http://blog.sina.com.cn/s/blog_7bbfd5fd01017d1e.html 感谢作者. 在原文的基础上,我新增了sql语句,方便大家理解 mysql距离计算 ...
- HDU 5631 Rikka with Graph 暴力 并查集
Rikka with Graph 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5631 Description As we know, Rikka ...
- [转载] Spring3.1 Cache注解
需要感慨一下,spring3.0时丢弃了2.5时的spring-modules-cache.jar,致使无法使用spring来方便的管理cache注解,好在3.1.M1中增加了对cache注解的支持, ...
- [Eclipse插件] 安装和使用JD-Eclipse插件
JD-Core 是一个免费的库,从一个或多个“.class”文件中 重构Java源代码.JD-Core可以用来恢复丢失的源代码,并深究Java运行时类库.支持Java 5的功能:如注释,泛型或键入“枚 ...