那年总结的前端面试题,有没有你遇到的?

时间:2021-11-18 来源:未知网络 作者:996建站网

问答题:
1. 块元素和行内元素的区别是什么?各列举几个?
答:块:div form li ul dl dt h1 h2 table
行:a span br strong b
区别:块级元素独占一行;块级元素可设置宽高(有大小);块级元素可以设置padding,margin,行级元素padding,margin只可设置左右,上下无效;
2.CSS盒模型是什么?
答:具有content border padding margin属性
3.你了解浏览器在CSS方面的兼容性问题与CSSHack技巧有哪些?
答:IE6双边距问题 display:inline;
IE7以及所有标准浏览器能识别!important
IE都能识别*;标准浏览器(如火狐)不能识别*
IE6支持下划线,IE7和firefox均不支持下划线
Ie6 _html
Ie7特有*+html
IE Box的总宽度是:width+padding+border+margin宽度总和;
FF Box的总宽度就是:width的宽度,padding+border+margin的宽度在含在width内。
作为外部wrapper的div不要定死高度, 最好还加上 overflow: hidden;以达到高度自适应;

1)火狐下给div设置padding后会导致width和height 增加, 但IE不会。(可用!important解决)
2)垂直居中,将 line-height设置为当前div相同的高度, 再通过vertical-align: middle;( 注意内容不要换行)
3)水平居中,margin:0 auto;(当然不是万能)
4)若需给a标签内内容加上样式, 需要设置 display: block;(常见于导航标签)
5)浮动IE产生的双倍距离
在IE下,当一个div设置了float后,然后给他设置margin,就会出现加倍的margin,解决的办法是给div设置display:inline。
4.CSS层叠式什么?在什么情况有效?
答:Css层叠是指样式的优先级,在产生冲突时优先级高的样式有效
Css样式优先级:!important>id>class>tag
5.Http对应的协议状态吗与对应描述有哪些?(附件HTTP状态码)
答:100:switching protocols(切换协议)
200:OK(成功),一切正常
300:multiple Choices(多种选择)
404:not found (未找到)
6.IE和FF的js兼容性知道那些?
答:getYear()方法 解决办法getFullYear()
const声明 解决办法 var声明
ie styleFloat ff cssFloat
IE innerHTML ff textContent

7.什么是三元表达式?三元代表什么意思?
答:格式:表达式?值1:值2
说明:当表达式成立结果是值1否则就是值2;
三元指的是三个参数。
8.Ajax是什么?
答:Ajax是异步的javascript和XML
9.’==’和’===’有什么不同?
== 两边数据类型必须一致才能作比较,值相同就为真
=== 比较的是类型和值都相同才为真
10.call和apply的区别与作用是什么?
区别:call是传值 调用一个对象的方法,以另一个对象替换当前对象。
Apply传数组 应用某一对象的方法,用另一个对象替换当前对象。
11.闭包是什么?
答:有权访问一个函数内部变量的私有函数。
12.闭包好处在哪里?
答:希望一个变量长期驻扎在内存当中。
避免全局变量的污染。
私有成员的存在。
应用:模块化,在循环中直接找到对象元素索引。
13.闭包需要注意的地方?
答:在IE下有可能引发内存泄露。
解决方法:window.onunload=function(){}退出浏览器触发。
14.js中的垃圾回收机制
答:当一个函数执行完毕后里边变量就会被释放
15.请值出get(),[],eq()的区别?
答:eq()返回一个jQuery对象,get返回一个dom对象。[]是一个数组。
16.前端优化知识?(附件页面优化)
答:
1) 减少HTTP请求次数:CSSspirit,data uri
2) Js,CSS 源码压缩
3) 模块化代码开发
4) 前端模板 js+数据减少由HTML标签导致的带宽浪费。
5) 用innHTML代替DOM操作,减少DOM操作次数,优化javascript性能
6) 用setTimerout来避免页面失去响应
7) 用hash-table优化查找
8) 能操作className,尽量不要直接操作style
9) 缓存DOM节点查找结果
10) 避免使用CSSexpression
11) 图片预加载
12) 避免是用table布局,用div+CSS布局,尽量使用语义化的标签布局。
17.实现自动换行?
White-space:pre-wrap;
18.nodejs是什么?
是一种可以运行在浏览器上脚本语言可以放在服务器上。
19. 什么是网站重构?
答:在不改变外部行为情况下进行源码修改。
20.table与div布局的优缺点?
答:table优点:开发实践端纯table不会有浏览器兼容问题,内容可以自适应。在搜索引擎靠前。
缺点:不利于变更,加载速度慢,维护困难。
Div内容和显示样式能够分离,便于维护,比table加载速度要快一些。
21.如何实现隔行变色?
答:tr:nth-child(odd);
22.js框架的优缺点?
答:优点:免费开源 简化了开发过程 解决了兼容性问题 减少代码量 统一代码功能提高代码效率 降低开发难度
缺点:引入js库。有开销。
23.怪异模式什么时候出现?有什么影响?对于现代CSS有用吗?
答:在没有文档类型声明时候回出现
渲染页面和标准会有差距,严重会引起布局混乱。
有用。规定统一代码标准。
24.CSS匹配顺序是什么?你对这有什么看法。
答:CSS选择器会从右往左匹配标记
看法:在使用选择器的时候尽量让最右边的匹配范围缩小。
25.如何让一个位置宽高的图片在一个容器水平垂直居中?
答:width: 500px ;height: 500px;background: #ccc;text-align:center;display:table-cell;vertical-align:middle;
26.写一个左侧宽度固定,右侧宽度自适应?
答:

