自用，复习用

HTML5新特性

HTML5 audio

1.使用语法

 <audio id="" :src="" ></audio>

2.属性:

• src: 播放音频的路径

• loop: 循环播放，true/false

• autoplay: 自动播放,歌曲加载后可以自动播放,pc端支持,移动端不支持;

• controls: 播放控制,使用该属性在浏览器上的展示audio自带的播放控件;

3.对象方法:

• currentTime: 获取当前播放时间;

• duration：获取音频的总时间

• play：是否播放

• pause：是否暂停

4.对象方法：

• paly()：播放音频

• pause()：暂停播放音频

• load()：重新加载音频

5.事件：

play、pause、loadstart、duratiobchange、progress、canplay、canplaythrough

 //以上事件可以通过事件监听进行处理
 document.getElementById('').play()

HTML5语音Web Speech API

1.分类：

• 语音识别（Speech Recognition）：语音转文字

• 语音合成（Speech Synthesis）：文字转语音

2.兼容性：

语音识别Chrome和Opera浏览器默认支持

语音合成charome、opera、edge、safari均支持

3.Speech Synthesis项目中实例：

 //语音播放
 let voice = new window.SpeechSynthesisUtterance('语音内容')
 //设置语音的播放速率
 alarmVoice.rate = 0.7
 window.speechSynthesis.speak(voice)
 //语音内容可进行替换，例如后端返回的信息进行拼接：某某发生某某类型的警报
 let alarmMessege = xxx+"发生"+ _xxx+"警报"

4.SpeechSynthesisUtterance：

speechSynthesis和SpeechSynthesisUtterance是语音合成Speech Synthesis API的核心。

SpeechSynthesisUtterance对象，主要用来构建语音合成实例，用于将指定文字合成对应的语音，也包含一些基本配置项

5.SpeechSynthesisUtterance基本属性：

• SpeechSynthesisUtterance.lang：获取并设置说话的语言

• SpeechSynthesisUtterance.pitch：获取并设置说话的音调（值越大越尖锐，越小越低沉）

• SpeechSynthesisUtterance.rate：获取并设置说话的速度（值越大速度越快，越小速率越慢）

• SpeechSynthesisUtterance.text：获取并设置说话时的文本

• SpeechSynthesisUtterance.vioce：获取并设置说话的声音

• SpeechSynthesisUtterance.volume：获取并设置说话的音量

6.SpeechSynthesisUtterance.text基本方法

• speak() ：将对应的实例添加到语音队列中

• cancel()：删除队列的所有语音，如果正在播放，则直接停止

• pause()：暂停语音

• resume()：恢复暂停的语音

• getVoices()：获取支持的语言数组，必须添加在voiceschanged事件中才能生效

startswith()

用于判断字符串是否以指定前缀开头，如果是返回true，否则返回false

 _.starsWith(img, 'http') 

关于reflow（重排、回流）和repaint（重绘）

reflow和repaint的区别：

• reflow：浏览器需要去渲染，当它发现某个dom发生了变化不仅仅改变自身，会导致后面的元素位置全部改变并且影响了布局，则需要倒回去重新渲染；

• repaint：不影响元素周围或者内部布局，只改变某个dom元素的颜色或者文字颜色，则会进行重绘

什么的时候会发生reflow？

• 页面进行初始化的时候；

• 对dom元素进行操作的时候（删除或者增加）；

• 改变dom元素的尺寸；

• CSS的属性发生变化，例如display属性；

• 页面的文本和图片等内容的改变

• 浏览器窗口尺寸改变（resize事件）

如何减少reflow、repaint？

• 避免在document上直接对dom进行操作

• 集中对样式进行修改，通过className来进行样式的修改，通过classText属性设置样式值；

• 尽量避免使用table布局，table布局中某个元素触发会导致所有其他元素reflow，若有table布局，可以设置table-layout：auto/fixed，可以使table一行行的渲染，缩小reflow的范围；

• 将Layout属性值进行缓存，需要多次访问的在一次访问时先存储在局部变量中；

• 避免在css里面写expression；

• 权衡速度的平滑，比如实现一个动画，以1个像素为单位移动这样最平滑，但 reflow 就会过于频繁，CPU 很快就会被完全占用。但以3个像素为单位移动就会好很多。

计算机网络

1.HTTP和HTTPS相关

HTTP和HTTPS的区别：

• <