目录

1. 如何遍历数组
2. 如何遍历对象
3. http浏览器缓存机制
4. 304状态码
5. 500状态码具体场景
6. DNS原理
7. CND原理
8. osi七层模型每层分别是什么，http在哪层，tcp在哪层
9. for与 forEach的区别（forEach跳出循环）
10. onclick和addeventlistener的区别
11. setTimeOut与requestAnimationFrame的区别
12. eCharts 框架原理
13. 深入理解CSS动画
14. css为什么头部，js在底部
15. CSS选择器的权重计算
16. rgba中最后一个参数和opacity有什么区别
17. canvas 和 svg的区别
18. 重绘和重排
19. axios和ajax和fetch区别
20. 前端如何捕获错误
21. 进程与线程的一个简单解释
22. script标签阻塞渲染问题，defer与async
23. HTTP协议的ETag
24. *js执行上下文
25. js中断
26. head和get的区别
27. *ssl握手过程，非对称加密和对称加密的区别
28. *移动端 1px 像素问题及解决办法
29. *前端缓存
30. *前端埋点方法

1. 如何遍历数组

https://www.cnblogs.com/lgnblog/p/11654512.html

2. 如何遍历对象

var fzb = {
  name:'fzbnb',
  age: 23,
  hight:170
}


Object.keys(fzb).forEach(function(i){
  console.log(i,fzb[i]);
})



Object.getOwnPropertyNames(fzb).forEach(function(i){
  console.log(i,fzb[i]);
})

for(let i in fzb){
  console.log(i,fzb[i]);
}

Reflect.ownKeys(fzb).forEach(function(i){
  console.log(i,fzb[i]);
})

3. http浏览器缓存机制

https://www.cnblogs.com/chenqf/p/6386163.html

4. 304状态码

200表示成功，服务器已成功处理了请求，通常表示为服务器提供了请求的网页，304表示未修改，自从上次请求后，请求的网页未修改过，服务器返回此响应时不会返回网页内容
https://blog.csdn.net/huwei2003/article/details/70139062?utm_term=304%E7%8A%B6%E6%80%81%E7%A0%81%E6%98%AF%E4%BB%80%E4%B9%88&utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2_allsobaiduweb~default-0-70139062&spm=3001.4430

5. 500状态码具体场景

http://www.xusseo.com/seoswgwsm/77367.html

6. DNS原理

https://www.cnblogs.com/gopark/p/8430916.html

7. CND原理

CDN的全称是Content Delivery Network，即内容分发网络。CDN的基本原理是广泛采用各种缓存服务器，将这些缓存服务器分布到用户访问相对集中的地区或网络中，在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响
https://blog.csdn.net/xiangzhihong8/article/details/83147542

8. osi七层模型每层分别是什么，http在哪层，tcp在哪层

https://blog.csdn.net/weixin_42092787/article/details/107632967

9.for与 forEach的区别（forEach跳出循环）

https://zhuanlan.zhihu.com/p/62603085
throw抛出错误可以跳出循环
https://blog.csdn.net/qjhsmd2015/article/details/103991750

10.onclick和addeventlistener的区别

https://blog.csdn.net/weixin_42881768/article/details/104856558

11. setTimeOut与requestAnimationFrame的区别

https://blog.csdn.net/qq_42177478/article/details/104148843

https://blog.csdn.net/VhWfR2u02Q/article/details/79492303?utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.baidujs&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.baidujs

使用

https://www.cnblogs.com/mengfangui/p/8664315.html

12.eCharts 框架原理

13. 深入理解CSS动画animation

14. css为什么头部，js在底部

15. CSS选择器的权重计算

16. rgba中最后一个参数和opacity有什么区别

17. canvas 和 svg的区别

首先，从它们的功能上来讲，canvas可以看做是一个画布。，其绘制出来的图形为标量图，因此，可以在canvas中引入jpg或png这类格式的图片，在实际开发中，大型的网络游戏都是用canvas画布做出来的，并且canvas的技术现在已经相当的成熟。另外，我们喜欢用canvas来做一些统计用的图表，如柱状图曲线图或饼状图等。而svg，所绘制的图形为矢量图，所以其用法上受到了限制。因为只能绘制矢量图，所以svg中不能引入普通的图片，因为矢量图的不会失真的效果，在项目中我们会用来做一些动态的小图标。但是由于其本质为矢量图，可以被无限放大而不会失真，这很适合被用来做地图，而百度地图就是用svg技术做出来的。

另外从技术发面来讲canvas里面绘制的图形不能被引擎抓取，如我们要让canvas里面的一个图片跟随鼠标事件：canvas.οnmοuseοver=function(){}。而svg里面的图形可以被引擎抓取，支持事件的绑定。另外canvas中我们绘制图形通常是通过javascript来实现，svg更多的是通过标签来来实现，如在svg中绘制正矩形形就要用<rect>，这里我们不能用属性style="width:XXX;height:XXX;"来定义。我再来介绍一个svg的js库：TWO.JS。其中包含two.js和three.js前者用于绘制二维图形，后者用于绘制三维图形。TWO.JS可以支持三种格式，svg（默认）、canvas、和WEBGL。当然也可以在普通div中引入。

1. canvas时h5提供的新的绘图方法
   svg已经有了十多年的历史

2. vanvas画图基于像素点，是位图，如果进行放大或缩小会失真
   svg基于图形，用html标签描绘形状，放大缩小不会失真

3. canvas需要在js中绘制
   svg在html正绘制

4. canvas支持颜色较svg多

5. canvas无法对已经绘制的图像进行修改、操作
   svg可以获取到标签进行操作

6. canvas它是逐像素渲染，依赖屏幕的分辨率
   Svg不依赖

7. canvas不支持事件处理
   SVG支持事件处理

8. canvas适合图像密集的游戏，其中的许多对象会被频繁重绘
   SVG适合带有大型渲染区域的应用程序（如百度地图）

9. svg复杂度越高渲染速度越慢（过度依赖DOM）

18. 重绘和重排

19. axios和ajax和fetch区别

20. 前端如何捕获错误

21. 进程与线程的一个简单解释

浏览器进程与线程

22. script标签阻塞渲染问题，defer与async

23. HTTP协议的ETag

24. *js执行上下文

25. js中断

26. head和get的区别

27. *ssl握手过程，非对称加密和对称加密的区别

https://blog.csdn.net/qq_29689487/article/details/81634057

28. *移动端 1px 像素问题及解决办法

29. *前端缓存\

30. *前端埋点方法