HTML5性能优化(一)
来源:互联网 发布:软件测试第二版pdf 编辑:程序博客网 时间:2024/06/10 18:34
对于前端的同学来说,移动端页面开发的越来越多,为了使用户浏览移动端页面得到更好的体验,移动端页面性能优化势在必行,结合自己做的项目和网上参考的资料,总结如下
1.页面缓存
通常不设置缓存的情况下,每次刷新页面都会重新读取服务器的文件,而如果设置缓存之后,所有文件都可以从本地取得,这样明显极大提高了页面效率。
我们可以通过设置页面头的expires来定义页面过期时间,将过期时间定久一点就达到了“永久”缓存。
<meta http-equiv="expires" content="Sunday 26 October 2099 01:00 GMT" />
2.避免脚本阻塞加载
当浏览器在解析常规的script标签时,它需要等待script下载完毕,再解析执行,而后续的HTML代码只能等待。CSS文件引入要放在头部,因为这是HTML渲染必备元素。为了避免阻塞加载,应把脚本放到文档的末尾,而CSS是需要放在头部的!
<head><link rel="stylesheet" href="common.css">......<script src="example.js"></script></body>
3.HTML+CSS3+Javascript各司其职
随着css的日益强大,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript,如
@keyframes myfirst{from {background: red;}to {background: yellow;}}div{animation: myfirst 5s;-webkit-animation: myfirst 5s; /* Safari 和 Chrome */}
让三元素各司其职才能做出高性能的网页:HTML是页面之本也是内容之源,有了它就能跟CSS和Javascript交互;CSS3可以说是展现大师,而且日渐强大的CSS能代替Javascript做很多动态的事情如渐变、移动等动态效果;Javascript是动态数据之王,旧浏览器依靠js来完成动态效果展现,但现在的CSS也能完成js的工作,所以尽量将工作交给css,这样会获得更好的性能。
4.避免使用Iframe
使用iframe并不会增加同域名下的并行下载数,浏览器对同域名的连接总是共享浏览器级别的连接池,在页面加载过程中iframe元素还会阻塞父文档onload事件的触发。并且iframe是html标签中最消耗资源的标签,它的开销比DIV、SCRIPT、STYLE等DOM高1~2个数量级。
一定好使用的话,避免onload事件被阻塞,可使用JavaScript动态的加载iframe元素或动态设置iframe的src属性
<iframe id="if"></iframe>document.getElementById("if").setAttribute("src","url");
5.避免空链接属性
如
<img src=""/><a href=""></a><a href="#"></a>
这样的设置方式是非常不可取的,即使链接为空,在旧的浏览器也会以固定步骤发送请求信息。
另外
<a href="#"></a><a href="javascript:void();"></a>
也不可取,最好的方式是在链接中加一个空的js代码
<a href="javascript:void();"></a>
6.使用图像的BASE64编码
base64是一串字符串,他可以代表一个图片的所有信息,也就是可以通过<img src="data:image/png;base64,S">
(S表示一串base64码)来显示图片,这种方式不需要再向服务器发送请求,完全由浏览器解析成图片。
目前高级浏览器都支持此功能,但要注意两点:①低版本浏览器(如IE7)不支持;②base64字符串长度随图片的大小及复杂度成正比,base64也像URL一样,也有超出长度的情况(在IE8下很常见)。所以要根据情况来使用。
7.避免节点深层级嵌套
深层级嵌套的节点在初始化构建时往往需要更多的内存占用,并且在遍历节点时也会更慢些,这与浏览器构建DOM文档的机制有关。浏览器会把整个HTML文档的结构存储为DOM“树”结构。当文档节点的嵌套层次越深,构建的DOM树层次也会越深。
如下代码,完全能够去掉<div>
或<span>
其中一个标签。
<div> <span> <label>嵌套</label> </span></div>
8.减少重绘
在HTML页面完成展现之后,动态改变页面元素或调整CSS样式都会引起浏览器重绘,性能的损耗直接取决于动态改变的范围:如果只是改变一个元素的颜色之类的信息则只会重绘该元素;而如果是增删节点或调整节点位置则会引起其兄弟节点也一并重绘。
减少重绘并不是说不要重绘,而是要注意重绘范围:①改动的DOM元素越深则影响越小,所以尽量深入节点改动;②对某些DOM样式有多重变动尽量合并到一起修改。
以改变一个<a>
标签的背景色、宽度和颜色为例。
<a href="javascript:void(0);" id="example">传统的代码</a> <script> var example = document.getElementById("example"); example.ondblclick = function() { example.style.backgroundColor = "red"; example.style.width = "200px"; example.style.color = "white"; } </script>
以上会执行3次重绘,而通过CSS代替javascript多次执行则只进行一次重绘。
<style> .dblClick { width: 200px; background: red; color: white; } </style> <a href="javascript:;" id="example">CSS优化的代码</a> <script> var example = document.getElementById("example"); example.ondblclick = function() { example.className = "dblClick"; } </script>
以上就先讲这几个,下篇在写,大家有自己的看法可以在评论区给我留言,大家一起讨论。
- HTML5性能优化(一)
- HTML5性能优化(二)
- HTML5性能优化(三)
- HTML5的性能优化
- 记录HTML5性能优化
- HTML5性能优化
- WM性能优化(一)
- ABAP 性能优化(一)
- SQL性能优化(一)
- jboss性能优化(一)
- Sql性能优化(一)
- MySQL性能优化(一)
- Android 性能优化(一)
- Android性能优化(一)
- Unity3D性能优化(一)
- J2EE性能优化(一)
- java性能优化(一)
- Android性能优化(一)
- java中的静态块
- cent os7安装anaconda和pycharm
- MySQL5.7 添加用户、删除用户与授权
- storm DRPC指南
- CSS中position属性( absolute | relative | static | fixed )详解
- HTML5性能优化(一)
- 2017/8/2java前端一
- Android 懒加载
- 自己开发的网页在跳转至微信公众号文章后,点击微信的返回,无法返回原网页
- 利用while循环录入班级成绩,并且计算avg
- phpmyadmin登录提示mysqli_real_connect(): (HY000/2002): No such file or directory解决
- Java并发ThreadLocal类
- iTween基础之Move(移动)
- JavaScript事件代理和委托(Delegation)