精选文章 前端实习生面试题分析(一)

前端实习生面试题分析(一)

作者:『非衣』 时间: 2021-02-05 09:43:15
『非衣』 2021-02-05 09:43:15
【摘要】最近面试拿了很多公司的实习offer,只要是面试的都通过了。 
接下来就分析下面试题,也能给自己一个提升吧,以便后续的面试更轻车熟路些,题目没什么顺序,想起什么写什么,还有我面试过程中的一些小套路。 
估计要写好多,每天写几道题,而且有些经验性的东西也不容易写出来 
这篇写的都是类似一些概念性的理论东西。 
1.JS防抖和节流 
先说为什么要做防抖和节流,针对一些会频繁触发的事件,像scro...

最近面试拿了很多公司的实习offer,只要是面试的都通过了。

接下来就分析下面试题,也能给自己一个提升吧,以便后续的面试更轻车熟路些,题目没什么顺序,想起什么写什么,还有我面试过程中的一些小套路。

估计要写好多,每天写几道题,而且有些经验性的东西也不容易写出来

这篇写的都是类似一些概念性的理论东西。

1.JS防抖和节流

先说为什么要做防抖和节流,针对一些会频繁触发的事件,像scroll、resize,如果正常绑定事件处理函数的话,可能在很短的时间内多次连续触发事件,十分影响性能。

所以,针对这种事件要做防抖或者节流处理。

1.防抖

做法就是限制下次函数调用之前必须等待的事件间隔。

实现方法就是维护一个定时器,规定事件后触发函数,规定时间内触发的话,就会取消之前的计时器并且重新设置计时器,这样一来,只有最后一次操作能触发。

2.节流

节流只允许一个函数在规定的时间内触发一次。

它和防抖最大的区别就是,节流函数不管事件触发多频繁,都保证事件处理函数只在规定的时间内触发一次;防抖只是最后一次事件才会触发事件处理函数。

比如在页面无限加载的场景下,我们需要用户在滚动页面时,每隔一段事件发送一次异步请求,而不是用户在停止页面滚动时发送异步请求。所以这种场景,就适合用节流来实现。

两种实现方式:

  • 时间戳:容易理解,当高频事件触发时,第一次应该立即执行事件处理函数,然后再怎么频繁触发事件,也都是会等到规定的时间间隔后才执行一次。

  • 定时器:当触发事件的时候,设置一个定时器,再触发事件的时候,若定时器是存在, 就什么都不做;知道规定时间后,定时器执行事件处理函数,然后定时器被清空,这样就可以设置下一个定时器。


2.TCP和UDP的区别

这个东西能说好多,面试要求简洁,就写个总结的答案,我推荐谢希仁的《计算机网络》第六版。

1.TCP是面向连接的运输层协议;UDP是无连接的,即发送数据之前不需要建立链接,因此减少了开销和发送数据的时延。

2.TCP提供可靠交付的服务,通过TCP连接传送的数据,无差错、不丢失、不重复、并且按时到达;UDP使用最大努力交付,即不保证可靠性交付,因此主机不需要维持复杂的连接状态。

3.TCP面向字节流,TCP中的“流”指的是流入到进程或从进程流出的字节序列;UDP是面向报文的,发送方的UDP对应用程序交下来的报文,在添加首部后就向下交付IP层。

4.UDP没有拥塞控制,因此网络出现的拥塞不会使源主机的发送速率降低,符合很多实时应用(如IP电话、实时视频会议等)的要求。

5.每一条TCP连接只能有两个端点,每一条TCP连接只能是点对点的;UDP支持一对一、一对多、多对一和多对多的交互通信。

6.UDP的首部开销小,只有8个字节,比TCP的20个字节的首部短。

7.TCP提供可靠的全双工通信,TCP允许通信双方的应用进程在任何时候都能发送数据;UDP是不可靠信道。


3.GET和POST的区别

红字标记的一定要说出来

  • GET请求在浏览器回退时是无害的,POST会再次提交请求
  • GET请求产生的URL地址可以被收藏,而POST不可以
  • GET请求会被浏览器主动缓存,而POST不会,除非手动设置
  • GET请求只能进行URL编码,而POST支持多种编码方式
  • GET请求参数会被完整的保留在浏览器历史记录里,而POST中的参数不会被保留
  • GET请求在URL中传递的参数是有长度限制的(不固定,因浏览器决定),而POST没有限制
  • GET请求只接受ASC2字符,而对参数的数据类型POST没有限制
  • GET请求比POST更不安全,因为参数直接暴露在URL上,所以不能用来传递敏感数据
  • GET请求参数通过URL传递,而POST放在request.body上

