17年1月开发小记

1.在向SVG中添加新的元素时，需要手动的使用createElementNS方法，如果直接使用jquery里面的方法添加的话，他是不会显现出来的；

2.有些元素是无法通过append方法添加的，比如<head>中的meta标签没有办法通过jquery动态添加，但是可以通过attr设置它的属性；

3.使用fetch进行跨域资源获取时，只需要极简单的将mode设置为no-cors就可以了；

4.自己强行郁闷了很久，想要在一个组件中同时使用redux的全局store和组件自身的state，这样会发出警告；如果有不同需要的话还是就简单的使用setState吧，可以用在只是有简单交互性并且页面上可能出现多次的组件上；

5.fetch的跨域虽然可以通过no-cors实现，但是返回的promise却是一个空的对象，里面的数据没有任何用处；

6.http://www.bilibili.com/index/catalogy/1-3day.json 不知道怎么取得这个地址的资源

7.在使用ES6时，千万不要手贱使用一些全局变量名字定义输出的对象或者其他数据，这样他不会是局部的，而是直接将其替换掉了，比如：

1
export default JSON = {a:1}

这样会将全局的JSON对象替换为{a:1}；

8.async/await 是非常新的 API，属于 ES7，目前尚在 Stage 1(提议) 阶段，这是它的完整规范。使用 Babel 开启 runtime 模式后可以把 async/await 无痛编译成 ES5 代码。也可以直接使用 regenerator 来编译到 ES5。

9.不要把一个有CSS动画的元素，甚至是通过绝对定位的SVG元素放到一个有图片背景的元素里面，这样会非常损耗性能，在手机上尤其突出；

10.【实在太坑了】对于一些组件千万不要忘记将本身的事件屏蔽掉，checkbox这种东西点击一次的话，也会触发两次操作；

11.H5开发最好的是在less中使用rem做单位，而在js中使用获取屏幕分辨率的函数计算长度或高度

12.按照普通设计，当网站cookie信息有1 KB、网站首页共150个资源时，用户在请求过程中需要发送150 KB的cookie信息，在512 Kbps的常见上行带宽下，需要长达3秒左右才能全部发送完毕。 尽管这个过程可以和页面下载不同资源的时间并发，但毕竟对速度造成了影响。 而且这些信息在js/css/images/flash等静态资源上，几乎是没有任何必要的。 解决方案是启用和主站不同的域名来放置静态资源，也就是cookie free。

13.将css放置在页面最上方应该是很自然的习惯，但第一个css内引入的图片下载是有可能堵塞后续的其他js的下载的。而在目前普遍过百的整页请求数的前提下，浏览器提供的仅仅数个并发，对于进行了良好优化甚至是前面有CDN的系统而言，是极大的性能瓶颈。 这也就衍生了domain hash技术来使用多个域名加大并发量（因为浏览器是基于domain的并发控制，而不是page），不过过多的散布会导致DNS解析上付出额外的代价，所以一般也是控制在2-4之间。 这里常见的一个性能小坑是没有机制去确保URL的哈希一致性（即同一个静态资源应该被哈希到同一个域名下），而导致资源被多次下载。

14.我们可以使用<audio>元素流式加载音乐文件, 在JavaScript中调用createMediaElementSource方式, 直接操作HTMLMediaElement, 像play()和pause()的方法均可调用.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
context = new AudioContext();
/* 声明我们的 MediaElementAudioSourceNode 变量 */
var sound,
    /* 新建一个 `<audio>` 元素. Chrome 支持通过 `new Audio()` 创建,
     * Firefox 需要通过 `createElement` 方法创建. */
    audio = new Audio();

