性能之前端篇循环优化在多重嵌套循环的程序上,如果能分出出多个独立循环也比嵌套在一个循环体内来的更有益 。
优化循环的3种方式:减少每次迭代的开销、减少迭代的次数或者重新设计应用程序 。
在测试的时候仅可能模拟真实环境:如低端机器和低速网络 。
文章插图
?
Ajax优化对于连续页面之间的差别很小的应用而言,使用Ajax技术能带来显著的改善 。
?
减少重绘在html页面完成展现之后,动态改变页面元素或调整css样式都会引起浏览器重绘,性能的损耗直接取决于动态改变的范围:如果只是改变一个元素的颜色之类的信息则只会重绘该元素;而如果是增删节点或调整节点位置则会引起其兄弟节点也一并重绘 。
减少重绘并不是说不要重绘,而是要注意重绘范围:
- 改动的DOM元素越深则影响越小,所以尽量深入节点改动;
- 对某些DOM样式有多重变动尽量合并到一起修改;
<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">......