今天小编要跟大家分享的文章是关于参加Web前端面试的常见面试题汇总。准备参加Web前端面试的小伙伴们来和小编一起看一看吧,希望本篇文章能够对大家有所帮助。
1.渐进增强与优雅降级
渐进增强
并不是一种技术,而是一种设计思想。各个浏览器的渲染能力各不相同,要做一个每个人都能看到的网页、感受到的体验都一致的网站几乎不可能。但还是得网站的可访问性,保证用户在任何环境下都能正常访问网页得核心内容或能使用基本功能(避免网页打不开、排版错误等),并为他们提供当前条件下最好的体验,这就是渐进增强得核心思想。
优雅降级也是一种设计思想,为了保证在高版本浏览器中提供最好的体验,碰到低版本浏览器再降级进行兼容处理,使其能正常浏览。
这两种思想的区别在于:
1.渐进增强是向上兼容,优雅降级是向下兼容;。
2.渐进增强是从简单到复杂,优雅降级是从复杂到简单;。
3.渐进增强关注的是内容(保证核心内容),优雅降级关注的是浏览体验(为了兼容低版本浏览器)。
2.DOCTYPE
作用
DTD(DocumentTypeDefinition,文档类型定义)是一系列的语法规则,用来定义XML或(X)HTML。
的文档类型。浏览器会使用它来判断文档类型,决定何种协议来解析,以及切换浏览模式。
DOCTYPE是用来声明文档类型和DTD。
规范的,一个主要的用途便是文件的合法性验证。如果文档代码不合法,那么浏览器解析时便会出现一些差错。
HTML5的文档类型声明:
HTML4.01Strict(HTML4.01严格模式)的DTD包含所有HTML。
元素和属性,但不包括展示性的和弃用的元素(如font),它的文档类型声明:
-//W3C//DTDXHTML1.0Strict//EN"。
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">。
标准模式与怪异模式
怪异模式(Quirks
Mode)用于模拟旧浏览器的行为。早期的网站并不会遵循完整的规范,随着浏览器支持越来越多的规范,在那些旧的浏览器中开发的页面在显示时会被破坏。为了向后兼容,浏览器发明了怪异模式,一行错误或无效的。
DOCTYPE都会触发怪异模式。
浏览器使用文件开头的DOCTYPE来决定用怪异模式处理或标准模式处理。DOCTYPE。
可以确保不同浏览器以相同的方式解析文档,以及执行相同的渲染模式。
怪异模式与标准模式的主要区别:
1.怪异模式的宽度和高度会包含padding和border。标准模式不包含,标准模式下可以通过设置box-sizing:。
border-box将标准盒模型转化成怪异模式下的盒模型。
2.怪异模式下,当内容超出容器高度时,会将容器拉伸,而不是溢出。
3.怪异模式下,在表格中的字体样式(如font-size)不会继承。
4.怪异模式下颜色值必须使用十六进制标记法。
3.语义化
HTML5
中的语义化就是让元素、属性或属性值有含义,更准确地标记特定类型的内容。对元素语义化的目的是为了让元素的语义和呈现分离,元素只负责文档内容的结构与含义,而CSS。
样式控制内容的呈现,像元素,没有语义但却能将字体变粗,这类元素违背了语义化的目的,将会被废弃。
优点
·使得HTML文档结构清晰、布局合理、主体突出、可读性更强。
·有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。
·方便其他设备解析,如盲人阅读器根据语义渲染网页。
·有利于开发和维护,语义化更具可读性,代码更好维护,与CSS3关系更和谐。
语义化标签
·定义文档的页眉区域,应作为介绍内容或者导航链接栏的容器;。
·footer内容的页脚,通常包含该章节作者、版权数据或者与文档相关的链接等信息;。
·article
文档、页面、应用或网站中的独立结构,是可独立分配的、可复用的结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目;。
·nav描述一个含有多个超链接的区域,该区域包含跳转到其他页面或页面内部其他部分的链接列表;。
·section表示文档中的一个区域(或节),比如,内容中的一个专题组;。
·main定义文档的主要内容,该内容在文档中应当是独一无二的,不包含任何在文档中重复的内容,比如侧边栏,导航栏链接,版权信息,网站。
logo,搜索框(搜索框作为文档的主要内容);。
·aside
表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。
4.超链接伪类
:link、:visited、:active和:hover的声明顺序是怎样的?。
:link表示未访问的链接状态;。
:visited表示已访问状态;:active表示激活状态(鼠标按下);:hover表示悬停状态。
推荐顺序是LVHA,即:link:visited:hover:active。理由如下:
·当鼠标悬停在未访问的链接上时,:link和:hover都会命中,如果:hover在:link。
之前声明,那么(:hover)就会被覆盖;。
·当鼠标悬停在已访问的连接上时,:visited和:hover都会命中,如果:hover在:visited。
之前声明,那么(:hover)就会被覆盖;。
·当鼠标单击链接时,:active和:hover都会命中,我们大多是想让:hover只在悬停时展示样式,按下鼠标时使用:active。
样式,因此:active在:hover之后声明;。
·综上,:hover应在:link和:visited之后,在:active之前,因此active在最后。而:link和。
:visited两者的顺序无所谓,互不影响。
5.CSS常见的长度单位
CSS中除了px长度单位之外,还有下面几个长度单位:
·pc六分之一英寸,1pc=12pt=1/6*1in=16px;。
·pt一磅,72分之一英寸。1pt=1/12_1pc=1/72_1in≈1.33px;。
·in一英寸,1in=2.54cm=96px;。
·ex在含有“X”字母的字体中,它是该字体的小写字母的高度。对于很多字体来说,1ex≈0.5em;。
·em1em等于父级元素的字体大小,2em就是父级元素字体大小的二倍;。
·rem当用在根元素()的font-size上面时,它代表了它的初始值;。
·ch代表元素所用字体font中“0”这一字形的宽度;。
·vh1vh相当于视口高度的1%,100vh就是视口的高度;。
·vw1vw相当于视口宽度的1%,100vw就是视口的宽度;。
·vmax视口高度vw和宽度vh两者中的最小值。
·vmin视口高度vw和宽度vh两种中的最大值;。
·%相对于父级元素的大小来确定;。
参考:CSS[1]
CSSpercentage[2]。
6.事件对象
冒泡与捕获
事件冒泡与捕获是事件处理的两种机制,主要描述当在一个元素上有两个相同类型的事件处理器被激活会发生什么。
在点击子元素时,浏览器运行了两种不同的阶段:捕获阶段和冒泡阶段。捕获阶段的行为:
·浏览器检查元素的最外层祖先,是否在捕获阶段中注册了一个onclick事件处理程序,如果是,则运行它;。
·
然后,它移动到中单击元素的下一个祖先元素,并执行相同的操作,然后是单击元素再下一个祖先元素,依此类推,直到到达实际点击的元素;。
而冒泡与捕获恰恰相反:
·浏览器检查实际点击的元素是否在冒泡阶段中注册了一个onclick事件处理程序,如果是,则运行它;。
·然后它移动到下一个直接的祖先元素,并做同样的事情,然后是下一个,等等,直到它到达元素;。
而现代浏览器在默认情况下,所有事件处理程序都在冒泡阶段进行注册。因此上面代码在点击子元素时会先执行子元素绑定的事件,然后向上冒泡,触发父元素绑定的事件。
addEventListener函数的第三个参数是个布尔值。含义:
·当布尔值是false时(这也是默认值),表示向上冒泡触发事件;。
·当布尔值是true时,表示向下捕获触发事件;。
不能冒泡的事件
有些事件是不会冒泡的。比如:
·blur元素失去焦点时触发,focusout事件也是失去焦点时触发,但可以冒泡;。
·focus元素获取焦点时触发;。
·mouseenter鼠标移动到元素上时会触发该事件,与之对应的是mouseover事件,但会冒泡;。
·mouseleave鼠标离开元素时触发,与之对应的是mouseout,但会冒泡;。
事件冒泡可以让我们利用事件委托,尤其是处理大量子元素时,如果给每个子元素都绑定事件,这是不优雅的,可以将事件绑定到父元素上,并让子节点上发生的事件冒泡到父节点上,利用。
e.target属性可以获取到当前触发事件的子元素。
事件对象中的方法
·stopPropagation()阻止事件冒泡,当设置后,点击该元素时父元素绑定的事件就不会再触发;。
·preventDefault()阻止默认事件的发生;。
·stopImmediatePropagation()它用来阻止监听同一事件的其他事件监听器被调用以及阻止事件冒泡,比如给同一个div。
元素绑定多个click事件(使用addEventListener方法可以注册多个),当在第二个事件函数中调用。
stopImmediatePropagation方法时,点击div元素时,后面注册的click将不会被触发,而且还会阻止事件冒泡;。
比如下面的例子,给p绑定多个click事件,在第二个事件函数中调用stopImmediatePropagation,第三个click。
事件就不会触发,因为也阻止了冒泡,因此父元素的click事件也不会触发。
paragraph
document.querySelector("div").addEventListener("click",(event)=>{alert("我是div元素,我是p元素的上层元素");//p元素的click事件没有向上冒泡,该函数不会被执行},false);constp=document.querySelector('p')p.addEventListener("click",(event)=>{alert("我是p元素上被绑定的第一个监听函数");},false);p.addEventListener("click",(event)=>{alert("我是p元素上被绑定的第二个监听函数");event.stopImmediatePropagation();//执行stopImmediatePropagation方法,阻止click事件冒泡,并且阻止p元素上绑定的其他click事件的事件监听函数的执行.},false);p.addEventListener("click",(event)=>{alert("我是p元素上被绑定的第三个监听函数");//该监听函数排在上个函数后面,该函数不会被执行},false);。
“
在IE浏览器中,使用e.cancelBubble=true也可以取消事件冒泡;使用e.returnValue=false。
也能阻止默认事件的发生。
target与currentTarget。
target属性指向的是事件目标,而currentTarget属性指向的是正在处理当前事件的对象,它总是指向事件绑定的元素。而target。
指向的可能不是定义时的事件目标。
例如:
div.addEventListener('click',(e)=>{。
console.log(e.target,e.currentTarget);。
},false);
e.target可能指向div元素,也可能指向它的子元素。而e.currentTarget总是指向div元素。
以上就是小编今天为大家分享的关于参加Web前端面试的常见面试题汇总的文章,希望本篇文章能够对正准备参加前端面试的小伙伴们有所帮助,想要了解更多Web前端知识记得关注北大青鸟Web前端培训官网,最后祝愿小伙伴们工作顺利,成为一名优秀的Web前端工程师。
参考资料
[1]
CSSlength:#/zh-CN/docs/Web/CSS/length。
[2]
CSSpercentage:
#/zh-CN/docs/Web/CSS/percentage。
今天小编要跟大家分享的文章是关于2020年Web前端面试题汇总。由于内容较多小编分开为大家介绍,今天首先来和小编一起看一看第一部分的内容,希望这些面试题能够对正准备找Web前端相关工作的小伙伴们有所帮助。
1.说几条写JavaScript的基本规范?。
1)不要在同一行声明多个变量;。
2)请使用===/!==来比较true/false或者数值;。
3)使用对象字面量替代newObject这种形式;。
4)减少使用全局函数,全局变量;。
5)switch语句必须带有default分支;。
6)if语句必须使用大括号;
7)for-in循环中的变量;。
应该使用var关键字明确限定作用域;。
从而避免作用域全局污染。
2.说说平衡二叉树?
平衡二叉搜索树(Self-balancingbinarysearchtree)。
又被称为AVL树。
具有以下性质:
1)它是一棵空树或它的左右两个子树。
的高度差的绝对值不超过1,
并且左右两个子树都是一棵平衡二叉树。
2)平衡二叉树必定是二叉搜索树,反之则不一定。
3)平衡二叉树的常用实现方法有红黑树、AVL、
替罪羊树、Treap、伸展树等。
最小二叉平衡树的节点的公式如下:
F(n)=F(n-1)+F(n-2)+1备注:1是根节点,
F(n-1)是左子树的节点数量,
F(n-2)是右子树的节点数量。
3.清除浮动和解决垂直外边距重叠的解决方案?。
问题描述:
1)父元素没有设置宽高,尺寸由子元素撑起;。
子元素一旦浮动,父元素高度会发生塌陷。
2)子元素设置margin-top会作用的父元素的margin-top;。
此时会造成垂直外边距重叠。
.clearfix::after,.clearfix::before{。
content:'';
display:table;
clear:both;
4.sessionStorage、localStorage和cookie?。
相同点:
都用于浏览器端存储的缓存数据;。
不同点:
1)存储内容是否发送到服务器端。
当设置了Cookie后,数据会发送到服务器端,
造成一定的宽带浪费;xxxstorage则会将数据保存。
到本地,不会造成宽带浪费;
2)数据存储大小不同
Cookie数据不能超过4K,适用于会话标识;。
xxxstorage数据存储可以达到5M;。
3)数据存储的有效期限不同
cookie只在设置了Cookid过期时间。
之前一直有效,即使关闭窗口或者浏览器;。
sessionStorage,仅在关闭浏览器之前有效;。
localStorage,数据存储永久有效;。
4)作用域不同
cookie和localStorage是在同源同窗口中。
都是共享的;
sessionStorage不在不同的浏览器窗口。
中共享,即使是同一个页面;
5.判断一个单词是否是回文?
回文是指把相同的词汇或句子,
在下文中调换位置或颠倒过来,
产生首尾回环的情景,
叫做回文,也叫回环。
比如cacac,redivider。
letcheckPalindrom=(str)=>{。
returnstr===
str.split('').reverse().join('');。
6.不借助临时变量,进行两个整数的交换?。
输入a=3,b=1,
输出a=1,b=3
letswap=(a,b)=>{。
b=b-a;
a=a+b;
b=a-b;
return[a,b];
7.请写出至少5个html5新增的标签,并说明其语义和应用场景?。
section:定义文档中的一个章节;。
nav:定义只包含导航链接的章节;。
header:定义页面或章节的头部;。
它经常包含logo、页面标题和导航性的目录。
footer:定义页面或章节的尾部;。
它经常包含版权信息、法律信息链接和反馈建议用的地址。
aside:定义和页面内容关联度较低的内容,
如果被删除,剩下的内容仍然很合理。
8.get和post请求在缓存方面的区别?。
get请求类似于查找的过程,用户获取数据,
可以不用每次都与数据库连接,所以可以使用缓存。
post不同,post做的一般是修改和删除的工作,
所以必须与数据库交互,所以不能使用缓存。
因此get请求适合于请求缓存。
9.如何解决异步回调地狱?
promise、generator、async/await。
10.图片的懒加载和预加载?
预加载:提前加载图片,
当用户需要查看时可直接
从本地缓存中渲染。
懒加载:懒加载的主要目的
是作为服务器前端的优化,
减少请求数或延迟请求数。
两种技术的本质:
两者的行为是相反的,
一个是提前加载,
一个是迟缓甚至不加载。
懒加载对服务器前端有一定
的缓解压力作用,
预加载则会增加服务器前端压力。
11.bind,apply,call的区别?。
通过apply和call改变函数的this指向,
这两个函数的第一个参数都是一样的,
表示要改变指向的那个对象,
第二个参数,apply是数组,
而call则是arg1,arg2...这种形式。
通过bind改变this作用域。
会返回一个新的函数,
这个函数不会马上执行。
12.js怎么控制一次加载一张图片,加载完后再加载下一张?。
方法一:
varobj=newImage();。
obj.src="#/21.jpg";。
obj.onload=function(){。
document.getElementById("pic")。
.innnerHTML="";。
加载中
方法二:
varobj=newImage();。
obj.src="#/21.jpg";。
obj.onreadystatechange=function(){。
if(this.readyState=="complete"){。
document.getElementById("pic")。
.innnerHTML="";。
加载中
1.请说明ECMAScript,JavaScript,Jscript之间的关系?。
ECMAScript提供脚本语言必须遵守的规则、
细节和准则,是脚本语言的规范。
比如:ES5,ES6就是具体的一js版本。
JavaScript是ECMAScript的一个分支版本,。
JavaScript实现了多数ECMA-262中。
描述的ECMAScript规范,但存在少数差异。
JScript是微软公司对ECMA-262语言规范的。
一种实现,除了少数例外(这是为了保持向后兼容),。
微软公司宣称JScript完全实现了ECMA标准.。
关系:
JavaScript和JScript都是ECMAScript的版本分支,。
二者在语法上没有多大的区别;
只不过一个是NetScape公司的,一个是微软的;。
IE系列默认是JScript,其它的则反之用JavaScript。
2.页面加载过程中可能触发哪些事件?它们的顺序是?。
页面加载时,大致可以分为以下几个步骤:1)开始解析HTML文档结构2)加载外部样式表及JavaScript脚本3)解析执行JavaScript脚本4)DOM树渲染完成5)加载未完成的外部资源6)页面加载成功。
执行顺序:1)documentreadystatechange事件2)documentDOMContentLoaded事件3)windowload事件。
3.函数中在声明变量a前使用a会产生错误吗?为什么?。
不会,JS中能够进行变量作用域提升,。
把所有变量、函数的声明提升到当前。
作用域的最前面,但不进行赋值操作;。
所以可能造成获取的值是undefined。
4.什么是hash,以及hashchange事件?。
先了解下什么是hash:hash即URL中"#"字符后面的部分。
a)使用浏览器访问网页时,
如果网页URL中带有hash,
页面就会定位到id(或name)。
与hash值一样的元素的位置;。
b)hash还有另一个特点,
它的改变不会导致页面重新加载;。
c)hash值浏览器是不会随请求发送到服务器端的;。
d)通过window.location.hash属性获取和设置hash值。
window.location.hash值的变化会直接。
反应到浏览器地址栏(#后面的部分会发生变化),同时,浏览器地址栏hash值的变化也会触发。
window.location.hash值的变化,
从而触发onhashchange事件。
再来了解下什么是hashchange事件:。
a)当URL的片段标识符更改时,
将触发hashchange事件(跟在#符号后面的URL部分,包括#符号)b)。
hashchange事件触发时,
事件对象会有hash改变前的URL(oldURL)和hash改变后的URL(newURL)两个属性。
5.什么是CDN,CDN对于网站有什么意义,它有什么样的缺点?。
CDN又称为内容分发网络;本意在于。
尽可能避开互联网上有可能影响数据。
传输速度和稳定性的瓶颈和环节,
使内容传输的更快、更稳定。
主要目的:
解决因分布、带宽、服务器性能带来的访问延迟问题,
适用于站点加速、点播、直播等场景。
使用户可就近取得所需内容,解决Internet网络拥挤的状况,
提高用户访问网站的响应速度和成功率。
缺点:
a)实施复杂,投资大;
b)目前大部分的CDN还只是对静态内容加速,
对动态加速效果不好;
而双线对动态加速的效果跟静态是一样的。
前端面试题汇总,基本上会有四大类问题,具体如下:
一、HTML
1、Doctype作用?严格模式与混杂模式如何区分?它们有何意义?。
2、HTML5 为什么只需要写 <!DOCTYPE HTML>?
3、行内元素有哪些?块级元素有哪些? 空(void)元素有那些?
4、页面导入样式时,使用link和@import有什么区别?
5、介绍一下你对浏览器内核的理解?
6、常见的浏览器内核有哪些?
7、html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?
8、简述一下你对HTML语义化的理解?
9、HTML5的离线储存怎么使用,工作原理能不能解释一下?
10、浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢?
11、请描述一下 cookies,sessionStorage 和 localStorage 的区别?
12、iframe有那些缺点?
13、Label的作用是什么?是怎么用的?(加 for 或 包裹)
14、HTML5的form如何关闭自动完成功能?
15、如何实现浏览器内多个标签页之间的通信? (阿里)。
16、webSocket如何兼容低浏览器?(阿里)。
17、页面可见性(Page Visibility)API 可以有哪些用途?
18、如何在页面上实现一个圆形的可点击区域?
19、实现不使用 border 画出1px高的线,在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。
20、网页验证码是干嘛的,是为了解决什么安全问题?
21、tite与h1的区别、b与strong的区别、i与em的区别?
二、css
1、介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的?
2、CSS选择符有哪些?哪些属性可以继承?
3、CSS优先级算法如何计算?
4、CSS3新增伪类有那些?
5、如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?
6、display有哪些值?说明他们的作用。
7、position的值relative和absolute定位原点是?
8、CSS3有哪些新特性?
9、请解释一下CSS3的Flexbox(弹性盒布局模型),以及适用场景?
10、用纯CSS创建一个三角形的原理是什么?
11、一个满屏 品 字布局 如何设计?。
三、常见兼容性问题?
1、li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?
2、经常遇到的浏览器的兼容性有哪些?原因,解决方法是什么,常用hack的技巧 ?
3、为什么要初始化CSS样式。
4、absolute的containing block计算方式跟正常流有什么不同?
5、CSS里的visibility属性有个collapse属性值是干嘛用的?在不同浏览器下以后什么区别?
6、position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样?
7、对BFC规范(块级格式化上下文:block formatting context)的理解?
8、CSS权重优先级是如何计算的?
9、请解释一下为什么会出现浮动和什么时候需要清除浮动?清除浮动的方式。
10、移动端的布局用过媒体查询吗?
11、使用 CSS 预处理器吗?喜欢那个?
12、CSS优化、提高性能的方法有哪些?
13、浏览器是怎样解析CSS选择器的?
14、在网页中的应该使用奇数还是偶数的字体?为什么呢?
15、margin和padding分别适合什么场景使用?
16、抽离样式模块怎么写,说出思路,有无实践经验?[阿里航旅的面试题]。
17、元素竖向的百分比设定是相对于容器的高度吗?
18、全屏滚动的原理是什么?用到了CSS的那些属性?
19、什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?
20、视差滚动效果,如何给每页做不同的动画?(回到顶部,向下滑动要再次出现,和只出现一次分别怎么做?)
21、::before 和 :after中双冒号和单冒号 有什么区别?解释一下这2个伪元素的作用。
22、如何修改chrome记住密码后自动填充表单的黄色背景 ?
23、你对line-height是如何理解的?
24、设置元素浮动后,该元素的display值是多少?(自动变成display:block)
25、怎么让Chrome支持小于12px 的文字?
26、让页面里的字体变清晰,变细用CSS怎么做?(-webkit-font-smoothing: antialiased;)
27、font-style属性可以让它赋值为“oblique” oblique是什么意思?
28、position:fixed;在android下无效怎么处理?
29、如果需要手动写动画,你认为最小时间间隔是多久,为什么?(阿里)
30、display:inline-block 什么时候会显示间隙?(携程)。
31、overflow: scroll时不能平滑滚动的问题怎么处理?
32、有一个高度自适应的div,里面有两个div,一个高度100px,希望另一个填满剩下的高度。
33、png、jpg、gif 这些图片格式解释一下,分别什么时候用。有没有了解过webp?
34、什么是Cookie 隔离?(或者说:请求资源的时候不要让它带cookie怎么做)
35、style标签写在body后与body前有什么区别?
四、JavaScript
1、介绍JavaScript的基本数据类型。
2、说说写JavaScript的基本规范?
3、JavaScript原型,原型链 ? 有什么特点?
4、JavaScript有几种类型的值?(堆:原始数据类型和 栈:引用数据类型),你能画一下他们的内存图吗?
5、Javascript如何实现继承?
6、Javascript创建对象的几种方式?
7、Javascript作用链域?。
8、谈谈This对象的理解。
9、eval是做什么的?
10、什么是window对象? 什么是document对象?。
11、null,undefined的区别?
12、写一个通用的事件侦听器函数(机试题)。
13、[“1”, “2”, “3”].map(parseInt) 答案是多少?
14、关于事件,IE与火狐的事件机制有什么区别? 如何阻止冒泡?
15、什么是闭包(closure),为什么要用它?
16、javascript 代码中的”use strict”;是什么意思 ? 使用它区别是什么?
17、如何判断一个对象是否属于某个类?
18、new操作符具体干了什么呢?。
19、用原生JavaScript的实现过什么功能吗?
20、Javascript中,有一个函数,执行时对象查找时,永远不会去查找原型,这个函数是?
21、对JSON的了解?
22、[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) }) 能解释一下这段代码的意思吗?
23、js延迟加载的方式有哪些?
24、Ajax 是什么? 如何创建一个Ajax?
25、同步和异步的区别?
26、如何解决跨域问题?
27、页面编码和被请求的资源编码如果不一致如何处理?
28、模块化开发怎么做?
29、AMD(Modules/Asynchronous-Definition)、CMD(Common Module。
Definition)规范区别?
30、requireJS的核心原理是什么?(如何动态加载的?如何避免多次加载的?如何 缓存的?)
31、让你自己设计实现一个requireJS,你会怎么做?
32、谈一谈你对ECMAScript6的了解?
33、ECMAScript6 怎么写class么,为什么会出现class这种东西?。
34、异步加载的方式有哪些?
35、documen.write和 innerHTML的区别?。
36、DOM操作——怎样添加、移除、移动、复制、创建和查找节点?。
37、.call() 和 .apply() 的含义和区别?
38、数组和对象有哪些原生方法,列举一下?
39、JS 怎么实现一个类。怎么实例化这个类。
40、JavaScript中的作用域与变量声明提升?
41、如何编写高性能的Javascript?
42、那些操作会造成内存泄漏?
43、JQuery的源码看过吗?能不能简单概况一下它的实现原理?
44、jQuery.fn的init方法返回的this指的是什么对象?为什么要返回this?
45、jquery中如何将数组转化为json字符串,然后再转化回来?
46、jQuery 的属性拷贝(extend)的实现原理是什么,如何实现深拷贝?
47、jquery.extend 与 jquery.fn.extend的区别?
48、jQuery 的队列是如何实现的?队列可以用在哪些地方?
49、谈一下Jquery中的bind(),live(),delegate(),on()的区别?
50、JQuery一个对象可以同时绑定多个事件,这是如何实现的?
51、是否知道自定义事件。jQuery里的fire函数是什么意思,什么时候用?
52、jQuery 是通过哪个方法和 Sizzle 选择器结合的?(jQuery.fn.find()进入Sizzle)
53、针对 jQuery性能的优化方法?
54、Jquery与jQuery UI有啥区别?
55、JQuery的源码看过吗?能不能简单说一下它的实现原理?
56、jquery 中如何将数组转化为json字符串,然后再转化回来?
57、jQuery和Zepto的区别?各自的使用场景?
58、针对 jQuery 的优化方法?
59、Zepto的点透问题如何解决?
60、jQueryUI如何自定义组件?。
61、需求:实现一个页面操作不会整页刷新的网站,并且能在浏览器前进、后退时正确响应。给出你的技术实现方案?
62、如何判断当前脚本运行在浏览器还是node环境中?(阿里)
63、移动端最小触控区域是多大?
64、jQuery 的 slideUp动画 ,如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行,该如何处理呢?。
65、把 Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别?浏览器会如何解析它们?
66、移动端的点击事件的有延迟,时间是多久,为什么会有? 怎么解决这个延时?(click 有 300ms 延迟,为了实现safari的双击事件的设计,浏览器要知道你是不是要双击操作。)
67、知道各种JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能讲出他们各自的优点和缺点么?。
68、Underscore 对哪些 JS 原生对象进行了扩展以及提供了哪些好用的函数方法?
69、解释JavaScript中的作用域与变量声明提升?
70、那些操作会造成内存泄漏?
71、JQuery一个对象可以同时绑定多个事件,这是如何实现的?
72、Node.js的适用场景?
(如果会用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?。
73、解释一下 Backbone 的 MVC 实现方式?
74、什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和缺点?。
75、知道什么是webkit么? 知道怎么用浏览器的各种工具来调试和debug代码么?。
76、如何测试前端代码么? 知道BDD, TDD, Unit Test么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)?。
77、前端templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?。
78、简述一下 Handlebars 的基本用法?
79、简述一下 Handlerbars 的对模板的基本处理流程, 如何编译的?如何缓存的?
80、用js实现千位分隔符?(来源:前端农民工,提示:正则+replace)。
检测浏览器版本版本有哪些方式?
81、我们给一个dom同时绑定两个点击事件,一个用捕获,一个用冒泡,你来说下会执行几次事件,然后会先执行冒泡还是捕获。