当前位置: 首页 > news >正文

前端面试题总结

还有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); 将一个元素设置为缩放无限小,元素将不可见,元素原来所在的位置将被保留
<div hidden="hidden"> HTML5属性,效果和display:none;相同,但这个属性用于记录一个元素的状态
height: 0; 将元素高度设为 0 ,并消除边框
filter: blur(0); CSS3属性,将一个元素的模糊度设置为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的面试题,之后再继续补充

相关文章:

  • VUE es6技巧写法(持续更新中~~~)
  • 用jquery写贪吃蛇
  • 解析Vue-router相关基础知识及工作原理
  • 订单的业务流程
  • 序列化与反序列化
  • java~@Async异步功能
  • 给Prometheus造假数据的方法
  • [BZOJ1040][P2607][ZJOI2008]骑士[树形DP+基环树]
  • java Concurrent包学习笔记(六):Exchanger
  • 理解 Web 中的Session
  • bzoj3295: [Cqoi2011]动态逆序对
  • 北大、微软提出NGra:高效大规模图神经网络计算
  • SQL Server事务日志管理的进阶,第5级:在完全恢复模式下管理日志
  • zabbix3.4 端口和进程监控配置
  • Java 面试之技术框架
  • [微信小程序] 使用ES6特性Class后出现编译异常
  • 《网管员必读——网络组建》(第2版)电子课件下载
  • 【划重点】MySQL技术内幕:InnoDB存储引擎
  • ABAP的include关键字,Java的import, C的include和C4C ABSL 的import比较
  • Angular 响应式表单 基础例子
  • ECMAScript6(0):ES6简明参考手册
  • go语言学习初探(一)
  • node-glob通配符
  • php的插入排序,通过双层for循环
  • React 快速上手 - 07 前端路由 react-router
  • ucore操作系统实验笔记 - 重新理解中断
  • zookeeper系列(七)实战分布式命名服务
  • 类orAPI - 收藏集 - 掘金
  • 理解在java “”i=i++;”所发生的事情
  • 聊聊flink的BlobWriter
  • 我从编程教室毕业
  • 最近的计划
  • 【干货分享】dos命令大全
  • 京东物流联手山西图灵打造智能供应链,让阅读更有趣 ...
  • # 再次尝试 连接失败_无线WiFi无法连接到网络怎么办【解决方法】
  • #每天一道面试题# 什么是MySQL的回表查询
  • $refs 、$nextTic、动态组件、name的使用
  • (01)ORB-SLAM2源码无死角解析-(66) BA优化(g2o)→闭环线程:Optimizer::GlobalBundleAdjustemnt→全局优化
  • (JSP)EL——优化登录界面,获取对象,获取数据
  • (补)B+树一些思想
  • (附源码)springboot课程在线考试系统 毕业设计 655127
  • (附源码)基于SpringBoot和Vue的厨到家服务平台的设计与实现 毕业设计 063133
  • (推荐)叮当——中文语音对话机器人
  • (转)winform之ListView
  • .bat批处理(九):替换带有等号=的字符串的子串
  • .halo勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复
  • .NET Core 版本不支持的问题
  • .NET DevOps 接入指南 | 1. GitLab 安装
  • .NET 使用 ILRepack 合并多个程序集(替代 ILMerge),避免引入额外的依赖
  • .net通用权限框架B/S (三)--MODEL层(2)
  • ?php echo ?,?php echo Hello world!;?
  • [20150707]外部表与rowid.txt
  • [202209]mysql8.0 双主集群搭建 亲测可用
  • [2544]最短路 (两种算法)(HDU)
  • [android] 手机卫士黑名单功能(ListView优化)