p{margin: 0 auto;}
.container{margin: 20px 30px;color: white;}
.left{position: relative; float: left; width: 200px;margin-right: -200px;background: red;}
.right{float: right; width: 100%;}
.right div{margin-left: 200px;}
.right div p{background: green;}

布局:<div class="container">
<div class="left">
<p>左侧</p>
</div>
<div class="right">
<div>
<p>右侧自适应</p>
</div>
</div>
</div>

27.写出一个左右宽度相等的布局(如果左侧高,右侧就跟着左侧走,右侧高就跟着右侧走)
答.container{border: 1px solid #ccc;overflow: hidden;}
.right{width: 100px; background: green; float: left;margin-bottom:-9999px;padding-bottom: 9999px;}
.left{width: 200px; background:red; float: left;margin-bottom:-9999px;padding-bottom: 9999px;}
28.写出一个高度为1px的div并兼容所有浏览器?
答:div{height:1px;background:red;overflow:hidden;}
29.line-height: 150%与line-height:1.5em的区别?
答: em 相对单位 相对于父元素字体的倍数 默认相对16px
% 百分比 相对于父元素尺寸计算的盒图的大小 却别于em是设置字体的

30.前端由那三层构成?作用是什么?
答:结构:用HTML进行布局
表现: 用CSS设置页面显示样式
行为:用js实现一些动态效果
31.看下面这段代码,当代码运行时,为什么无法显示div的颜色?请解释为什么?
<div style=”background-color:yellow;”>
<div style=”background-color:red;float:left;>为什么只有我</div>
<div>
因为子级div浮动引起塌陷。
32.inline-block空隙解决方案,写出关键代码即可?
答:font-size:0;
33.移动端开发与PC端主要有哪些差异?
答:移动端开发不用考虑兼容行问题,需要考虑的是在各个设备上兼容显示
Pc端开发考虑各个浏览器的内核不同,显示的样子不同,有兼容问题
34.列举目前HTML5支持的新特性?
答:新增许多语义化标签比如 header footer aside nav section article canvas
音视频video audio
表单域email url number range time search color
表单元素datalist output
增加了许多API.离线存储
35.求表达式的值
答:typeof([]) object
typeof({}) object
typeof(NaN) number
typeof(null) object
typeof(‘abce”*1) 报错
typeof(‘abce’)+1) 报错
NaN==NaN false
!NaN==!NaN true
36.如下两个div垂直距离是多少?
<div style=”margin-bottom: 20px;”></div>
<div style=”margin-top:10px;”></div>
答:20
37.编写CSS让div2在div1的右下角。
答: body{margin: 0;}
.div1{width: 200px;height: 200px;border:1px solid #ccc;}
.div2{position:absolute: top: 200px;left: 200px; width: 200px;height:200px;background:red;}
38.编写一个已知宽高的div元素水平居中。
答:div{width: 200px;margin: 0 auto;}
39.以下div背景是什么颜色的?
.a{background:red;}
.b{background: green;}
<div class=”a b”></div>
答:绿色。

40.用CSS给如下按钮设置背景图片gb.jpg,并隐藏按钮上的文字。
<input type=”button” value=”提交”>
答:input{background:url(bg.jpg);text-indent:-999px;width:200px;}
41.什么是haslaout属性,会带来什么后果?
答:haslayout 是一个只访问object.currentStyle.haslaout只读属性。
如果不激发此属性。他会自动计算子元素的内容,自己随着变大。
Haslaout为true的话获取布局状态。由它控制及其子元素的尺寸和定位
激活一般用zoom来激活。
42.将如下字符串转变成json对象
Var str=”{a:1,b:2,c:true,d:’hello’}”;
答:1.json=eval(‘(’+str+’)’)
2. json1=(new Function("return"+str))(); IE6/7中当字符串中含有换行(\n)时,new Function不能解析.
3.JSON.parse(str) 建议使用单字符串必须符合规范。
43.在如下数组第二个元素后插入一个元素3.
Var ar=[1,2,3,4,5,6];
答: 1.var cc=ar; ar=[];for(var i=0;i<cc.length;i++){if(i==2){ar.push(3)}ar.push(cc[i])}
2.ar.splice(2,0,3);
44.请根据每个元素的i属性,由小到大,排序如下数组。
var ar=[{i:4,v:1},{i:2,v:4},{i:3,v:2},{i:1,v:5},{i:4,v:3}]
答:ar.sort(function(a,b){return a.i-b.i})
45.以下字符串作为分隔字符串,将如下字符串拆分成数组(每个元素不能含有空格)。
var str=”a b c 20 d e f g 123”;
答:str.replace(/\s+/g," ").split(" ");
45.请将如下数据库表的记录用json表示出来
id name city
————————–
1 Tom London
2 John Newyork
3 Alice Paris
答:[{"id":1,"name":"tom","city":"London"},{"id":1,"name":"John","city":"Newyork"},{"id":1,"name":"Alice","city":"Paris"}]
46.编写代码让f1继承f2的所有成员。
function f2(){this.a2=3;this.b2=5}
function f1(){this.a1=1;this.b1=2}
答:1.f2.call(f1) 2. f1.prototype=new f2(); 3.f2.apply(f1)
47.把16进制颜色转变成rgb颜色,如:#FFFFFF等同rgb(255,255,255);
答: function colorRgb(color1){
color1=color1.toLowerCase();
var changeArr=[];
for(var i=1;i<color1.length;i+=2){
changeArr.push(parseInt("0x"+color1.slice(i,i+2)))

}
return "RGB("+changeArr.join(",")+")";}
47.Javascript里的typeof返回结果又那几种?
答:值类型:number string boolearn
引用:object function
标识类型:undefined null
48.如何把一个字符串里的所有单词的第一个字符变大写?
答: 1.css text-transform:capitalize;
2.function toUpper(str){
return str.replace(/\b\w|\s+\w/g,function(s){return s.toUpperCase()})}
3. function toUpper(str){
return str.replace(/\b\w+\b/g,function(str1){return str1.substr(0,1).toUpperCase()+str1.substring(1);})
49.如何获取下拉框中选项的内容?
答:document.getElementsByTagName(“select”)[0].getElementsByTagName(“option”)[0].innerHTML
50.setInterval(function(){setTimeout(function(){alert(‘say’)},5000)},1000)代码运行后,提示多久一次?
答:提示第一次5秒,往后都是1秒一提示。
51.假如一个父容器里有1万个子元素,要给他们全部都个字绑定上事件,如何绑性能最好?
答:绑定对象原形prototype上
52.怎么判断一个对象是数组类型的?
答:对象 instanceof Array
53.javascript有哪些方法可是实现继承?
答:call apply 原形prototype
54. 如何使用CSS单独定义IE6,7,8width:属性?
答:width:100px;//所有 *width: 200px;//IE6,7_width: 300px;//IE6*+width: 400px;//IE7,FF width: !important
55.XHTML和HTML有什么区别?
答:XHTML是可扩展超文本标记语言HTML是超文本标记语言
XHTML 元素必须正确嵌套 全部小写 标签必须关闭 必须有根元素 必须声明 必须特殊字符处理 但标记用空格/结束 id属性代替name属性 必须符合文档规范。
56.CSS引入方式有哪些?[email protected]
答:内联 导入 外链 内嵌 区别:@import 有兼容问题 页面加载完之后加载 属于CSS范畴 不可以用javascipt修改 而LINK恰好5相反。Link加载的是用那个加载那个
57.CSS选择符有哪些 ?哪些属性可以继承?优先级算法如何计算?内联和important那个优先级高?
答:标签 类 ID 群组 后代 兄弟 *等
继承:内联元素课继承letter-spacing word-spacing white-space line-height color font font-family font-style font-variant font-weight text-decortaion text-transform direction
所有元素可继承 visibility cursor
块状可继承: text-indent和text-align;
列表:list-style list-style-position list-style-image
优先级: a 行内样式 b ID选择器数量 c属性伪类 类 d标签 看权重abcd
Important优先级高
58.CSS基本语句构成是?
答:选择器{属性:值;属性:值;}
59.你做页面在哪些浏览器测试过,这些浏览器的内核是什么?
答:IE trident\ FF Gecko\ chorome webkit \opera(presto)
60.img标签上title和alt属性区别是什么?
答:alt 当图片无法加载时用文字带表 title 当鼠标划到图片上显示的文字。
61.描述CSS reset的作用和用途?(附件CSS reset);
答:重置默认样式、各个浏览器默认样式,CSS reset让这些不同的样式进行同时。避免滥用CSSreset
62.CSS sprites是什么?如何使用?
答:CSS sprites也称CSS精灵。是网页一些小图片整合到一张大图片,减少HTTP请求。
63.浏览器标准模式和怪异模式之间有什么区别?
答:盒子模型 渲染模式不同。使用window.top.document.compatMode显示什么模式。
64.你如何对网站的文件和资源进行优化?期待的解决方案包括?
答:模块化代码 CSS/JS压缩 使用CDN托管 缓存使用
65.什么是语义化HTML?
答:直观的认识标签,标签具有自己的含义。对搜索引擎抓取有好处。
67.清楚浮动的几种方式?
答:1.overflow:hidden; *zoom:1;
2.使用空标签 clear :both;
3.after为元素清楚。*zoom:1;
68.列举3中强制类型转换和2中隐式类型转换?
答: 强制:parseInt parseFloat number
隐式:== +
69.split() join()的区别?
答:split()是将一个字符串按一个字符分割成数组
Join()是将一个数组按一个字符链接成一个字符串。
以上两个函数是是将数组和字符串进行转换。
70.数组方法pop(), push(),shift(),unshift().
答:pop()是从尾部删除 push()尾部添加 栈
Shift()是从头部删除 队列 unshift头部删除
71.事件绑定和普通事件有什么区别?
答:事件绑定可以给一个对象绑定一个事件多次
普通事件一个事件不可以绑定多次
72.IE和DOM事件流的区别?
答:执行顺序不一样 参数不一样 事件加不加on this 指向问题
73.IE和标准下有哪些兼容写法?
答: var ev =e||window.event;
Document.documentElement.clientWidth||document.body.clientWidth;
Var target=ev.srcElement||ev.target
74.ajax请求的时候get和post方式的区别?
答:get是通过URL地址栏进行传递的 有大小限制1024KB 有安全问题 应用于论坛
Post是通过和文档一器打包传送的 传送数据大 传送密码等数据。
75.call和apply区别?
答:object.call(thi.obj1,obj2); object.apply(this,arguments);
76.ajax请求是,如何解释json数据?
答:eval(‘(’+str+’)’) JSON.parse(str)
77.b继承a的方法?
答:b.call(a);

78.写一个获取非行间样式的函数?
答:function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
79.事件委托是什么?
答:利用事件冒泡原理,让自己所触发的事件,让父元素代替执行。
80.如何阻止事件冒泡和默认是事件?
答:事件冒泡:ev.stopPropagation() ev.cancelBubble=”true”
默认事件 ev.preventDefault() return false ev.returnValue=false
81.添加 删除 替换 插入的方法?
答: appendChild() removeChild() replaceChild() insertBefore();
82.解释jsonp的原理,以及为什么不是真正的ajax.
答:jsonp是JSON with Padding 是动态传送javascript对象
原理:动态的创建script标签,回调函数。 Ajax是页面无刷新请求数据操作。
83.document load和document ready对区别?
答:window.onload 是在结构加载完毕才执行js、
window.ready jQery中有$().ready(function(){}); 文档结构加载中执行
84.Javascript的同源策略?
答:同源策略是由Netscape提出的一个著名的安全策略,现在所有的javascript都支持这个策略。
所为的同源是指域名 协议 端口相同称为一个源。
85.编写一个数组去重的方法?

Array.prototype.unique1=function(){
var arr=[];
for(var i=0;i<this.length;i++){
if(arr.indexOf(this[i])==-1){
arr.push(this[i]);
}
}
return arr;
}

Array.prototype.unique2=function(){
var n={ },b=[];
for(var i=0;i<this.length;i++){
if(!n[this[i]]){
n[this[i]]=true;
b.push(this[i]);
}
}
return b;
}

Array.prototype.unique3 = function() {
var n = [this[0]];
//结果数组
for(var i = 1;i < this.length;i++) //从第二项开始遍历 {
//如果当前数组的第i项在当前数组中第一次出现的位置不是i,
//那么表示第i项是重复的,忽略掉。否则存入结果数组
if (this.indexOf(this[i]) == i) n.push(this[i]);
}
return n;
}

A =Array.from(new Set(a));

85.网站瘫痪了怎么办?

答:先把备用空间传上去保证正常运行,注意排查网站奔溃元婴,备份重要。

86.解释下相对定位和绝对定位?

答:相对定位postion:relative位置改变还会占用原来位置。

绝对定位position:absolute;失去文档流,以祖先有定位的元素进行定位。

87.Doctype声明各类的区别?

答<!docttype HTML>这是HTML5的声明,以前版本都包括,HTML4的声明太长。

88.解释下zoom;

答:在IE里面触发haslaout; 样式排除法 检查页面是否闭合 检查是否清楚浮动 模块确认法;

89.列举几个HTML的标签及CSS3属性?

答:section header footer aside article nav video audio;

background-origin background-clip background-clip background-break word-wrap word-break white-space @font-face opacity rgba text-shadow box-shadow border-radius border-image

90.如何用JQery实现一个弹出层?

<html lang="en">

<head><style type="text/css">

body{margin:0;}

.bg{background: green; opacity: 0.4;position: absolute;z-index: 1;left:0;top:0;}

.box{width:400px; height: 200px; color: white; background: #808080; border: 1px solid #222;font-size: 40px;text-align: center;position:absolute;z-index: 10;display: none; }

.close{width:40px; height:20px; line-height: 20px; cursor: pointer; background: white; color:#000;font-size: 8px;position: absolute; right: 0; top:0;}

.show{background: #989898; padding:5px;width: 100px;text-align: center;color:white;cursor:pointer;}

</style>

<script src="jquery-1.11.3.min.js"></script>

<script type="text/javascript">

$(function(){$(".show").click(function(){$(".bg").css({"height":$(document).height(),"display":"block","width":"100%"}

)

$(".box").css({"display":"block","left":$(document).width()/2-200+"px","top":$(document).height()/2-100+"px"})})

$(".close").click(function(){$(".bg,.box").css({"display":"none"})}

)});

</script>

</head>

<body><div class="show">显示</div><div class="bg"></div>

<div class="box">

弹出我

<div class="close">关闭</div>

</div>

</body>

</html>

91.现在许多网页都会由一个漂浮在网页上的回到顶部按钮如何用jQuery实现?

答:$(document).scrollTop(0);

92.现在有数组[1,2,3,4,5,6,7,8,9]请输出随机打乱后的数组?

答:array.sort(function(){return 0.5-Math.random()})

93.test{height: 25px;line-height: 25px;}这段代码在IE中和FF中显示高度是否一样?如果不一样,请写出实际高度?

答:一样;

94.下面代码有什么问题吗?

<p> 你真的了解HTML吗?<br><br> 我说:<br>是的,我很了解

答:有问题 应该闭合标签 空格换行应该应用CSS统一控制

95.form中的input可以设置为readonly和disable,请问两个有什么区别?

答:readonly 只读,不能修改 但能提交

Disable 不能操作 也不能获取焦点,提交表单是不能被提交。

96.在HTML5中如何嵌入一段视屏?如何嵌入一段音频

答: video 插入视屏 <video src=”kk.org” autoplay loop controls ></video>

Audio 插入音频 <audio src=”kk.org” ></audio>

97.在HTML中canvas元素的用法是什么?

答:获取canvas getContext(‘2d’)指定画布 然后对画布进行操作

98.CSS3自定义动画的用法?

[email protected] 动画名称{

0%{transform:translate(0);opacity:1;}

50%{transform:translate(100px);opacity:.8;}

70%{transform:translate(200px);opacity:.5;}

100%{transform:translate(300px);opacity:1;}

}

选择器{

Animation-name:调用动画的名称;

Animation-duration: 2s;持续时间

Animation-timing-function: ease-in;缓动效果

Animation-fill-mode: forwards;动画结束后的状态

Animation-iteration-count:3动画循环次数

Animation-direction: altermate;动画的方向

}

98.编写reverse方法,是的foo()函数调用弹出1的对话框,代码尽量简单。

<script>

function foo(){

var str=reverse(‘a,b,c,d,e,f,g’)

if(str==’g,f,e,d,c,b,a’)alert(1)

else{alert (0);

}

</script>

答:function reverse(str){var a=str.split(",");var n=[];n=a.reverse();return n.join(",")}

99.以下代码的结果,并说明原因?

Alert(function instanceof Object); true 数组是对象

alert(object instanceof function); true 对象里也有数组

100.以下常见自由属性对应浏览器?

答:-o- opera -webkit chrome -ms-IE -moz-firefox

101.如果你来制作一个访问量很高的网站,你会如何管理所有的CSS文件JS与图片。

答:分类放在各个文件夹,压缩CSS和js 模块化开发

102.超链接访问过后的hover样式不出现问题吗?

答:出现 要按照link-visited-hover-active的顺序设置就不会出现问题了。

103.如何设置滚动条的颜色?为什么web标准中IE无法设置滚动条颜色?

答:/* 设置滚动条的样式 */

::-webkit-scrollbar {

width: 5px;

}

/* 滚动槽 */

::-webkit-scrollbar-track {

-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);

border-radius: 10px;

}

/* 滚动条滑块 */

::-webkit-scrollbar-thumb {

border-radius: 10px;

background: rgba(0, 0, 0, 0.1);

-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);

}

::-webkit-scrollbar-thumb:window-inactive {

background: rgba(255, 0, 0, 0.4);

}

IE中设置html {

scrollbar-face-color:red;

scrollbar-highlight-color:#fff;

scrollbar-shadow-color:#eeeeee;

scrollbar-3dlight-color:#eeeeee;

scrollbar-arrow-color:#000;

scrollbar-track-color:#fff;

scrollbar-darkshadow-color:#fff;

}

104. Firefox嵌套div标签的居中问题的解决方法?

答:给里边div设置margin: o auto;

105. firefox下为什么父容器的高度不能自适应:在子容器加了浮动属性后,该容器不能自动撑开,解决办法是

答:清楚内部浮动。

106.如何让下面两个span纵向显示?

<span style=’background-color:red’>我要去上边</span>

<span style=’background-color:blue’>我要去下边</span>

答:变为块元素,设置宽度。

107.谈谈js数组排序sort()的使用,重点谈谈sort()参数的使用及其内部机制。

答:对数组进行排序。参数是一个函数 函数会接受两个值a b 若 a>b 返回大于0,

a=b 返回0,a<b返回小于0.方法接受到参数会进行排序

108.HTML语义化

答:用一些有一定代表显示内容的标签 比如 p blockqute ul 还是有H5 定义的例:header section article nav footer aside

109.JS在什么位置插入最好?

答:把js文件放在底部最佳。

110.web标准以及w3c的理解与认识?

答:标签闭合、标签小写 、不乱嵌套、提高搜索机器人搜索效率、使用外、链CSS和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件、容易维护、改版方便,不需要变动页面蓉蓉、提供打印版本而不需要复制内容、提高网站易用性。

112.简述一下src与href的区别?

答:href是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的连接,用于超链接。

Src:是指向外部资源位置,指向的内容会嵌入到文档中当前所在位置,在请求资源是会将其指向的资源下载,并应用到文档内,例如js脚本,img 图片和frame等元素。当浏览器解析到该元素是,会暂停其他支援的下载和处理,直到该资源加载、编译、执行完毕、图片和框架等元素也是如此,类似于将所指向的资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

113.什么是CSSHack?

答:一般针对不同浏览器不同的CSS,就是CSShack.

IE浏览器一般分为三种 条件 hack、属性级hack、选择符hack。、、

114. 实现一个函数clone,可以对JavaScript中的5种主要的数据类型(包括Number、String、Object、Array、Boolean)进行值复制。

/** * 对象克隆 * 支持基本数据类型及对象 * 递归方法 */ function clone(obj) { var o; switch (typeof obj) { case "undefined": break; case "string": o = obj + ""; break; case "number": o = obj – 0; break; case "boolean": o = obj; break; case "object": // object 分为两种情况 对象(Object)或数组(Array) if (obj === null) { o = null; } else { if (Object.prototype.toString.call(obj).slice(8, -1) === "Array") { o = []; for (var i = 0; i < obj.length; i++) { o.push(clone(obj[i])); } } else { o = {}; for (var k in obj) { o[k] = clone(obj[k]); } } } break; default: o = obj; break; } return o; }

115.在javascript中什么是伪数组?如何将伪数组转化为标准数组?

答:伪数组(类数组):无法直接调用数组的方法或期望length属性有什么特殊的行为,但仍可以对真正数组遍历方法来遍历他们。典型的是函数的argument参数,还有像调用getElementsByTagName,document.childNodes之类的,他们返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array 对象。

Function log(){

Var args=Array.prototype.slice.call(arguments);

Args.unshift(‘(app)’);console.log.apply(console,args);}

116.javascript中callee和caller作用?

答:caller是返回一个对函数应用,该函数调用了当前函数;

Callee是返回正在被执行的function函数,也就是所指定的function对象的正文。

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

答:sessionStorage用于本地存储一个回话(session)中的数据,这些数据只有在同一回话中的页面才能访问并且当回话结束数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

Web Storage的概念和cookie相似,区别他是为了更大量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面时候cookie都会被发送过去,这样无形中浪费带宽,另外cookie还需要指定作用域,不可以跨域调用。

除此之外,web Storage拥有setItem,getItem,removeItem,clear等方法不像cookie需要前端开发者自己封装setCookie,getcookie但是cookie也是不可以或缺的:cookie作用是与服务器进行交互,作为HTTP规范的一部分而存在,而WEB Storage仅仅是为了本地存储数据而生的。

118.编程实现javascript在String中写一个方法trim要求能去除一个字符串开始和结尾的空格?

答:function trim(){var str=this;var reg=/^\s+\b\w++\b\s+$/;str.replace(reg,"")}

119.给jQuery扩展一个新空方法,方法名称为newFunc.

答:jQuery.fn.extent({“newFunc”,function(){}})

120.编程实现使用javascript实现一个深拷贝方法。

答:对象.cloneNode(true)

那年总结的前端面试题,有没有你遇到的?插图

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序