4.JS加载时间线

1、创建Document对象,开始解析web页面。解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中。这个阶段document.readyState = 'loading'。

2、遇到link外部css,创建线程加载,并继续解析文档。

3、遇到script外部js,并且没有设置async、defer,浏览器加载,并阻塞,等待js加载完成并执行该脚本,然后继续解析文档。

4、遇到script外部js,并且设置有async、defer,浏览器创建线程加载,并继续解析文档;对于async属性的脚本,脚本加载完成后立即执行。(异步禁止使用document.write())

5、遇到img等,先正常解析dom结构,然后浏览器异步加载src,并继续解析文档。

6、当文档解析完成,document.readyState = 'interactive'。

7、文档解析完成后,所有设置有defer的脚本会按照顺序执行。(注意与async的不同,但同样禁止使用document.write());

8、document对象触发DOMContentLoaded事件,这也标志着程序执行从同步脚本执行阶段,转化为事件驱动阶段。

9、当所有async的脚本加载完成并执行后、img等加载完成后,document.readyState = 'complete',window对象触发load事件。

10、从此,以异步响应方式处理用户输入、网络事件等。


5.如何解决canvas高分屏模糊问题?

在分辨率比较高的屏幕,例如ip6/6s/mac等机器上,因为canvs绘制的是位图,所以会导致模糊,解决方法是根据屏幕分辨率修改canvas样式代码中的宽和高与canvas的width和height属性的比例


6.cookie、localStorage、sessionStorage区别

1.从数据生命周期上来说

  • cookie:一般由服务器端生成,可设置失效时间,如果在浏览器端生成cookie,则默认关闭浏览器后失效。
  • localStorage: 永久保存,除非被清除。
  • sessionStorage: 仅在当前会话下有效,关闭页面或者浏览器被清除。

2.从数据存储方面来说

  • cookie大小为4KB左右
  • storage一般为5MB

3.从与服务器端通信方面

  • cookie每次都会携带在HTTP头中,如果cookie保存过多会带来性能问题
  • storage仅在客户端保存,不参与和服务器的通信

4.从易用性方面来说

  • cookie原生接口不友好
  • storage原生接口友好,也可自行封装

7.使用CDN的好处

CDN是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。

CDN的基本原理是广泛采用各种缓存服务器,将这些缓存服务器分布到用户访问相对集中的地区或网络中,在用户访问网站时,利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上,由缓存服务器直接响应用户请求。

CDN网络是在用户和服务器之间增加Cache层,如何将用户的请求引导到Cache上获得源服务器的数据,主要是通过接管DNS实现,这就是CDN的最基本的原理

所以好处就能总结出来了:

  1. 加速不说了

2.为了实现跨运营商、跨地域的全网覆盖

  • CDN加速可以覆盖全球的线路,通过和运营商合作,部署IDC资源,在全国骨干节点商,合理部署CDN边缘分发存储节点,充分利用带宽资源,平衡源站流量

3.保障网站安全

  • CDN的负载均衡和分布式存储技术,可以加强网站的可靠性,相当无无形中给你的网站添加了一把保护伞,应对绝大部分的互联网攻击事件。防攻击系统也能避免网站遭到恶意攻击

4.异地备援

  • 当某个服务器发生意外故障时,系统将会调用其他临近的健康服务器节点进行服务,进而提供接近100%的可靠性,这就让你的网站可以做到永不宕机

5.节约成本

  • 使用CDN加速可以实现网站的全国铺设,你根据不用考虑购买服务器与后续的托管运维,服务器之间镜像同步,也不用为了管理维护技术人员而烦恼,节省了人力、精力和财力

8.手写一个快排

简单,找到枢轴,左右分治再递归就好了

function qucikSort (arr) {
		if (arr.length <= 1) { return arr
		} var num = Math.floor(arr.length / 2)
		var numVal = arr.splice(num, 1) var left = []
		var right = [] for (var i = 0; i < arr.length; i++) { if (arr[i] < numVal) { left.push(arr[i]) } else if (arr[i] > numVal) { right.push(arr[i]) }
		} return qucikSort(left).concat(numVal, qucikSort(right))
	}

 


9.块级元素和内联元素的区别

1.块级元素的特点:

  • 总是在新行上开始
  • 高度、行高以及内外边距都可以控制
  • 宽度默认是它容器的100%,除非设置一个值
  • 它可以容纳内联元素和其他块级元素

2.内联元素的特点:

  • 和其他元素都在同一行
  • 高度、行高以及内外边距都不可控制
  • 宽度就是它的文字或图片的高度,不可改变
  • 内联元素只能容纳文本或者其他内联元素

