前端面试题目解析文档格式.docx
- 文档编号:18744936
- 上传时间:2023-01-01
- 格式:DOCX
- 页数:17
- 大小:27.87KB
前端面试题目解析文档格式.docx
《前端面试题目解析文档格式.docx》由会员分享,可在线阅读,更多相关《前端面试题目解析文档格式.docx(17页珍藏版)》请在冰豆网上搜索。
left;
(5)、按钮元素默认大小不一
各浏览器中按钮元素大小不一致
统一大小/(用a标记模拟)
在input上写按钮的样式,一定要把input的边框去掉。
hack3:
如果这个按钮是一个图片,直接把图片作为按钮的背景图即可。
(6)、百分比bug
在IE6及以下版本中在解析百分比时,会按四舍五入方式计算从而导致50%加50%大于100%的情况。
给右面的浮动元素添加声明:
clear:
right;
意思:
清除右浮动。
left:
清除左浮动
clear:
both:
清除两边的浮动
(7)、鼠标指针bug
cursor属性的hand属性值只有IE浏览器识别,其它浏览器不识别该声明,cursor属性的pointer属性值IE6.0以上版本及其它内核浏览器都识别该声明。
如统一某元素鼠标指针形状为手型,应添加声明:
cursor:
pointer;
8)、透明属性
IE浏览器写法:
filter:
alpha(opacity=value);
取值范围1-100
兼容其他浏览器写法:
opacity:
value;
(value的取值范围0-1,0.1,0.2,0.3-----0.9)
(9)、li里a加display:
block;
出现行高不一致;
给a加display:
inline-block;
//
2、ajax有什么优点有什么缺点
一、ajax的优点
Ajax的给开发者带来的好处大家基本上都深有体会,如下:
1、最大的一点是页面无刷新,在页面内与服务器通信,给用户的体验非常好。
2、使用异步方式与服务器通信,不需要打断用户的操作,具有更加迅速的响应能力。
3、可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。
并且减轻服务器的负担,ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。
4、基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。
二、ajax的缺点
1、ajax干掉了back按钮,即对浏览器后退机制的破坏。
后退按钮是一个标准的web站点的重要功能,但是它没法和js进行很好的合作。
这是ajax所带来的一个比较严重的问题,因为用户往往是希望能够通过后退来取消前一次操作的。
那么对于这个问题有没有办法?
答案是肯定的,用过Gmail的知道,Gmail下面采用的ajax技术解决了这个问题,在Gmail下面是可以后退的,但是,它也并不能改变ajax的机制,它只是采用的一个比较笨但是有效的办法,即用户单击后退按钮访问历史记录时,通过创建或使用一个隐藏的IFRAME来重现页面上的变更。
(例如,当用户在GoogleMaps中单击后退时,它在一个隐藏的IFRAME中进行搜索,然后将搜索结果反映到Ajax元素上,以便将应用程序状态恢复到当时的状态。
)
但是,虽然说这个问题是可以解决的,但是它所带来的开发成本是非常高的,和ajax框架所要求的快速开发是相背离的。
这是ajax所带来的一个非常严重的问题。
2、安全问题
技术同时也对IT企业带来了新的安全威胁,ajax技术就如同对企业数据建立了一个直接通道。
这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。
ajax的逻辑可以对客户端的安全扫描技术隐藏起来,允许黑客从远端服务器上建立新的攻击。
还有ajax也难以避免一些已知的安全弱点,诸如跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。
至少从目前看来,像ajax.dll,ajaxpro.dll这些ajax框架是会破坏程序的异常机制的。
5、另外,像其他方面的一些问题,比如说违背了url和资源定位的初衷。
例如,有一个url地址,如果采用了ajax技术,也许在该url地址下面看到的和别人在这个url地址下看到的内容是不同的。
这个和资源定位的初衷是相背离的。
6、一些手持设备(如手机、PDA等)现在还不能很好的支持ajax,如手机的浏览器上打开采用ajax技术的网站时,它目前是不支持的。
ajax的全称:
AsynchronousJavascriptAndXML。
异步传输+js+xml。
所谓异步,在这里简单地解释就是:
向服务器发送请求的时候,我们不必等待结果,而是可以同时做其他的事情,等到有了结果它自己会根据设定进行后续操作,与此同时,页面是不会发生整页刷新的,提高了用户体验。
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
(3)设置响应HTTP请求状态变化的函数
(4)发送HTTP请求
(5)获取异步调用返回的数据
(6)使用JavaScript和DOM实现局部刷新
3、如何使用c3创建一个三角形
把上、左、右三条边隐藏掉(颜色设为transparent)
#demo{
width:
0;
height:
border-width:
20px;
border-style:
solid;
border-color:
transparenttransparentredtransparent;
}
4、Canvas如何绘制一个矩形圆形三角形
5、Webkit和v8引擎有什么区别
Webkit:
解析css
V8:
解析js
浏览器如何渲染页面?
6、会不会nodejs?
7、标签语义化
用正确的标签做正确的事情。
html语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;
即使在没有样式CSS情况下也以一种文档格式显示,并且是容易阅读的;
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重,利于SEO;
使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。
8、创建对象的几种方式?
答:
工厂方式,构造函数方式,原型模式,混合构造函数原型模式,动态原型方式
9、原型链和原型的区别?
原型对象也是普通的对象,是对象一个自带隐式的__proto__属性,原型也有可能有自己的原型,如果一个原型对象的原型不为null的话,我们就称之为原型链
原型链是由一些用来继承和共享属性的对象组成的(有限的)对象链
10、事件流?
描述的是从页面中接收事件的顺序。
11、事件委托?
将子元素的事件委托给父级来完成(利用事件冒泡)
12、Call和apply
Apply()方法有两个参数,分别是运行函数的作用域,另一个是参数数组(可以使array,也可以是arguments),
Call()方法第一个参数和apply()参数一样,其他参数就是调用函数的参数
13、:
before和:
before的区别
14、Transition和animation有什么区别?
15、setTimeout(function(){alert(123)},0);
Alert(222)
16、清除浮动的几种方式
有三种方法。
①给父元素添加声明overflow:
hidden
②在浮动元素下方添加空div,并给该元素添加声明:
clear:
both;
overflow:
font-size:
③万能清除浮动法:
:
afert{content:
’’;
display:
visibility:
17、Ajax同源策略和跨越的方式?
18、Xmlhttprequest和$.ajax和jsonp有什么区别?
19、同步异步?
同步的概念应该是来自于OS中关于同步的概念:
不同进程为协同完成某项工作而在先后次序上调整(通过阻塞,唤醒等方式).同步强调的是顺序性.谁先谁后.异步则不存在这种顺序性.
同步:
浏览器访问服务器请求,用户看得到页面刷新,重新发请求,等请求完,页面刷新,新内容出现,用户看到新内容,进行下一步操作。
异步:
浏览器访问服务器请求,用户正常操作,浏览器后端进行请求。
等请求完,页面不刷新,新内容也会出现,用户看到新内容。
20、什么是前端工程化?
Gulp||webpack
21、Gulp如何创建一个命令?
对项目管理,进行打包合并
22、如何获取div当前的fontsize
23、描述下闭包?
闭包是指有权访问另一个函数作用域中变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域,将函数内部的变量和方法传递到外部。
闭包的特性:
1.函数内再嵌套函数2.内部函数可以引用外层的参数和变量3.参数和变量不会被垃圾回收机制回收
//li节点的onclick事件都能正确的弹出当前被点击的li索引
<
ulid="
testUL"
>
li>
index=0<
/li>
index=1<
index=2<
index=3<
<
/ul>
scripttype="
text/javascript"
varnodes=document.getElementsByTagName("
li"
);
for(i=0;
i<
nodes.length;
i+=1){
nodes[i].onclick=function(){
console.log(i+1);
//不用闭包的话,值每次都是4
}(i);
}
/script>
执行say667()后,say667()闭包内部变量会存在,而闭包内部函数的内部变量不会存在
使得Javascript的垃圾回收机制GC不会收回say667()所占用的资源
因为say667()的内部函数的执行需要依赖say667()中的变量
这是对闭包作用的非常直白的描述
functionsay667(){
//Localvariablethatendsupwithinclosure
varnum=666;
varsayAlert=function(){
alert(num);
num++;
returnsayAlert;
varsayAlert=say667();
sayAlert()//执行结果应该弹出的667
24、Window.onload和$(function(){})区别
window.onload:
①只能加载一次,如果写多个,后面的覆盖前面的;
②页面加载完成(包括图片)
$(function(){}):
①可以编写多个;
②页面加载完成(不包括图片)
25、$(‘div’).get(0)和$(‘div’).eq(0)有什么区别?
$(‘div’).get(0):
返回dom
$(‘div’).eq(0):
返回jq
26、cookiestorage
答:
Web
Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。
Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。
除此之外,Web
Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie、getCookie。
但是Cookie也是不可以或缺的:
Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在,而Web
Storage仅仅是为了在本地“存储”数据而生。
27、Getpost区别
get:
速度快,传输的数据量小,安全性不好;
Post:
速度慢,是进行打包传输,传输的数据量大,安全性较好。
28、Animation循环的属性
animation-direction属性定义是否循环交替反向播放动画;
normal|reverse|alternate|alternate-reverse|initial|inherit;
29、声明提升
30、值类型引用类型
值类型:
也称为原始数据或原始值(primitivevalue)。
在JavaScript中,number、string、boolean、null和undefined型数据都是值类型。
引用类型:
这类值存储在堆(heap)中,堆是内存中的动态区域,相当于自留空间,在程序运行期间会动态分配给代码和堆栈。
在JavaScript语言中,object、function和array等对象都是引用型数据。
31、Dom和bom的区别
BOM是浏览器对象模型,用来获取或设置浏览器的属性、行为,例如:
新建窗口、获取屏幕分辨率、浏览器版本号等。
DOM是文档对象模型,用来获取或设置文档中标签的属性,例如获取或者设置input表单的value值。
32、如果页面有100w条数据怎么显示
用ajax延时加载数据
Ajax延时加载数据代码
$(window).scroll(function(){
$('
#text'
).val($(document).scrollTop());
//如果滚动到下面的时候,触发ajax事件获取数据,显示在页面上。
if($(document).scrollTop()
$(window).height()){
$.ajax({
type
'
POST'
url
ThinkPHP['
ROOT'
]
+
/Index/getBottomPic'
dataType:
json'
success:
function(data,
textStatus,
jqXHR){
console.log(data.pic2);
var
pichtml
=
;
pichtm2
i
1;
j
//第一个选项卡的内容
$(data.pic1).each(function(k,v){
+=
"
a
class='
dft731"
+i+"
div
dft731a'
img
src=
+v.img_url+"
/>
dft731b'
b>
+v.title+"
/b>
/a>
i++;
});
#pic1'
).append(pichtml);
//第二个选项卡的内容
$(data.pic2).each(function(k,v){
+j+"
j++;
#pic2'
).append(pichtm2);
}
$(window).unbind("
scroll"
33、如何实现即时通信qq的程序
Socket
HTML5中提出的新的协议,可以实现客户端与服务器端的通信,实现服务器的推送功能
34、Pxemrem的区别
px和em都是长度单位,区别是,px的值是固定的,指定是多少就是多少,计算比较容易。
em得值不是固定的,并且em会继承父级元素的字体大小。
Rem,上面你看到了,em相对父级,嵌套一多了算字体到底多大就很麻烦了,所以有了Rem(浏览器支持还不是很理想),他只相对html或body的字体尺寸(默认还是16px,除非你自己用font-size定义为其他),没有了继承父级尺寸这个关系。
浏览器的默认字体高都是16px。
所以未经调整的浏览器都符合:
1em=16px。
那么12px=0.75em,10px=0.625em。
35、Transformtranslate有什么区别
36、块元素和行元素的区别
在标准文档流里面,块级元素具有以下特点:
①总是在新行上开始,占据一整行;
②高度,行高以及外边距和内边距都可控制;
③宽带始终是与浏览器宽度一样,与内容无关;
④它可以容纳内联元素和其他块元素。
行内元素的特点:
①和其他元素都在一行上;
②高,行高及外边距和内边距部分可改变;
③宽度只与内容有关;
④行内元素只能容纳文本或者其他行内元素。
不可以设置宽高,其宽度随着内容增加,高度随字体大小而改变,内联元素可以设置外边界,但是外边界不对上下起作用,只能对左右起作用,也可以设置内边界,但是内边界在ie6中不对上下起作用,只能对左右起作用
首先:
CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,如div的display默认值为“block”,则为“块级”元素;
span默认display属性值为“inline”,是“行内”元素。
(1)行内元素有:
abspanimginputselectstrong(强调的语气)
(2)块级元素有:
divulollidldtddh1h2h3h4…p
(3)常见的空元素:
br>
hr>
input>
link>
meta>
鲜为人知的是:
area>
base>
col>
command>
embed>
keygen>
param>
source>
track>
wbr>
37、Alt和src的区别
src属性,对于<
IMG>
标记,其src属性是必然属性。
即在<
标记中src是必须赋值的,是标记不可缺少的一部分。
引入文件路径。
alt属性是当鼠标移动到图像上时显示的文本
38、阻止默认事件和冒泡
Ie与非ie阻止冒泡
Ie:
e.cancelBubble=true;
非ie:
e.stopPropagation();
Ie与非ie阻止默认行为
两种方法:
①returnfalse
②ie:
vare=evt||evente.returnValue=false
非ie:
vare=evt||evente.preventDefault()
39、匿名函数
当某个函数,function关键字后面没有标识符的时候,他就是一个匿名函数
40、事件冒泡
是一个从子节点向祖先节点冒泡的过程。
指子元素的事件会向上传递,一直到dom
41、请简述下模块化编程
将一个项目进行划分,每个模块负责一个功能的实现,使每个模块间的相关性尽可能小,实现模块内的高内聚,模块间的低耦合。
42、什么是AMD/CMD/UMD
43、HTML与xhtml
44、Link与import的区别
45、什么是预编译?
less与sass的区别?
scss有什么好处?
sass与scss的区别?
46、普通事件和监听事件的区别?
47、说出几个ie兼容
48、Ajax内status和readystate
什么是readyState
readyState是XMLHttpRequest对象的一个属性,用来标识当前XMLHttpRequest对象处于什么状态。
readyState总共有5个状态值,分别为0~4,每个值代表了不同的含义,如下表所示:
0未初始化状态:
此时,已经创建了一个XMLHttpRequest对象
1准备发送状态:
此时,已经调用了XMLHttpRequest对象的open方法,并且XMLHttpRequest对象已经准备好将一个请求发送到服务器端
2已经发送状态:
此时,已经通过send方法把一个请求发送到服务器端,但是还没有收到一个响应
3正在接收状态:
此时,已经接收到HTTP响应头部信息,但是消息体部分还没有完全接收到
4完成响应状态:
此时,已经完成了HTTP响应的接收
什么是status
status是XMLHttpRequest对象的一个属性,表示响应的HTTP状态码。
在HTTP1.1协议下,HTTP状态码总共可分为5大类,如下表所示:
1XX服务器收到请求,需要继续处理。
例如101状态码,表示服务器将通知客户端使用更高版本的HTTP协议。
2XX请求成功。
例如200状态码,表示请求所希望的响应头或数据体将随此响应返回。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 前端 面试 题目 解析