资讯专栏INFORMATION COLUMN

前端面试题总结

tinysun1234 / 1687人阅读

摘要:还有天,年便过去了,回头看看,这段时间自己有出去面试过,也遇到了很多面试题,以下是我的一些总结,这篇关于面试的文章,我也会不定时的更新。然而,如果前一个定时器尚未执行,其实就是将其替换为一个新的定时器。

还有7天,2018年便过去了,回头看看,这段时间自己有出去面试过,也遇到了很多面试题,以下是我的一些总结,这篇关于面试的文章,我也会不定时的更新。

HTML

1.说一下你对HTML语义化的理解?

语义化就是根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

2.浏览器的内核,你知道的有哪些?

Trident内核:IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
Gecko内核:Netscape6及以上版本,FF,MozillaSuite/SeaMonkey等。
Presto内核:Opera7及以上。      [Opera内核原为:Presto,现为:Blink;]
Webkit内核:Safari,Chrome等。   [ Chrome的:Blink(WebKit的分支)]

3.说一说对HTML5的离线储存的理解

离线缓存是Html5新特性之一,简单理解就是第一次加载后将数据缓存,在没有清除缓存前提下,下一次没有网络也
可以加载,用在静态数据的网页或游戏比较好用。当然,Html5新的特性都不是所有浏览器都能支持的,离线缓存也
一样。反正IE9(包括)及IE9以下的浏览器目前是不支持的。如果用在移动端,应该都能支持。检测是否支持离线
缓存也是比较简单的。

详细的使用请参考:
https://www.cnblogs.com/wuzhiquan/p/4844258.html

4.请描述一下 cookies,sessionStorage 和 localStorage 的区别

储存大小:
cookie数据大小不能超过4k。
sessionStorage和localStorage也有大小的限制,但是比cookie大,可以达到5M或更大

有期时间:

localStorage:存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;
sessionStorage:数据在当前浏览器窗口关闭后自动删除。
cookie:设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭,可以设置其过期时间

存储位置:
localStorage和sessionStorage都保存在客户端,不与服务器进行交互通信。
cookie数据始终在同源的http请求中携带(即使不需要),记会在浏览器和服务器间来回传递。

5.请描述一个网页从开始请求道最终显示的完整过程?

一个网页从请求到最终显示的完整过程一般可以分为如下7个步骤:
(1)在浏览器中输入网址;
(2)发送至DNS服务器并获得域名对应的WEB服务器IP地址;
(3)与WEB服务器建立TCP连接;
(4)浏览器向WEB服务器的IP地址发送相应的HTTP请求;
(5)WEB服务器响应请求并返回指定URL的数据,或错误信息,如果设定重定向,则重定向到新的URL地址;
(6)浏览器下载数据后解析HTML源文件,解析的过程中实现对页面的排版,解析完成后在浏览器中显示基础页面;
(7)分析页面中的超链接并显示在当前页面,重复以上过程直至无超链接需要发送,完成全部数据显示。

6.webSocket 如何兼容低浏览器?

Adobe Flash Socket
ActiveX HTMLFile(IE)
基于 multipart 编码发送 XHR
基于长轮询的 XHR
CSS

1.怎样让一个div垂直居中

第一:定位之后根据div的宽高计算margin;
第二:flex布局
第三:transform: translate(-50%, -50%) (定位之后);

2.css定义的权重

!important > 行间样式 > id > class|属性|伪类 > 标签|伪元素 > 通配符

3.清除浮动的方法有哪些

第一:给父元素高度;
第二:让父元素一起浮动起来
第三:clear:both;
第四:定义伪类:after

4.使用css实现一个持续的动画效果

animation:mymove 5s infinite;
@keyframes mymove {
from {top:0px;}
to {top:200px;}
}

5.右边宽度固定,左边自适应

第一:display:flex布局;
第二:浮动;
第三:右边定位,左边给一个往右的padding;

6.对于css的hack理解

可见该文章:https://www.cnblogs.com/mumble/p/4576489.html

7.隐藏一个元素的方法有哪些

visibility: hidden; 这个属性只是简单的隐藏某个元素,但是元素占用的空间任然存在
opacity: 0; CSS3属性,设置0可以使一个元素完全透明
position: absolute; 设置一个很大的 left 负值定位,使元素定位在可见区域之外
display: none; 元素会变得不可见,并且不会再占用文档的空间。
transform: scale(0); 将一个元素设置为缩放无限小,元素将不可见,元素原来所在的位置将被保留
JS

