整理一些最近经常遇到的前端面试题


Posted in Javascript onApril 25, 2017

前言

本文主要整理了一些最近遇到的前端面试题,方便大家在面试前有所准备,文中给出了详细的解答,下面话不多说了,来看看详细的介绍吧。

1、标签属性中title和alt的区别

答:

title是设置鼠标移动到图片上时显示的内容,而alt是用于当图片没有正常显示时出现的提示文字,另外alt还用于在seo中针对图片的优化说明.

2、隐藏元素的几种方法

答:

     1.display:none;

     2.visibility:hidden;

     3.opacity:0;

     4.position:absolute;

        left:-10000px;

3、JavaScript中有哪几种数据类型

答:

JavaScript中有5种简单数据类型(也称为基本数据类型):Undefined、Null、Boolean、Number和String。还有1种复杂数据类型——Object,Object本质上是由一组无序的名值对组成的

4、回答以下输出的类型

答:

alert(typeof(null));//object
alert(typeof(NaN));//number
alert(typeof(undefined));//undefined
alert(typeof(“undefined”));//string
alert(NaN == undefined);//false
alert(NaN == NaN);//false

5、用jquery和原生js获取元素中的内容

答:

JS:document.getElementById(“div1”).innerHTML;
document.querySelector(“#div1”).innerText;
JQ:$(“#div1”).html()

6、用原生js封装一个添加监听事件的兼容写法

答:

function addEvent(obj,event,fn){
 //现代:addEventLister 不用加on
 //ie:touchEvent 需要加on
 if (window.addEventListener){
 obj.addEventListener(event,fn);
 }else{
 obj.attachEvent("on"+event, fn);
 }
}

7、对跨域的理解和解决办法

答:

跨域简单的理解即为当前服务器目录下的前端需求要请求非本服务器(本域名)下的后台服务就称为跨域请求。跨域请求我们使用普通的ajax请求是无法进行的同源策略,一般来说位于 server1.example.com 的网页无法与不是 server2.example.com的服务器沟通,或者说如果在server1.example.com下想获取server2.example.com的话就得用跨域请求。

跨域的解决方法及解决:通过script标签请求,或者通过jQuery跨域

8、Ajax的原理

答:

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。

XMLHttpRequest是ajax的核心机制,它是在IE5中首先引入的,是一种支持异步请求的技术。简单的说,也就是javascript可以及时向服务器提出请求和处理响应,而不阻塞用户。达到无刷新的效果。

9、jQuery库中的$()是什么

答:

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

10、JavaScript的window.onload事件和jQuery的ready函数有何不同

答:

JavaScript的window.onload事件和jQuery的ready函数之间的主要区别是,前者除了要等待DOM被创建还要等到包括大型图片、音频、视频在内的所有外部资源都完全加载。如果加载图片和媒体内容花费了大量时间,用户就会感受到定义在window.onload 事件上的代码在执行时有明显的延迟。

另一方面,jQuery的ready()函数只需对DOM树的等待,而无需对图像或外部资源加载的等待,从而执行起来更快。使用jQuery $(document).ready()的另一个优势是你可以在网页里多次使用它,浏览器会按它们在HTML页面里出现的顺序执行它们,相反对于onload技术而言,只能在单一函数里使用。鉴于这个好处,用jQuery的ready()函数比用JavaScript的window.onload 事件要更好些。

11、用原生js封装一个能获取元素到页面最上方和最左侧的函数,再用JQ封装一个同样的函数

答:

原生:

function offset(obj){
 var l = 0;
 var t = 0;
 while(obj){
 l+=obj.offsetLeft;
 t+=obj.offsetTop;
 obj = obj.offsetParent;
 }
 return {left:l,top:t};
}

jQuery:

$().offset().left;$().offset().top

12、如何实现一个EventEmitter

答:

主要分三步:定义一个子类,调用构造函数,继承EventEmitter

var util = require('util');
var EventEmitter = require('events');
function MyEmitter() {
 EventEmitter.call(this);
} // 构造函数
util.inherits(MyEmitter, EventEmitter); // 继承
var em = new MyEmitter();
em.on('hello', function(data) {
 console.log('收到事件hello的数据:', data);
}); // 接收事件,并打印到控制台
em.emit('hello', 'EventEmitter传递消息真方便!');

13、如何通过stream实现一个文件的复制

答:

var fs = require("fs");
var rs = fs.createReadStream(“1.jpg");
var ws = fs.createWriteStream("2.jpg");
rs.pipe(ws);

14、如何理解node的同步和异步

答:

”同步模式”就是上一段的模式,后一个任务等待前一个任务结束,然后再执行,程序的执行顺序与任务的排列顺序是一致的、同步的;”异步模式”则完全不同,每一个任务有一个或多个回调函数(callback),前一个任务结束后,不是执行后一个任务,而是执行回调函数,后一个任务则是不等前一个任务结束就执行,所以程序的执行顺序与任务的排列顺序是不一致的、异步的。

15、使用node构建一个服务器并对向”/post”发起的post请求进行处理,要求拿到post请求传输的数据(不包括文件上传)

答:

var http = require("http");
var queryString = require("querystring");
var server = http.createServer(function (req,res) {
 if(urlObj.pathname == "/post"){
 var str = "";
 req.on("data",function (chunk) {
 str+=chunk;
 });
 req.on("end",function () {
 var query = queryString.parse(str);
 console.log(query);
 })
 res.end("你请求的地址是"+urlObj.pathname);
 }
});
server.listen(8080);

16、用node模拟客户端发起请求

答:

var http = require("http");
var request = http.request({
 host:"localhost",
 port:"8080",
 path:"/request",
 method:"post"
},function (res) {
 res.on("data",function (chunk) {
 console.log(chunk.toString());
 });
});
request.write("user=zhang&pass=111");
request.end("请求结束");//结束本次请求

17、图片预加载的意义和原理

答:

预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中,这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速、无缝地发布,也可帮助用户在浏览网站内容时获得更好的用户体验。

实例代码:

//obj.imgArr 图片数组
//obj.loadingProgress 加载进度
//obj.loadingOver 加载结果
(function (){
 var imgObjs = [];
 loadingFn = function (obj) {
 var index = 0; 
 for (var i = 0; i < obj.imgArr.length; i++) {
 var imgObj = new Image();
 imgObj.onload = function() {
 index++;
 imgObjs.push(this);
 if (obj.loadingProgress){
 obj.loadingProgress(index, this);
 }
 if (index > obj.imgArr.length-1){
 obj.loadingOver(imgObjs);
 }
 }
 imgObj.src = obj.imgArr[i];
 }
 console.log(obj);
 }

18、浏览器页面有哪三层构成,分别是什么,作用是什么?

答:

浏览器页面构成:结构层、表示层、行为层

分别是:HTML、CSS、JavaScript

作用:HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能与业务。

19、什么是语义化的HTML?

答:

直观的认识标签,对于搜索引擎的抓取有好处,用正确的标签做正确的事情!

html语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析,在没有样式CCS情况下也以一种文档格式显示,并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于SEO。使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。

20、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元素;

21、CSS3有哪些新特性?

答:

CSS3实现圆角(border-radius: 8px),阴影(box-shadow: 10px),

对文字加特效(text-shadow),线性渐变(gradient),变换(transform)

transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜

还增加了更多的CSS选择器,多背景,rgba等

22、事件委托是什么?

答:

利用事件冒泡的原理,使自己的所触发的事件,让它的父元素代替执行!

23、什么叫优雅降级和渐进增强?

答:

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

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

24、JavaScript原型,原型链都是什么? 有什么特点?

答:

原型对象也是普通的对象,是对象一个自带隐式的 proto属性,原型也有可能有自己的原型,如果一个原型对象的原型不为null的话,我们就称之为原型链。

原型链是由一些用来继承和共享属性的对象组成的(有限的)对象链。

25、如何阻止事件冒泡和默认事件

答:

阻止冒泡:

现代浏览器:e.stopPropagation

低版本浏览器:e.cancelBubble=true

阻止默认事件:

现代浏览器:e.preventDefult()

低版本浏览器:return false

26、iOS苹果和微信中音频和视频实现自动播放的方法

答:

//一般情况下,这样就可以自动播放了,但是一些奇葩iPhone机不可以 
document.getElementById('audio').play(); 
//必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效 
document.addEventListener("WeixinJSBridgeReady", function () { 
 document.getElementById('audio').play(); 
 document.getElementById('video').play(); 
}, false);

27、解释GET/POST的区别

答:

GET请求,请求的数据会附加在URL之后,以?分割URL和传输数据,多个参数用&连接。URL的编码格式采用的是ASCII编码,而不是uniclde,即是说所有的非ASCII字符都要编码之后再传输。

POST请求:POST请求会把请求的数据放置在HTTP请求包的包体中。

因此,GET请求的数据会暴露在地址栏中,而POST请求则不会。

关于传输数据的大小

在HTTP规范中,没有对URL的长度和传输的数据大小进行限制。但是在实际开发过程中,对于GET,特定的浏览器和服务器对URL的长度有限制。因此,在使用GET请求时,传输数据会受到URL长度的限制。

对于POST,由于不是URL传值,理论上是不会受限制的,但是实际上各个服务器会规定对POST提交数据大小进行限制,Apache、IIS都有各自的配置。

关于安全性

Get是Form的默认方法,安全性相对比较低

28、描述一下cookies,sessionStorage和localStorage的区别

答:

sessionStorage和localStorage是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据。有了本地数据,就可以避免数据在浏览器和服务器间不必要地来回传递。

sessionStorage、localStorage、cookie都是在浏览器端存储的数据,其中 sessionStorage的概念很特别,引入了一个“浏览器窗口”的概念。sessionStorage 是在同源的同窗口(或tab)中,始终存在的数据。也就是说只要这个浏览器窗口没有关闭,即使刷新页面或进入同源另一页面,数据仍然存在。关闭窗口后,sessionStorage即被销毁。同时“独立”打开的不同窗口,即使是同一页面, sessionStorage对象也是不同的。cookies会发送到服务器端。其余两个不会。

Microsoft指出Internet Explorer 8增加cookie限制为每个域名50个,但IE7似乎也允许每个域名50个cookie。Firefox每个域名cookie限制为50个。Opera每个域名cookie限制为30个。Firefox和Safari允许cookie多达4097个字节,包括名name)、值(value)和等号。Opera许cookie多达4096个字节,包括:名(name)、值(value)和等号。Internet Explorer允许cookie多达4095 个字节,包括:名(name)、值(value)和等号。

区别:

Cookie:

  • 每个域名存储量比较小(各浏览器不同,大致 4K )
  • 所有域名的存储量有限制(各浏览器不同,大致 4K )
  • 有个数限制(各浏览器不同)
  • 会随请求发送到服务器

LocalStorage:

  • 永久存储
  • 单个域名存储量比较大(推荐 5MB ,各浏览器不同)
  • 总体数量无限制

SessionStorage:

  • 只在Session内有效
  • 存储量更大(推荐没有限制,但是实际上各浏览器也不同)

29、image和canvas在处理图片的时候有什么区别?

答:

image是通过对象的形式描述图片的。

canvas通过专门的API将图片绘制在画布上。

30、响应式布局的时候,轮播图使用两张不同的图片去适配大屏幕和超小屏幕,还是一张图片进行压缩适配不同终端,说明原因?

答:

最好使用两张不同大小的图片去适配大屏幕和超小屏幕,这样可以针对不同设备的屏幕大小,来加载响应的图片,减少超小屏幕设备的网络流量消耗,加快响应速度,同时防止图片在大屏幕下分辨率不够导致失真的问题。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Lazy Load 延迟加载图片的 jQuery 插件
Feb 06 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
Oct 14 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
Dec 10 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
May 13 Javascript
dwz 如何去掉ajaxloading具体代码
May 22 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
Jun 21 Javascript
Javascript中引用示例介绍
Feb 21 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
Jun 02 Javascript
JavaScript中的toUTCString()方法使用详解
Jun 12 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
Aug 21 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
Oct 09 Javascript
记一次vue去除#问题处理经过小结
Jan 24 Javascript
Vue.js 2.0学习教程之从基础到组件详解
Apr 24 #Javascript
js实现延迟加载的几种方法
Apr 24 #Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 #Javascript
浅析Angular2子模块以及异步加载
Apr 24 #Javascript
Angular2使用Guard和Resolve进行验证和权限控制
Apr 24 #Javascript
详解AngularJS 路由 resolve用法
Apr 24 #Javascript
详解AngularJS ui-sref的简单使用
Apr 24 #Javascript
You might like
php类自动加载器实现方法
2015/07/28 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
JS文本框默认值处理详解
2013/07/10 Javascript
JavaScript中的闭包(Closure)详细介绍
2014/12/30 Javascript
JavaScript获取当前日期是星期几的方法
2015/04/06 Javascript
jQuery在线选座位插件seat-charts特效代码分享
2015/08/27 Javascript
jQuery mobile 移动web(6)
2015/12/20 Javascript
JS实现的打字机效果完整实例
2016/06/20 Javascript
很实用的js选项卡切换效果
2016/08/12 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
2017/06/08 Javascript
jQuery Layer弹出层传值到父页面的实现代码
2017/08/17 jQuery
webpack学习笔记之优化缓存、合并、懒加载
2017/08/24 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
2018/08/19 Javascript
Angular脚手架开发的实现步骤
2019/04/09 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
2020/07/22 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
[01:05:12]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS CIS-GAME
2014/05/21 DOTA
[55:03]LGD vs EG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[00:19]CN DOTA NEVER DIE!VG夺冠rOtK接受采访
2019/12/23 DOTA
python生成圆形图片的方法
2020/03/25 Python
python怎么调用自己的函数
2020/07/01 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
英国拖鞋购买网站:Bedroom Athletics
2020/02/28 全球购物
公司联欢晚会主持词
2014/03/22 职场文书
2015年教师自我评价范文
2015/03/04 职场文书
浅谈PHP7中的一些小技巧
2021/05/29 PHP
Python多线程 Queue 模块常见用法
2021/07/04 Python
Java使用JMeter进行高并发测试
2021/11/23 Java/Android
python神经网络ResNet50模型
2022/05/06 Python
JavaScript圣杯布局与双飞翼布局实现案例详解
2022/08/05 Javascript
Elasticsearch6.2服务器升配后的bug(避坑指南)
2022/09/23 Servers