常见的块级元素:address、center、div、dir、from、h1-h6、hr、ol、ul、li、table、p、pre、menu 等
常见的内联元素:a、b、br、em、font、i、img、input、label、select、span、strong、textarea

注: 设置了float或者position值为absolute和fixed都会使原来的内联元素变成块级元素

 

博文转载于:https://www.cnblogs.com/isLiu/p/7814014.html

勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:Elasticsearch: ES使用sql语句进行查询

下一篇:CentOS7解压缩安装mysql5.6

您可能感兴趣

  • 欢乐时光病毒原码分析

    本贴内容只用于研究,请看到者帮助他人删除windows的VBS脚本语言,该语言是重大安全漏洞!!!!!!> >

  • LILO使用指南 MBR 根分区 lilo.conf 出错分析 忘记密码

    LILO使用指南LILO使用指南 2001-05-01 10:30 发布者:netbull 阅读次数:252 hubertzou hubertzou@linuxaid.com.cn 计算机的最初启动是由BIOS控制的,在对一些硬件(如:内存、键盘等)初始化之后,它会试图加载硬盘的主引导记录(MBR)或软盘的引导扇区。MBR可通过两种方式运行,其一是定位到活动分区并加载相应的引导扇区,然后由引...

  • "欢乐时光"代码分析

    "欢乐时光"代码分析 转自<天极网> ==================== “欢乐时光”其实就是利用了超文本邮件中可以夹带脚本语言的特点而棋高一招的。我们知道,邮件的格式可以有两种:纯文本和超文本。超文本(HTML)功能强大就不用多说了,它可以内嵌数种脚本语言,常见的就是VBScript和JavaScript。“欢乐时光”在超文本中夹带的就是VBS。从源代码中可以看得出来,该作者很可能是...

  • 高级程序员考试试题分析

    高级程序员考试试题分析——计算机硬件基础知识(高级程序员级)   高级程序员资格和水平考试试题共15个硬件基础知识4个题内容涉及:  1.随机存储器种类特性。  2.虚拟存储器特性及工作原理。  3.数据可靠性编码CRC及工作原理。  4.精简指令计算机RISC的特性。  一、主存储器的种类和特性(第九题)  主存储器用来存放正在运行的程序所需的和常用的指令和数据。是CPU直接访问的部件。主...

  • 万花谷网页病毒源码分析

    国家反病毒应急处理中心联防单位北京江民公司的反病毒应急小组最近监测到国内有心怀不轨的人到处在互连网上散发一个美丽诱人的网址"万花谷",这实际是一个恶意"陷阱",有人经不住诱惑,只用鼠标轻轻点一下,计算机就立即瘫痪了,这是有人利用Java最新技术进行破坏的又一个恶意网址。北京江民公司提醒广大上网用户注意严加防范,遇到有On888.xxx之类的网址请不要点击,并开启KVW3000的病毒实时监视防...

  • ::多层结构连接方式选择的分析::

    ::多层结构连接方式选择的分析:: Borland公司的MIDAS让我们能用Delphi构建强大的多层分布式数据库系统,MIDAS提供了很多种的客户程序和中间层的连接方式,如:Sockect,DCOM,Corba等等,这么多的方式,在开发多层体系的时候我们应该如何选择呢,下面我就简单的介绍一下这几种连结方式。 Socket: Sockect无疑是最容易配置的连接方式。而且Socket只...

  • 定时器时间数据转换子程序分析

    定时器时间数据转换子程序分析                                                    进日,我在看一时钟TSR程序,分析其中一个把BIOS数据区中的定时器数据转换成HH:MM:SS时间格式的数据(ASCII)的程序片段时,既学到一点东西,又发现了一写自己弄不明白的问题。现在我把自己学到的好东西写出来与大家分享,同时向各路高手请教请教。    程序...

  • TOMCAT下的JIVE2的中文问题分析及解决

    TOMCAT下的JIVE2的中文问题的报告 原文摘自jive论坛用户shyguy的帖子。 翻译者:cheramiXXX 注意 XXX: 所有的结论都是基于一下平台: Winnt4.0(简体中文版) + Sun JDK1.3 + Tomcat4.0-b7 + jive2.0.1 + mysql3.23.38 + org.gjt.mm.mysql.Driver-2.04 在这样的条件下,安装在T...

CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
前端实习生面试题分析(一)介绍:华为云为您免费提供前端实习生面试题分析(一)在博客、论坛、帮助中心等栏目的相关文章,同时还可以通过 站内搜索 查询更多前端实习生面试题分析(一)的相关内容。| 移动地址: 前端实习生面试题分析(一) | 写博客