性能 标签

JS 性能优化 - 数据存取

By hiluluke on

console.time & console.timeEnd

为了比较具体代码快的运行速度我们需要一些度量工具。console.time和console.timeEnd是浏览器原生就支持的属性。具体用法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function generate100Array() {
  var arr = new Array(100);
  for(var i = 0; i < 100; i++){
    arr[i]='';
  }
  return arr
}
var a = generate100Array()
var b = generate100Array()
console.time('for')
for (var i = 0, len = a.length; i < len; i++) {
  a[i] = i
}
console.timeEnd('for')
console.time('forEach')
b.forEach(function (el, index) {
  b[index] = index
})
console.timeEnd('forEach')

你可以复制粘贴上面代码到chrome 终端运行一下，你会发现for比forEach快，在我的chrome62.0 大概是快3-4倍。列出的理论，我都会提供相应代码，大家可以自己去试试。我只会在chrome下实验，并给出比较结果。

阅读全文

JS 性能优化 - 脚本的加载和执行

By hiluluke on

引子

开年的一次面试中记录下来的知识欠缺点，发现这块的东西自己也只是零零散散的，不够系统。面试真的是查漏补缺的好地方，所以就买了一波性能相关的书籍，慢慢看，慢慢总结吧。这一波是记录一些纯js相关的性能提升，不涉及具体框架，纯纯的在写js中需要注意的性能优化点。这部分相关的笔记，大部分内容来自阅读《高性能JavaScript》。

JS 的加载和执行

基本上这是一个常识，js的加载和执行会阻塞页面的渲染和交互。很多浏览器甚至是用单一进程来处理的UI刷新和JS执行。所以我们在让页面加载的过程中需要注意避免让js的加载执行和浏览器的UI渲染冲突。下面就是一些解决方案：

脚本位置

浏览器在处理html的时候，是从上到下解析的。所以，在HTML上的标签位置决定了浏览器解析的先后顺序。为了解决JS与浏览器冲突，通常情况下，我们是将JS放在最后的：

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  </head>
<body>
  <!-- 其他的html -->
  <script src="http://hiluluke.cn/js/simple_build.js"></script>  <!-- 将script放在最后，body前 -->
</body>
</html>
阅读全文

性能优化笔记 网络篇

By hiluluke on

嗯，搞点大事情

记录一些大公司，高级前端工程师的前端优化经验总结，并尝试着做些实验，以后肯定用的上，当看到新的技能时，实时更新在这篇文章。

DNS预解析

我们请求资源时，通常都是一个URL，拿到正确的ip地址必须经过一步DNS解析。DNS预解析的作用是在到某个页面是提前解析了DNS。用法都是这样：

1
<link rel="dns-prefetch" href="hiluluke.cn">

在很多大厂，比如jd.com、taobao.com等的head部分你就能看见很多上面这样的link标签。
然而其使用方法，并不是像上面这样简单，具体的看这篇文章，本文不多做解释。

阅读全文

记一次首屏优化

By hiluluke on

在之前一段时间看了个首屏优化细节的文章，然后在自己项目里实际操作了下。

现在的业务逻辑涉及移动端支付，所以第一个需要考虑的就是首屏时间，如果首屏时间过长，用户体检是十分差的。其实就做了很简单一件事，在移动端将涉及页面渲染的样式表写成了内联样式。

大家都知道，请求了html之后才回根据html里面的链接去请求相应的样式，图片，视屏种种。而首屏时间就是将涉及页面渲染的种种全部加载完毕，浏览器render完毕之后的时间。这里也就能够理解要将样式表写在head里面，而把js写在</body>之前的原因了。因为css涉及页面渲染，而js大多是业务逻辑，大多数不涉及页面渲染，所以完全可以把js的解析放在页面渲染之后。当然，你也注意到，大多数js不涉及页面渲染，而少数js也涉及页面渲染的，这时候可以把js放在<body>后面，另外这里也要注意，dom节点可能还没有生成，所以操作上一般是在<body>上加class，然后配合css的子父选择器。

阅读全文