1.对于数组的操作方法有哪些

pop() 删除一个数组中的最后的一个元素;
shift() 删除数组的第一个元素;
unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。
push() 向数组的末尾添加元素;
reverse() 颠倒数组中元素的顺序;
splice() 添加/删除数组元素;
sort() 数组排序;
copyWithin() 指定位置的成员复制到其他位置;
fill() 填充数组;
join() 数组转字符串;
slice() 浅拷贝数组的元素;
indexOf() 查找数组是否存在某个元素,返回下标;
includes() 查找数组是否包含某个元素 返回布尔;
every 检测数组所有元素是否都符合判断条件;
some 数组中的是否有满足判断条件的元素;
filter 过滤原始数组,返回新数组;
map 对数组中的每个元素进行处理,返回新的数组;
reduce 为数组提供累加器,合并为一个值;

更多的方法和方法对于的参数用法等,可以自己再去了解一下。

2.数组去重的方法

[...new Set([2,"12",2,12,1,2,1,6,12,13,6])]
或者使用for循环

3.数据类型

Boolean
Null
Undefined
Number
String
Symbol :(ECMAScript 6 新定义 ,Symbol 生成一个全局唯一、表示独一无二的值) 
Object :(Array、Function、Object)

4.你对重绘、重排的理解?

重绘:不重新布局,只是元素的外观改变;
重排:重排是更明显的一种改变,可以理解为渲染树需要重新计算,重排一定会引起重绘。


页面渲染初始化(这个无法避免)
DOM元素的几何属性变化:元素尺寸(宽或高)改变。
DOM树的结构变化:例如节点的增减(添加或者删除可见的DOM元素),移动,元素位置改变等。
改变元素的一些样式,调整浏览器窗口大小,滚动条出现等等

以上都会让页面发生重排

5.说说你要用到的es6和es7

对于这个问题,建议大家能阮一峰老师的书
http://es6.ruanyifeng.com/#docs/module

6.函数节流是什么,有什么优点

目的:
从字面上就可以理解,函数节流就是用来节流函数从而一定程度上优化性能的。例如,DOM 操作比起非DOM 交互需
要更多的内存和CPU 时间。连续尝试进行过多的DOM 相关操作可能会导致浏览器挂起,有时候甚至会崩溃。尤
在IE 中使用onresize 事件处理程序的时候容易发生,当调整浏览器大小的时候,该事件会连续触发。在oresize 
事件处理程序内部如果尝试进行DOM 操作,其高频率的更改可能会让浏览器崩溃。又例如,我们常见的
一个搜索的功能,我们一般是绑定keyup事件,每按下一次键盘就搜索一次。但是我们的目的主要是每输入一些内容
搜索一次而已。为了解决这些问题,就可以使用定时器对函数进行节流。

函数节流的原理:
某些代码不可以在没有间断的情况连续重复执行。第一次调用函数,创建一个定时器,在指定的时间间隔之后运行
代码。当第二次调用该函数时,它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了,这个操
作就没有任何意义。然而,如果前一个定时器尚未执行,其实就是将其替换为一个新的定时器。目的是只有在执行
函数的请求停止了一段时间之后才执行。
http://www.cnblogs.com/LuckyW...

7.你知道哪些HTTP的状态码,他们分别代表什么

我们一般常见的就是200,304,400,401,404,405,500等,详细可见如下地址
http://tool.oschina.net/commons?type=5

8.说一说你对闭包的理解

官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也
是该表达式的一部分。
太官方了,硬是绕口,我觉得闭包简单来说就是函数套函数,有权访问另一个函数作用域内变量的函数。
闭包的好处就是:
1.希望一个变量长期驻扎在内存中;
2.避免全局变量的污染。
3.私有成员的存在。
闭包的缺点:
1.常驻内存,增加内存使用量。
2.使用不当会很容易造成内存泄露。

9.判断数据类型的方法有哪些

var a = [1,2,3]

1.最常见的判断方法:**typeof**
alert(typeof a)   ------------> object

2.判断已知对象类型的方法: **instanceof**
alert(a instanceof Array) ---------------> true

