前端优化常用技术

最新推荐文章于 2024-08-05 19:45:28 发布

时光之里

最新推荐文章于 2024-08-05 19:45:28 发布

阅读量988

点赞数 1

分类专栏： javascript 文章标签：前端性能优化方案算法流程控制优化避免重排重绘使用闭包缓存数据

本文链接：https://blog.csdn.net/m_review/article/details/83546384

版权

javascript 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

从建立 http 连接开始，到页面展示在浏览器中，一共经过了加载，执行，渲染，重构等几个阶段。

加载

比如：百万级的 PV，并发量过大怎么办？

PV(访问量)：即 Page View，页面刷新一次算一次。也叫并发量。
UV(独立访客)：即 Unique Visitor，一个客户端（电脑，手机）为一个访客

由此，我们可以基于并发量和单线程来做。

资源加载优化两个方向：

开源

增加域名，简单来说就是 cdn。
节流

资源压缩gzip，减少请求数精灵图片，不需要立即使用的文件延迟加载，未来要执行的预加载等。

阻塞性优化

js 页面加载之后是否要立即执行？立即执行是否会影响页面渲染？

过去浏览器在加载和执行 js 文件时是阻塞状态，就是按照栈原理一个一个来；所以，原来要求把 js 文件放到 html 代码底部前。

现代浏览器某种程度上解决了并行加载的问题，也可以进行预加载，但是执行之后会否对页面造成重排？

灵活应用 defer、async 、动态创建script标签。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<!-- html code -->
<script type="text/javascript" src="//js.cdn.com/currentPage-part1.js" defer></script>
<script type="text/javascript" src="//js.cdn.com/currentPage-part2.js" async></script>
</body>
</html>

执行

简化终止条件

for (var i = 0; i < values.length; i++) {
  process(values[i]);
}

for (var i = 0, len = values.length; i < len; i++) {
  process(values[i]);
}

避免字符串执行语句

eval("console.log('hello world');"); // 避免
var sayHi = new Function("console.log('hello world');"); // 避免
setTimeout("console.log('hello world');", 100); // 避免

/**
 * 以上代码是包含在字符串中的，即在JS代码运行的同时必须新启运一个解析器来解析新的代码。
 * 实例化一个新的解析器有不容忽视的开销，故这种代码要比直接解析要慢。
 * 正确的应该这么做:
 */
console.log("hello world");
var sayHi = function() {
  console.log("hello world");
};
setTimeout(function() {
  console.log("hello world");
}, 100);

最小化语句数

多个变量声明

// 避免
var i = 1;
var j = "hello";
var arr = [1, 2, 3];
var now = new Date();

// 提倡
var i = 1,
  j = "hello",
  arr = [1, 2, 3],
  now = new Date();

插入迭代值

// 避免
var name = values[i];
i++;

// 提倡
var name = values[i++];

尽量使用数组和对象字面量，避免使用构造函数 Array(),Object()

// 避免
var a = new Array();
a[0] = 1;
a[1] = "hello";
a[2] = 45;

var o = new Obejct();
o.name = "bill";
o.age = 13;

// 提倡
var a = [1, "hello", 45];
var o = {
  name: "bill",
  age: 13
};

算法和流程控制优化

switch 代替 if-else
三目运算
判断可能性从大到小
将字符串、变量、方法存到数组或对象中

function getweek() {
  var w = ["日", "一", "二", "三", "四", "五", "六"],
    now = new Date(),
    d = now.getDay();
  return "星期" + w[d];
}

重排 reflow 和重绘 repaint

重排：由于布局的改变引起的页面重新渲染
重绘：由于样式的改变引起的页面重新渲染

如何触发

添加或删除元素
元素的位置发生改变
元素的尺寸发生改变
元素的宽高发生改变
浏览器窗口尺寸改变

如何避免

尽可能少的访问某些变量 offsetTop、scrollHeight、clientWidth等
一次性的创建元素之后再添加到页面上
使用visibility代替display

总的来说：少访问 DOM，在 js 里处理计算完了再一次性修改。使用成熟的框架

利用闭包缓存数据

某个方法内部可以存储计算过的数据或变量:

function memfacttail(n) {
  if (!memfacttail.cache) {
    memfacttail.cache = {
      "0": 1,
      "1": 1
    };
  }
  if (!memfacttail.cache.hasOwnProperty(n)) {
    memfacttail.cache.n = n * memfacttail(n - 1);
  }
  return memfacttail.cache.n;
}
console.log(memfacttail(4)); // 4*3*2*1 = 24;