常见的前端面试题

1.如何实现浏览器内多个标签页之间的通信?

  调用localstorge、cookies等本地存储方式

2.CSS居中(包括水平居中和垂直居中)  

内联元素居中方案

水平居中设置:
1.行内元素

  • 设置 text-align:center;

2.Flex布局

  • 设置display:flex;justify-content:center;(灵活运用,支持Chroime,Firefox,IE9+)

垂直居中设置:
1.父元素高度确定的单行文本(内联元素)

  • 设置 height = line-height;

2.父元素高度确定的多行文本(内联元素)

  • a:插入 table (插入方法和水平居中一样),然后设置 vertical-align:middle;
  • b:先设置 display:table-cell 再设置 vertical-align:middle;

    块级元素居中方案

    水平居中设置:
    1.定宽块状元素

  • 设置 左右 margin 值为 auto;

2.不定宽块状元素

  • a:在元素外加入 table 标签(完整的,包括 table、tbody、tr、td),该元素写在 td 内,然后设置 margin 的值为 auto;
  • b:给该元素设置 displa:inine 方法;
  • c:父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:50%;

垂直居中设置:

  • 使用position:absolute(fixed),设置left、top、margin-left、margin-top的属性;
  • 利用position:fixed(absolute)属性,margin:auto这个必须不要忘记了;
  • 利用display:table-cell属性使内容垂直居中;
  • 使用css3的新属性transform:translate(x,y)属性;
  • 使用:before元素;

3.javascript的typeof返回哪些数据类型

  • Object number function boolean underfind;

4.ajax请求的时候get 和post方式的区别?

  • 一个在url后面 一个放在虚拟载体里面
    有大小限制
  • 安全问题
    应用不同 一个是论坛等只需要请求的,一个是类似修改密码的;

5.怎样添加、移除、移动、复制、创建和查找节点?

 1)创建新节点

  createDocumentFragment() //创建一个DOM片段
  createElement() //创建一个具体的元素
  createTextNode() //创建一个文本节点

2)添加、移除、替换、插入
  appendChild() //添加
  removeChild() //移除
  replaceChild() //替换
  insertBefore() //插入

3)查找
  getElementsByTagName() //通过标签名称
  getElementsByName() //通过元素的Name属性的值
  getElementById() //通过元素Id,唯一性

6. jQuery 库中的 $() 是什么?

  $() 函数是 jQuery() 函数的别称。$() 函数用于将任何对象包裹成 jQuery 对象,接着你就被允许调用定义在 jQuery 对象上的多个不同方法。你可以将一个选择器字符串传入 $() 函数,它会返回一个包含所有匹配的 DOM 元素数组的 jQuery 对象

7.介绍下你的项目(如果有的话)?并说一下在做这个项目中运用的技术以及遇到的难题是如何解决的

8.说说最近最流行的一些东西吧?常去哪些网站?

  • Node.js、MVVM、React-native,Angular,Weex等
  • CSDN,Segmentfault,博客园,掘金,Stackoverflow,伯乐在线等

9.谈谈This对象的理解。

this是js的一个关键字,随着函数使用场合不同,this的值会发生变化。
但是有一个总原则,那就是this指的是调用函数的那个对象。
this一般情况下:是全局对象Global。 作为方法调用,那么this就是指这个对象

10.谈谈This对象的理解。

this是js的一个关键字,随着函数使用场合不同,this的值会发生变化。
但是有一个总原则,那就是this指的是调用函数的那个对象。
this一般情况下:是全局对象Global。 作为方法调用,那么this就是指这个对象

11.闭包是什么,有什么特性,对页面有什么影响?简要介绍你理解的闭包

  • 闭包就是能够读取其他函数内部变量的函数。

12.ajax请求时,如何解释json数据

  • 使用eval parse,鉴于安全性考虑 使用parse更靠谱;

13.sessionStorage 、localStorage 和 cookie 之间的区别

 共同点:用于浏览器端存储的缓存数据

不同点:

(1)、存储内容是否发送到服务器端:当设置了Cookie后,数据会发送到服务器端,造成一定的宽带浪费;

        web storage,会将数据保存到本地,不会造成宽带浪费;

(2)、数据存储大小不同:Cookie数据不能超过4K,适用于会话标识;web storage数据存储可以达到5M;

(3)、数据存储的有效期限不同:cookie只在设置了Cookid过期时间之前一直有效,即使关闭窗口或者浏览器;

        sessionStorage,仅在关闭浏览器之前有效;localStorage,数据存储永久有效;

(4)、作用域不同:cookie和localStorage是在同源同窗口中都是共享的;sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;

14.行内元素有哪些?块级元素有哪些? 空(void)元素有那些?

