面经练习（三）

1.JS单线程的优点和缺点

单线程的好处就是易于编程，不需要考虑太多状况，缺点是效率低。

坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段Javascript代码长时间运行（比如死循环），导致整个页面卡在这个地方，其他任务无法执行。

2.canvas的基本用法

canvas基本用法

3.css两种动画

过渡动画(transition)和animation动画。
所谓过渡动画，也就是元素从一种样式逐渐改变为另一种样式的效果。
要实现过渡动画有两个必须点(和其他可选属性)：
1.指定要添加过渡效果的CSS属性(或者"all");
2.指定过渡效果的持续时间。

animation动画的关键：
1.用@keyframes定义规则，并绑定到一个选择器上。
2.规定动画的名称(animation-name),规定动画的时长(animation-duration)。
3.用百分比控制过程

其实如果掌握的熟练的话这两种动画是可以互相转换的。个人感觉在鼠标hover时的动画效果大多使用过渡动画，在需要鼠标触发时大多使用过渡动画；在网页加载后立即执行不需要手动触发时大多使用animation动画。

4.js操作dom的方法

js操作dom的方法

5.页面白屏怎么处理

1. 减少渲染堵塞
   解决办法：
   ①将script放在body后面
   ②给script加 defer 属性（值）

2. 减少head里的css资源
   由于css必须要放在head里（否则页面加载会出问题，比如加载完成后又进行DOM重绘），但是css太多，在head里又会阻塞页面渲染，所以我们要尽可能减少css代码量。
   ①.对css压缩和缓存
   ②.不要放太多图片，要是放图片可以进行优化，比如懒加载

3. 使用http2已经席卷而来，而且其有一个强大的优势，在于对于一个域只进行一次tcp连接，使用多路复用，传输多个资源（同时加载）

4. 代码优化：
   代码优化 ：HTML不要嵌套太多层（否则会加重页面layout的压力），css选择器别写的太复杂（不然计算量会很大），js不要滥用闭包（闭包会加深作用域链，加长变量查找时间）

6.前端性能优化

1. 图片有关：
   ①压缩
   ②多使用icon字符集，懒加载

2. CSS
   ①放在head标签里
   ②减少使用复杂的css选择器

3. JS
   ①把脚本放在body底部
   ②使用外部js、css
   ③压缩js，css

4. 有关DOM
   ①能用css解决的不要操作dom
   ②对dom查询做缓存
   ③将频繁操作改为一次性
   ④不必等到 onload 事件来开始处理 DOM 树，使用DOMContentLoaded 会更快。大多时候我们需要的只是想访问的元素已在 DOM 树中，所以不必等到所有图片下载完。

5. Cookie
   ①清楚不必要的cookie
   ②减少cookie的大小
   ③正确设置Expires日期

6. 服务端
   使用cdn：（内容分布网络）在离你最近的地方，放置一台性能好的，连接顺畅的副本服务器，让你能够以最快的速度，获取内容

7. 清理闭包的变量

8. 防抖节流

9. 减少http请求次数
   js，css等资源合并

7.js垃圾回收机制

js垃圾回收机制

从这三个方面解释

8.防抖节流

防抖节流