/* 添加 `canplay` 事件侦听当文件可以被播放时. */
audio.addEventListener('canplay', function() {
    /* 现在这个文件可以 `canplay` 了, 从 `<audio>` 元素创建一个
     * MediaElementAudioSourceNode(媒体元素音频源结点) . */
    sound = context.createMediaElementSource(audio);
    /* 将 MediaElementAudioSourceNode 与 AudioContext 关联 */
    sound.connect(context.destination);
    /*通过我们可以 `play` `<audio>` 元素了 */
    audio.play();
});
audio.src = '/path/to/audio.mp3';

15.window.performance中有一些函数可以准确的测量时间，比在执行程序前后使用console.log更加准确，此外chrome还支持memory属性显示现在浏览器使用的内存（堆内存）

16.在新的audio-context接口中使用的有关于时间的接口，比一般使用的date更加精确，可以做到准确调音的水准；

17.在处理声音的时候，如果需要延迟改变一些变量，不要使用setTimeout
毫秒级别的控制并不够精确，JS主线程中有其他高优先级的任务要进行，页面布局，垃圾回收以及事件循环中的回调函数，并且其发生时间还会被当前页面是否在后台所影响，如果是后台程序会比前台发生的更加慢；取而代之的是setValueAtTime这个函数

18.将声音升高一个半音程（十二分之一个八音度）

1
2
3
4
5
6
function playNote(semitones) {
  // Assume a new source was created from a buffer.
  var semitoneRatio = Math.pow(2, 1/12);
  source.playbackRate.value = Math.pow(semitoneRatio, semitones);
  source.start(0);
}

19.八度之间的频率是两倍的关系，比如A2的频率就是A3的两倍；根据上面一个计算出来的每个半音程之间的倍数是1.0595左右

20.The indexes of the output can be mapped linearly between zero and the nyquist frequency
按照频域取出来的索引其实是0到奈奎斯特采样频率之间的值

21.document上的webkitvisibilitychange事件在当前页面进入前台或进入后台时触发，通过检查document.webkitHidden可以判断

22.如果想要调试canvas元素或者webGL，在chrome://flags页面中把实验性的chrome开发工具打开，重新启动后在设置里面即可打开canvas profile对绘画元素进行调试(旧版本)

23.nginx如果重新配置后使用nginx -s reload发现没有变化，需要nginx -s stop停止后在重新开启

24.有些页面可能有反爬虫措施，通过后台直接请求不对头进行包装的话会给你返回一顿根本无法解析的乱码（http://www.bilibili.com/index/catalogy/13-3day.json）

25.浏览器的全屏显示事件必须交给点击事件触发（怎么判断我是点击事件触发的？？）

26.es6没有静态变量的说法，如果要定义常量可以用如下方式：

1
2
3
4
5
6
7
8
class Agent {
    static get CIRCLE() {
      return 1;
    }
    static get SQUARE() {
      return 2;
    }
}

Agent.CIRCLE即为1，同理我们可以把一个对象return回去，里面全部包含着常量；

27.vertical-align属性只对有valign属性的元素起作用，比如td，th，caption等，对span，div没有用；

28.如何import一个文件中的所有图片？就像这样

1
2
let requireContext = require.context("../assets/image/",true,/^\.\/.*\.gif$/)
const images = requireContext.keys().map(requireContext)

29.假如有以下ES6代码：

1
2
3
4
5
arr1 = [1,0]
arr2 = [0,1]
arr3.push(arr1,arr2)
arr1.length = 0
arr2.length = 0

因为是对象的引用，最后得到的只是一个空的数组
解决办法：

1
arr3.push([...arr1],[...arr2])

30.以下总结自google开发者中心文档：
$_ 可以获取到上一个表达式计算出来的值
$0 测试的时候还在通过dom操作选择节点？不行的哈，直接通过这个拿到控制台里选定的元素
$和$$ 在没有引入jquery等的时候，前一个选择单个DOM后一个选择出一个数组

31.在用canvas做东西的时候一定要想清楚是不是只有一个或者两个图层，如果出现遮盖的情况就必须要用双canvas或者清空整个画布了，而且小范围清除重绘反而会增加渲染开销