为什么网站打开速度慢?HTML5性能优化的技巧

性能之前端篇循环优化在多重嵌套循环的程序上,如果能分出出多个独立循环也比嵌套在一个循环体内来的更有益 。
优化循环的3种方式:减少每次迭代的开销、减少迭代的次数或者重新设计应用程序 。
在测试的时候仅可能模拟真实环境:如低端机器和低速网络 。

为什么网站打开速度慢?HTML5性能优化的技巧

文章插图
 
?
Ajax优化对于连续页面之间的差别很小的应用而言,使用Ajax技术能带来显著的改善 。
?
减少重绘在html页面完成展现之后,动态改变页面元素或调整css样式都会引起浏览器重绘,性能的损耗直接取决于动态改变的范围:如果只是改变一个元素的颜色之类的信息则只会重绘该元素;而如果是增删节点或调整节点位置则会引起其兄弟节点也一并重绘 。
减少重绘并不是说不要重绘,而是要注意重绘范围:
  1. 改动的DOM元素越深则影响越小,所以尽量深入节点改动;
  2. 对某些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>避免脚本阻塞加载当浏览器在解析常规的script标签时,它需要等待script下载完毕,再解析执行,而后续的HTML代码只能等待 。CSS文件引入要放在头部,因为这是HTML渲染必备元素 。
为了避免阻塞加载,应把脚本放到文档的末尾,而CSS是需要放在头部的!
<head><link rel="stylesheet" href=https://www.isolves.com/it/cxkf/yy/html5/2019-08-09/"common.css">......避免节点深层级嵌套深层级嵌套的节点在初始化构建时往往需要更多的内存占用,并且在遍历节点时也会更慢些,这与浏览器构建DOM文档的机制有关 。浏览器会把整个HTML文档的结构存储为DOM“树”结构 。当文档节点的嵌套层次越深,构建的DOM树层次也会越深 。
如下代码,完全能够去掉
或其中一个标签 。<div> <span> <label>嵌套</label> </span></div>页面缓存
通常不设置缓存的情况下,每次刷新页面都会重新读取服务器的文件,而如果设置缓存之后,所有文件都可以从本地取得,这样明显极大提高了页面效率 。
我们可以通过设置页面头的expires来定义页面过期时间,将过期时间定久一点就达到了“永久”缓存 。
<meta http-equiv="expires" content="Sunday 26 October 2099 01:00 GMT" />当然,如果你的项目代码有变更,因为客户端缓存了文件就得不到最新的文件,势必造成显示错误 。基于这个问题的解决方案就是给链接文件加一个时间戳,如果时间戳有变化,浏览器会认为是新文件,就会向服务器请求最新文件 。
<script src=https://www.isolves.com/it/cxkf/yy/html5/2019-08-09/"example2014-6-17.js">//如果是JSP,可以用EL表达式来取时间戳信息,这样管理更加方便//或者这样的写法更优秀:压缩合并文件所有涉及到请求数据的文件尽量做压缩,比如Javascript文件、css文件及图片文件,特别是图片文件,如果没有高清晰要求,完全可以压缩后再使用 。
数量少体积大的文件要比数量多体积小的文件加载速度快,所以有时候可以考虑将多个js文件、多个css文件合并在一起 。
除此之外减少HTML文档大小还可以采取下面几种方法:
  1. 删掉HTM文档对执行结果无影响的空格空行和注释
  2. 避免Table布局
  3. 使用HTML5 ### HTML+CSS3+Javascript各司其职 让三元素各司其职才能做出高性能的网页:HTML是页面之本也是内容之源,有了它就能跟CSS和Javascript交互;CSS3可以说是展现大师,而且日渐强大的CSS能代替Javascript做很多动态的事情如渐变、移动等动态效果;Javascript是动态数据之王,旧浏览器依靠js来完成动态效果展现,但现在的CSS也能完成js的工作,所以尽量将工作交给css,这样会获得更好的性能 。(这个说得有点大)


    推荐阅读