行内元素:a、b、span、img、input、strong、select、label、em、button、textarea
块级元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素:即系没有内容的HTML元素,例如:br、meta、hr、link、input、img

15.JavaScript里函数参数arguments是数组吗? 

在函数代码中,使用特殊对象 arguments,开发者无需明确指出参数名,通过使用下标就可以访问相应的参数。

arguments虽然有一些数组的性质,但其并非真正的数组,只是一个类数组对象。其并没有数组的很多方法,不能像真正的数组那样调用.jion(),.concat(),.pop()等方5.5

法。

16.栈和堆的区别?

栈区(stack)—   由编译器自动分配释放   ,存放函数的参数值,局部变量的值等。

堆区(heap)   —   一般由程序员分配释放,   若程序员不释放,程序结束时可能由OS回收。

堆(数据结构):堆可以被看成是一棵树,如:堆排序;

栈(数据结构):一种先进后出的数据结构。

 

17.栈和队列的区别?

栈的插入和删除操作都是在一端进行的,而队列的操作却是在两端进行的。

队列先进先出,栈先进后出。

栈只允许在表尾一端进行插入和删除,而队列只允许在表尾一端进行插入,在表头一端进行删除

 

18.TCP和UDP的区别

TCP(Transmission Control Protocol,传输控制协议)是基于连接的协议,也就是说,在正式收发数据前,必须和对方建立可靠的连接。一个TCP连接必须要经过三次“对话”才能建立起来

UDP(User Data Protocol,用户数据报协议)是与TCP相对应的协议。它是面向非连接的协议,它不与对方建立连接,而是直接就把数据包发送过去! 
UDP适用于一次只传送少量数据、对可靠性要求不高的应用环境。

19.断开一个TCP连接则需要“四次握手”:

  • 第一次挥手:主动关闭方发送一个FIN,用来关闭主动方到被动关闭方的数据传送,也就是主动关闭方告诉被动关闭方:我已经不 会再给你发数据了(当然,在fin包之前发送出去的数据,如果没有收到对应的ack确认报文,主动关闭方依然会重发这些数据),但是,此时主动关闭方还可 以接受数据。

  • 第二次挥手:被动关闭方收到FIN包后,发送一个ACK给对方,确认序号为收到序号+1(与SYN相同,一个FIN占用一个序号)。

  • 第三次挥手:被动关闭方发送一个FIN,用来关闭被动关闭方到主动关闭方的数据传送,也就是告诉主动关闭方,我的数据也发送完了,不会再给你发数据了。

  • 第四次挥手:主动关闭方收到FIN后,发送一个ACK给被动关闭方,确认序号为收到序号+1,至此,完成四次挥手。

20.说说TCP传输的三次握手四次挥手策略

为了准确无误地把数据送达目标处,TCP协议采用了三次握手策略。用TCP协议把数据包送出去后,TCP不会对传送 后的情况置之不理,它一定会向对方确认是否成功送达。握手过程中使用了TCP的标志:SYNACK

发送端首先发送一个带SYN标志的数据包给对方。接收端收到后,回传一个带有SYN/ACK标志的数据包以示传达确认信息。 
最后,发送端再回传一个带ACK标志的数据包,代表“握手”结束。 
若在握手过程中某个阶段莫名中断,TCP协议会再次以相同的顺序发送相同的数据包

21.position的值, relative和absolute分别是相对于谁进行定位的?

  • absolute :生成绝对定位的元素, 相对于最近一级的 定位不是 static 的父元素来进行定位。

  • fixed (老IE不支持)生成绝对定位的元素,通常相对于浏览器窗口或 frame 进行定位。

  • relative 生成相对定位的元素,相对于其在普通流中的位置进行定位。

  • static 默认值。没有定位,元素出现在正常的流中

  • sticky 生成粘性定位的元素,容器的位置根据正常文档流计算得出

22.计算机网络的分层概述

tcp/ip模型:从下往上分别是链路层,网络层,传输层,应用层

osi模型:从下往上分别是物理层,链路层,网络层,传输层,会话层,表示层,应用层。

23.判断数组有哪些方法

a instanceof Array
a.constructor == Array
Object.prototype.toString.call(a) == [Object Array]

24.怎么实现从一个DIV左上角到右下角的移动,有哪些方法,都怎么实现

改变left值为window宽度-div宽度 top值为window高度-div高度

jquery的animate方法

css3的transition

25.输出二叉树的最小深度  判断左子树或右子树是否为空,若左子树为空,则返回右子树的深度,反之返回左子树的深度,如果都不为空,则返回左子树和右子树深度的最小值

26.堆栈

stack为自动分配的内存空间,它由系统自动释放;而heap则是动态分配的内存,大小不定也不会自动释放。

基本数据类型存放在栈中

