前端优化笔记

前端优化

https://mp.weixin.qq.com/s/qqy_2pUXVcSd9wW1-MSzcg
https://mp.weixin.qq.com/s/DapiwE-AhML-Mm4r0b_sWg
http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html
https://juejin.im/post/5c011e0c5188252ea66afdfa
https://github.com/AlloyTeam/Mars/blob/master/performance/high-performance-css3-animation.md (高性能css3 动画)
如何只使用CSS提升页面渲染速度
36 张图详解 DNS ：网络世界的航

DNS预解析

（待完成）

passive 移动端滚动事件优化

passive的作用和原理

附：编码相关

[2019-04-14]
arguments 不建议通过参数的形式传递给其他function，这样不利于V8 的优化；

其他：
死链检测： http://tool.chinaz.com/Links/
Gzip压缩检测： http://tool.chinaz.com/gzips/
Google page speed ：https://developers.google.com/speed/pagespeed/

如下是工具方法：

/**
 * monitor.js
 * 检测性能，记录执行用时
 */

var originTime = (new Date()).getTime();
var times = [];
var keys = [];
export function mark(key) {
  const value = (new Date()).getTime();
  times.push(value - originTime);
  keys.push(key);

  var cache = localStorage.getItem(key);
  if (!cache) localStorage.setItem(key, performance.now());
  return;
}

export function print() {
  console.group('各个阶段触发时间:');
  times.map((t, i) => {
    console.log(keys[i] + ': ' + t);
  })
  console.groupEnd();
}

if (!window._monitor_) {
  window._monitor_ = { print, mark };
}

使用：

require('./monitor');
// ...
window._monitor_.mark('加载阶段');
// ...
window._monitor_.mark('渲染阶段');

最后可以在网页的控制台输入 window._monitor_.print() 即可。

2021-09-26 更新

webpageTest