HTML5性能优化（一）

最新推荐文章于 2023-08-11 08:10:17 发布

ImProgrammerBoy

最新推荐文章于 2023-08-11 08:10:17 发布

阅读量1.1k

点赞数 1

分类专栏：博客文章标签：前端 html5 性能优化移动移动端性能优化

本文链接：https://blog.csdn.net/ImProgrammerBoy/article/details/76576985

版权

博客专栏收录该内容

5 篇文章 0 订阅

订阅专栏

对于前端的同学来说，移动端页面开发的越来越多，为了使用户浏览移动端页面得到更好的体验，移动端页面性能优化势在必行，结合自己做的项目和网上参考的资料，总结如下

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="https://img-blog.csdnimg.cn/2022010700305368986.png">（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>

以上就先讲这几个，下篇在写，大家有自己的看法可以在评论区给我留言，大家一起讨论。

ImProgrammerBoy

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5性能优化（一）

对于前端的同学来说，移动端页面开发的越来越多，为了使用户浏览移动端页面得到更好的体验，移动端页面性能优化势在必行，结合自己做的项目和网上参考的资料，总结如下1.页面缓存通常不设置缓存的情况下，每次刷新页面都会重新读取服务器的文件，而如果设置缓存之后，所有文件都可以从本地取得，这样明显极大提高了页面效率。我们可以通过设置页面头的expires来定义页面过期时间，将过期时间定久一点就达到了“永久”
复制链接

扫一扫