3.**Object.prototype.toString** 
Object.prototype.toString.call("") ; --------------->[object String]

4.**constructor**
alert(c.constructor === Array) ----------> true

5.**jquery.type()**
如果对象是undefined或null,则返回相应的“undefined”或“null”。
jQuery.type( undefined ) === "undefined"
jQuery.type( null ) === "null"
如果对象有一个内部的[[Class]]和一个浏览器的内置对象的 [[Class]] 相同,我们返回相应的 [[Class]] 名
字。 (有关此技术的更多细节。 )
jQuery.type( true ) === "boolean"
jQuery.type( 3 ) === "number"
jQuery.type( "test" ) === "string"
其他一切都将返回它的类型“object”。

还有很大一部分关于js的面试题,之后再继续补充

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/53472.html

相关文章

  • 前端最强面经汇总

    摘要:获取的对象范围方法获取的是最终应用在元素上的所有属性对象即使没有代码,也会把默认的祖宗八代都显示出来而只能获取元素属性中的样式。因此对于一个光秃秃的元素,方法返回对象中属性值如果有就是据我测试不同环境结果可能有差异而就是。 花了很长时间整理的前端面试资源,喜欢请大家不要吝啬star~ 别只收藏,点个赞,点个star再走哈~ 持续更新中……,可以关注下github 项目地址 https:...

    wangjuntytl 评论0 收藏0
  • 前端开发面试链接

    摘要:手册网超级有用的前端基础技术面试问题收集前端面试题目及答案汇总史上最全前端面试题含答案常见前端面试题及答案经典面试题及答案精选总结前端面试过程中最容易出现的问题前端面试题整理腾讯前端面试经验前端基础面试题部分最新前端面试题攻略前端面试前端入 手册网:http://www.shouce.ren/post/index 超级有用的前端基础技术面试问题收集:http://www.codec...

    h9911 评论0 收藏0
  • 前端开发面试链接

    摘要:手册网超级有用的前端基础技术面试问题收集前端面试题目及答案汇总史上最全前端面试题含答案常见前端面试题及答案经典面试题及答案精选总结前端面试过程中最容易出现的问题前端面试题整理腾讯前端面试经验前端基础面试题部分最新前端面试题攻略前端面试前端入 手册网:http://www.shouce.ren/post/index 超级有用的前端基础技术面试问题收集:http://www.codec...

    snifes 评论0 收藏0
  • 前端面试 - 收藏集 - 掘金

    摘要:一基础接口的意义百度规范扩展回调抽象类的意义我的前端面试经历百度前端掘金博主就读于电子科技大学,大三狗一枚面试是个漫长的过程,从海投到收获电话面试,一面二面三面,一个步骤出错那么后面就宣告终结。 一道常被人轻视的前端 JS 面试题 - 前端 - 掘金 目录前言第一问第二问变量声明提升函数表达式第三问第四问第五问第六问构造函数的返回值第七问最后前言 年前刚刚离职了,分享下我曾经出过的一道...

    lpjustdoit 评论0 收藏0
  • 深入理解js

    摘要:详解十大常用设计模式力荐深度好文深入理解大设计模式收集各种疑难杂症的问题集锦关于,工作和学习过程中遇到过许多问题,也解答过许多别人的问题。介绍了的内存管理。 延迟加载 (Lazyload) 三种实现方式 延迟加载也称为惰性加载,即在长网页中延迟加载图像。用户滚动到它们之前,视口外的图像不会加载。本文详细介绍了三种延迟加载的实现方式。 详解 Javascript十大常用设计模式 力荐~ ...

    caikeal 评论0 收藏0
  • 求职准备 - 收藏集 - 掘金

    摘要:一基础接口的意义百度规范扩展回调抽象类的意义想不想通过一线互联网公司面试文档整理为电子书掘金简介谷歌求职记我花了八个月准备谷歌面试掘金原文链接翻译者 【面试宝典】从对象深入分析 Java 中实例变量和类变量的区别 - 掘金原创文章,转载请务必保留原出处为:http://www.54tianzhisheng.cn/... , 欢迎访问我的站点,阅读更多有深度的文章。 实例变量 和 类变量...

    cuieney 评论0 收藏0

发表评论

0条评论

tinysun1234

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<