引用类型 存放在堆内存中,首先从栈中获得该对象的地址指针,然后再从堆内存中取得所需的数据

27.对自己未来的规划是怎样的

对于刚毕业的人来说,前两年是很重要的,先打好基础,多提升js能力。三至四年在提升JS能力的同时,开始要往多方面发展,前端工程师远远不仅是JS而已。制作一个性能高、交互好、视觉美的页面,需要从前端框架选型、架构设计、构建工具,到后端通信机制、设计与交互、网络和浏览器优化等各方面的知识。一专多长才是前端工程师的终极目标。

28.为何选择前端这个方向和对前端的理解

为什么:

第一的话就是对前端很感兴趣,之前也接触过其他的语言,但是直到接触到前端才发现真的有兴趣做下去,兴趣是一个人最好的老师,

第二的话前端很有前途,像现在nodejs,rn,微信小程序这类工具和框架可以让前端进行后端和移动开发,所以我觉得前端的前途会更多一点。

理解:

首先前端工程师最核心的技能还是:Html、CSS、JS。前端负责的是用户可以看到的部分,所以也是最接近用户的工程师。同时在产品研发流程中前端要同时与产品、设计、后端等很多人合作。

29.对前端界面工程师这个职位是怎么样理解的?它的前景会怎么样?

前端是最贴近用户的程序员,比后端、数据库、产品经理、运营、安全都近。

    1、实现界面交互

    2、提升用户体验

    3、有了Node.js,前端可以实现服务端的一些事情
前端是最贴近用户的程序员,前端的能力就是能让产品从 90分进化到 100 分,甚至更好,

 参与项目,快速高质量完成实现效果图,精确到1px;

 与团队成员,UI设计,产品经理的沟通;

 做好的页面结构,页面重构和用户体验;

 处理hack,兼容、写出优美的代码格式;

 针对服务器的优化、拥抱最新前端技术。

30.==和===有什么不同?

首先,== equality 等同,=== identity 恒等。 ==, 两边值类型不同的时候,要先进行类型转换,再比较。 ===,不做类型转换,类型不同的一定不等。

31.data-属性的作用是什么?

data-* 属性用于存储页面或应用程序的私有自定义数据。data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。存储的(自定义)数据能够被页面的 JavaScript 中利用,以创建更好的用户体验(不进行 Ajax 调用或服务器端数据库查询)。

data-* 属性包括两部分:

  • 属性名不应该包含任何大写字母,并且在前缀 "data-" 之后必须有至少一个字符
  • 属性值可以是任意字符串

32.XHTML 与HTML的区别为:

  • XHTML 元素必须被正确地嵌套。
  • XHTML 元素必须被关闭。
  • 标签名必须用小写字母。
  • XHTML 文档必须拥有根元素。

33.请说出三种减少页面加载时间的方法。(加载时间指感知的时间或者实际加载时间)

  • 1.优化图片
  • 2.图像格式的选择(GIF:提供的颜色较少,可用在一些对颜色要求不高的地方)
  • 3.优化CSS(压缩合并css,如margin-top,margin-left...)
  • 4.网址后加斜杠(如www.campr.com/目录,会判断这个“目录是什么文件类型,或者是目录。)
  • 5.标明高度和宽度(如果浏览器没有找到这两个参数,它需要一边下载图片一边计算大小,如果图片很多,浏览器需要不断地调整页面。这不但影响速度,也影响浏览体验。当浏览器知道了高度和宽度参数后,即使图片暂时无法显示,页面上也会腾出图片的空位,然后继续加载后面的内容。从而加载时间快了,浏览体验也更好了。)
  • 6.减少http请求(合并文件,合并图片)。

34.你能描述一下渐进增强和优雅降级之间的不同吗?

优雅降级:Web站点在所有新式浏览器中都能正常工作,如果用户使用的是老式浏览器,则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题,针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案,使之在旧式浏览器上以某种形式降级体验却不至于完全失效.

渐进增强:从被所有浏览器支持的基本功能开始,逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时,它们会自动地呈现出来并发挥作用。

35.线程与进程的区别

一个程序至少有一个进程,一个进程至少有一个线程。线程的划分尺度小于进程,使得多线程程序的并发性高。

另外,进程在执行过程中拥有独立的内存单元,而多个线程共享内存,从而极大地提高了程序的运行效率。

线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行,必须依存在应用程序中,由应用程序提供多个线程执行控制。

从逻辑角度来看,多线程的意义在于一个应用程序中,有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用,来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。

36.介绍一下CSS的盒子模型?

  • 有两种, IE 盒子模型、标准 W3C 盒子模型;IE的content部分包含了 border 和 pading;
  • 盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border).
原文地址:https://www.cnblogs.com/xiaodongxiaodong/p/8541685.html