精华内容
下载资源
问答
  • 前端实习生面试题

    万次阅读 多人点赞 2019-08-28 11:46:53
    1,js的基础数据类型。 简单数据类型(基础数据类型):undefined,null,boolean,number,string 复杂数据类型:object,object本质上是由一组无序的键值对组成的。 其中undefined,null,boolean,number为基本类型,...

    1,js的基础数据类型。

    简单数据类型(基础数据类型):undefined,null,boolean,number,string

    复杂数据类型:object,object本质上是由一组无序的键值对组成的。

    其中undefined,null,boolean,number为基本类型,object,array,function属于引用类型。

    2,js的undefined与null

    undefined类型只有一个值,在使用var声明变量但未对其加以初始化时,这个变量的值是undefined。

    3,js显式类型转换,隐式类型转换

    显式转换:转型函数 Boolean(),Number(),parseInt(),parseFloat(),.toString(), String(),

    隐式转换:a,递增和递减操作符 b,一元加和减操作符 c,逻辑非操作符 与 比较操作符将任意值转换为布尔值  c,关系比较操作符

    参考文章

    4,js函数传参形式(值传递or引用传递)

    在ECMAScript中所有的函数的参数都是按值传递的。就是把函数外部的值复制给函数 内部的参数,就是把值从一个变量复制到另一个变量一样。基本数据类型的值传递如同基本类型变量的复制一样,而引用类型值得传递,则如同引用类型变量的复制一样。

    基本类型值

    function add(num){
        num += 10;
        return num;
    }
    var count = 20;
    var result = add(count);
    console.log(result); // 30
    console.log(count); // 20 ,没有变化
    

    引用类型值

    function setName(obj){
        obj.name = '嘉明';
        obj = new Object();
        obj.name = '庞嘉明';
    }
    var person = new Object();
    setName(person);
    console.log(person.name); // '嘉明'
    

     ̄□ ̄||这个我目前还理解不够,关于js的参数传递

    ------------2020-6-1 补充-------------

    js函数传参形式:值传递

    5,js闭包

    闭包是指有权访问另一个函数作用域中的变量的函数。导致另一个函数内的变量延长生存时间,造成常驻内存。

    6,js单线程还是多线程

    JavaScript语言的特点是单线程,JavaScript的主要用途是与用户交互,以及操作DOM。这样单线程会避免很多复杂的同步问题。假如有两个线程,一个线程在DOM节点上添加内容,另一个线程删除这个节点,这是浏览器应该以哪个线程为准?为了利用多核CPU的计算能力,HTML5提出web worker标准,允许JavaScript脚本创建多个线程,但是子线程完全受主线程的控制,且不得操作DOM。所以,并没有改变JavaScript单线程的本质。

    7,js垃圾回收机制

    a,标记清除。当变量进入执行环境时,就标记这个变量为‘进入环境’。从逻辑上讲,永远不能释放进入环境的变量所占用的内存,因为只要执行流进入相应的环境,就可能会用到他们。当变量离开环境时,则将其标记为‘离开环境’。

    垃圾收集器在运行的时候会给存储在内存上的所有变量都加上标记。然后,它会去掉环境中的变量以及被环境中的变量引用的标记。而在此后在被加上标记的变量将被视为准备删除的变。最后,垃圾收集器完成内存清除工作,销毁那些带标记的值,并回收他们所占用的内存空间。

    b,引用计数

    跟踪记录每个值被引用的次数,当这个值的引用次数变成0时,说明没有办法再访问这个值,就将其占用的内存空间收回来,下次再运行垃圾收集器的时候,就会释放那些引用次数为0的值所占用的内存了。

    参考

    8,Promise执行顺序问题

    古人云‘君子一诺千金’,‘承诺将来会执行’

    参考文章

    9,js中apply,call,bind的区别

    相同点:a,在js中,这三者都是用来改变函数的this对象的指向的。b,第一个参数都是this要指向的对象。b,都可以利用后续参数传参。

    不同点:参数接收方式不同,apply可接收数组。

    展开全文
  • 岗位:前端开发实习生 奉上技术面部分试题和我当时的解答,希望可以给到大家参考。 面试官: 看你的简历,你最近有在自己做组件库对吗?而且是使用React Hooks,那你可以说一说React Hooks产生的原因,以及它解决了...

    公司:阿里巴巴

    岗位:前端开发实习生

    奉上技术面部分试题和我当时的解答,希望可以给到大家参考。

    面试官: 看你的简历,你最近有在自己做组件库对吗?而且是使用React Hooks,那你可以说一说React Hooks产生的原因,以及它解决了什么问题?

    我:过去,我们构建React组件的方式与组件的生命周期是耦合的。这使得组件中散布着相关的逻辑。比如说在componentDidmount中绑定了一个监听事件,如果要释放,那么就要在componentWillUnmount中释放。在hooks中就可以。

    useEffect(()=>{
      // 监听事件
      ...
      return ()=>{
      // 解绑事件
      ...
      }
      })
    

    面试官: 好,那如果我现在想让你做一个弹窗组件,你会怎么做?

    我: React提供了一个API,Portals可以将组件挂载到body下。

    面试官: 你可以说说为什么要把它挂载到body下吗?

    我: 一是为了是html标签顺序更逻辑化,二是不影响触发弹窗组件的父组件。

    面试官: 看到你的项目中使用了React Hooks + Mobx,你可以说说Hooks和Mobx是如何做连接的吗?

    我: 现让Mobx导出一个store,将导出的store使用createContext存放并导出,然后使用的时候要现用mobx-react-lite提供的observe将组件包裹,然后使用useContext就可以了。

    面试官:那你可以跟我说说Mobx的原理吗?

    我: 这个我没有去了解过,不过最近在分析Vue和React的源码,之后我会再去阅读一下他们周边生态的源码。

    面试官: 看到你简历上说对Webpack与了解,熟悉到什么程度?webpack主要解决的问题是什么?

    我: 可以实现项目的基础脚手架的配置,并做一些webpack打包过程的性能优化。webpack主要解决的问题就是分析项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言,并将其转换和打包为合适的格式供浏览器使用。

    面试官: 好,那如果项目打包上线了,如何让用户知道文件更新了,而不使用缓存?

    我: 这个只需要在每次发布新版本时,给文件名添加hash名就可以了,对应的webpack配置就是将output的filename属性配置成[name].[contexthash:8].js就可以了

    面试官: 你可以跟我讲述一下HTTP的缓存机制吗?

    我:强缓存,强缓存可以通过设置两种 HTTP Header 实现:Expires 和 CacheControl 。强缓存表示在缓存期间不需要请求, state code 为 200。

    Expires: Wed, 22 Oct 2018 08:41:00 GMT
    

    Expires 是 HTTP/1 的产物,表示资源会在 Wed, 22 Oct 2018 08:41:00 GMT 后过期,需要再次请求。并且 Expires 受限于本地时间,如果修改了本地时间,可能会造成缓存失效。

     Cache-control: max-age=30
    

    Cache-Control 出现于 HTTP/1.1 ,优先级⾼于 Expires 。该属性值表示资源会在 30 秒后过期,需要再次请求。

    Cache-Control 可以在请求头或者响应头中设置,并且可以组合使用多种指令

    协商缓存

    如果缓存过期了,就需要发起请求验证资源是否有更新。协商缓存可以通过设置两种 HTTP Header 实现:Last-Modified 和 ETag

    当浏览器发起请求验证资源时,如果资源没有做改变,那么服务端就会返回 304 状态 码,并且更新浏览器缓存有效期。

    Last-Modified 和 If-Modified-Since
    

    Last-Modified 表示本地文件最后修改日期, If-Modified-Since 会将 Last-Modified 的值发送给服务器,询问服务器在该日期后资源是否有更新,有更新的话就会将新的资源发送回来,否则返回 304。

    但是 Last-Modified 存在一些弊端:

    如果本地打开缓存文件,即使没有对文件进行修改,但还是会造成 Last-Modified 被修改,服务端不能命中缓存导致发送相同的资源

    因为 Last-Modified 只能以秒计时,如果在不可感知的时间内修改完成⽂件,那么服务 端会认为资源还是命中了,不会返回正确的资源 因为以上这些弊端,所以在 HTTP / 1.1 出现了 ETag。

    ETag 和 If-None-Match
    

    ETag 类似于⽂件指纹, If-None-Match 会将当前 ETag 发送给服务器,询问该资源 ETag 是否变动,有变动的话就将新的资源发送回来。并且 ETag 优先级 Last Modified 。

    面试官: 今后打算怎么深入学习前端?

    我:首先要先学习React和Vue的源码,然后在学习它们周边的生态的源码,然后结合着更多的项目经验去更加深入的学习前端工程化。

    面试官: 好,今天就到这里,你有什么想问我的吗?

    我:我想请您推荐一些关于微前端的资料,想了解下微前端的知识。

    这里面试官跟我说了很多,微前端也是刚刚兴起的东西,资料不是很多,如果你可以来阿里,可给你提供内部的资料参考,也可以参与其中的项目,阿里在这方面也有很多实践…。我大概总结了一下,微前端可能不会是将来的必然趋势,还是要根据项目来考虑是否要采用微前端的架构来实现。

    项目经验总结

    淘系技术部比较看重项目经验,特别是项目有没有什么特别的亮点,可惜我实在是总结不出我做过的项目除了做了一点性能优化还有哪些亮点,做过的项目都比较普通。

    展开全文
  • 阅文前端实习生面试题(基础)

    千次阅读 2018-09-26 09:09:01
    http://note.youdao.com/noteshare?id=65933aff7dc7e5aac52411dbd7877cb9
    展开全文
  • 最近面试拿了很多公司的实习offer,只要是面试的都通过了。 接下来就分析下面试题,也能给自己一个提升吧,以便后续的面试更轻车熟路些,题目没什么顺序,想起什么写什么,还有我面试过程中的一些小套路。 估计要...

    最近面试拿了很多公司的实习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

    展开全文
  • 面试题 1.盒子垂直居中集中方法 2.js的类继承和原型链继承 3.promise的用处和静态方法 4.用一句的解释下闭包,具体那些用法(防抖、节流) 5.解释下防抖和节流 6.ES6的新特性,解释var,let,const.
  • (有点绕哈,不过对下一道有帮助) 4.call、apply、bind最大的区别就是bind不会立即调用,会返回一个函数,apply、call会立即调用。 3.用call或者apply实现一个bind函数 看看上面的bind定义吧,不多说了 ...
  • (每4分,共16分) 1. 下列哪个样式定义后,内联(非块状)元素可以定义宽度和高度( C  ) A. display:inline B. display:none C. display:block D. display:inheric 2. 选出你认为最合理的定义...
  • 目录1....语义化的理解5....6.window.onload和$(document).ready()区别7.什么是window对象,什么是document对象?8. 如果将CSS放在后面会出现什么问题?9. 哪些性能优化的方法10. 三种减少页面加载时间的...
  • (每4分,共16分) 1. 下列哪个样式定义后,内联(非块状)元素可以定义宽度和高度( C ) A. display:inline B. display:none C. display:block D. display:inheric 2. 选出你认为最合理的定义标题的方法( C ...
  • Web前端开发工程师实习生面试题一 1、简述一下CSS的盒子模型 2、Vue的生命周期 3、了解webpack吗?可以简述一下吗? 4、在地址栏输入URL后,前端与后端的数据传输的过程请简述一下 5、了解Vue的哪些使用? 有待更新...
  • 记录和分享我遇到的一些面试题,持续更新 说一下HTML语义化标签 HTML语义化标签包括Header、Nav、Article、Section、aside、Footer等 具有优点: HTML结构清晰 代码可读性好 便于团队维护和开发 无障碍阅读 ...
  • 前端实习生面试总结

    2021-04-28 19:59:10
    今天面了某公司的前端实习生,对于没经验的我真是一言难尽,不多说了直接上题目 html5标签 有哪些新增的标签 说说标签语义化 说一下span标签和div的区别 *最后一个问题自己知道换行与不换行,不知道可不可设置宽高...
  • 前端实习面试题

    2021-01-08 09:10:10
    1.什么是浏览器内核,常用的浏览器的内核有哪些? ...目前的浏览器内核有:trident,Gecko,presto,webkit等 行内元素和块级元素有哪些? 内行元素有:a,span,br,i,img,label等 块级元素有:div,li,ul,ol,h1~h6,tr等 ...
  • 百度前端实习生面试经历 转载:https://www.cnblogs.com/caizone/p/4614648.html 一面: 描述:一面主要还是基础的前端知识,没有涉及到很多框架之类的知识,但基础知识也不能小觑,其中有很多细节需要注意。 ...
  • 从大一开始学习前端,今年大三,10月份开始投简历,陆续收到很多家公司的面试,目前为止的面试通过率是百分之百,总结下面试题。 不定期更新中。。。 百度第一次 一面 1.AJAX流程 2.promise简单说一下 3.手写一个...
  • 亚信前端实习生面试记录

    千次阅读 2017-07-11 18:49:22
    2017.7.11早十点参见了亚信的实习生面试,地点济南。 首先给了一份面试试题,java工程师试题,但我记得我应聘的是前端。 这份java试题分为java基础、数据库基础、web前端基础、框架部分(Spring Struts Hibernate ...
  • 百度前端实习生面试经历

    千次阅读 2016-12-17 11:15:36
    因为我没做过服务器端,所以基本没有涉及服务器端的知识,面试完感觉面试官会根据你自己的情况出面试题,但是基本的知识点要知道,涉及的面挺广,如果有的点你研究的很深入会有加分。一面(技术面) 面试官是一个...
  • 主题: 百度前端实习生面试面试时间: 2017年6月一面:问基础当时我正在与我的工作流技术(大三的一门很坑很坑的课)决一死战,结果突然就打电话过来面试,我当时整个人都蒙了~而且最坑的是~我的外卖刚跟我说到楼下了,...
  • 国庆前端面试总结 国庆节前在面试了学校推荐的一家公司之后就马上机智的继续寻找‘备胎’,通过我的广撒网和不懈坚持和努力,在实习僧投递的简历被HR查看到并且非常热情的加了我微信并邀请我国庆5号去参加面试,...
  • 小戴的朋友小庄兴冲冲的跑去参加了字节跳动前端训练营的线上面试,回来以后灰头土脸,小庄讲五道算法全部都GG了,线上面试在牛客网上举行,实话讲这五道算法我还不是都了解只是了解其中三道题目,由于小庄面试...
  • 记一次前端实习生面试

    千次阅读 2018-03-17 16:07:13
    蚂蚁金服前端实习面试1.实习一面问题问的比较杂,js、css、和html都有涉及,但是都不深入。 比如关于BFC等,我开个头说了几句,面试官就开始问下一个问题了。 一面主要有几个问题没答出来,大部分都是关于网络层的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,435
精华内容 2,174
关键字:

前端实习生面试题