前端面试相关问题

作者: Grandperhaps | 来源:发表于2021-05-09 15:57 被阅读0次

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

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中引入。