面试题目总结（前端）

css3里面动画的元素叫啥( 就是设置动画的对象 好比给div设置一个动画宽度从0到100 这个div就是动画元素)

 

怎么把字符串变成json  

JSON.stringify()

 

typeof返回一个对象   怎么判断对象是否是空，怎么知道对象里的值

判断是否为空

 

一、if   (typeOf(x)   ==   "undefined")

 

二、if   (typeOf(x)   !=   "object")

获取对象的值 

用[] for in循环取出对象值

test=new a(1,2);
for(var key in test){
alert(test[key]);
break;
}

直接经过对象.属性的方式

var obj={a:1};//定义一个对象

alert(obj.a); //访问属性a

alert(obj[ 'a' ]); //访问属性a

 

 

psraeint和number区别，

int类型是number类型的一个子集

int类型只能存储整数;
number能够存储浮点数，也能够存储整数；
number(8,1)存储小数位为1位，总长度为8的浮点数，若是小数位数不足，则用0补全；
number(8)存储总长度为8的整数；
int至关于number(22),存储总长度为22的整数。

2016面试题目

 

1、Doctype做用? 严格模式与混杂模式如何区分？它们有何意义?

 　（1）、 声明位于文档中的最前面，处于 标签以前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。 

 （2）、严格模式的排版和 JS 运做模式是  以该浏览器支持的最高标准运行。

 　（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点没法工做。

 　（4）、DOCTYPE不存在或格式不正确会致使文档以混杂模式呈现,若是存在就默认以标准的模式运行。

 

 　二、行内元素有哪些？块级元素有哪些？ 

 　（1）CSS规范规定，每一个元素都有display属性，肯定该元素的类型，每一个元素都有默认的display值，  好比div默认display属性值为“block”，成为“块级”元素；  span默认display属性值为“inline”，是“行内”元素。  

 　（2）行内元素有：a b span img input select strong（强调的语气）  块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p  

 

 　三、link 和@import 的区别是？

  引入CSS的方法有两种，一种是@import，一种是link 

@import url('地址');
<link href="地址" rel="stylesheet" type="text/css" />
如今绝大部分的网站都采用后一种link方式，缘由在于
@import先加载HTML，后加载CSS
link先加载CSS，后加载HTML。

因此前者加载网页会出现令浏览者之外的格式，后者则是带格式的加载网页。

 （1）link属于XHTML标签，而@import是CSS提供的;

 　（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

 　（3）import只在IE5以上才能识别，而link是XHTML标签，无兼容问题;

 （4）link方式的样式的权重 高于@import的权重. 

 

 　四、浏览器的内核分别是什么?

 　IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink；

 

 　五、HTML5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

 　HTML5 如今已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增长。

 　绘画 canvas    用于媒介回放的 video 和 audio 元素   本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；  sessionStorage 的数据在浏览器关闭后自动删除  语意化更好的内容元素，好比 article、footer、header、nav、section   表单控件，calendar、date、time、email、url、search    新的技术webworker, websockt, Geolocation

 

 六、对语义化如何理解？

 　用正确的标签作正确的事情！

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

 

 　7、HTML5的离线储存有几种方式？

 　localStorage长期存储数据，浏览器关闭后数据不丢失；sessionStorage  数据在浏览器关闭后自动删除。

 

 　8、iframe有那些缺点？

 　iframe会阻塞主页面的Onload事件；

 　iframe和主页面共享链接池，而浏览器对相同域的链接有限制，因此会影响页面的并行加载。使用iframe以前须要考虑这两个缺点。若是须要使用iframe，最好是经过javascript动态给iframe添加src属性值，这样能够能够绕开以上两个问题。

 

　9、请描述一下 cookies，sessionStorage 和 localStorage 的区别？

 cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会sessionStorage和localStorage的存储空间更大；sessionStorage和localStorage有更多丰富易用的接口；sessionStorage和localStorage各自独立的存储空间；

 

 

 

     最新前端开发工程师面试题——CSS部分

 

1、CSS 选择符有哪些？哪些属性能够继承？优先级算法如何计算？ CSS3新增伪类有那些？

  1.id选择器（ # myid）    　　　　2.类选择器（.myclassname）    

  　3.标签选择器（div, h1, p）  　 　4.相邻选择器（h1 + p）    

  5.子选择器（ul < li）    　　　  　6.后代选择器（li a）    

  7.通配符选择器（ * ）    　　　　8.属性选择器（a[rel = "external"]）    

  　9.伪类选择器（a: hover, li: nth - child）

  可继承的样式： font-size font-family color, UL LI DL DD DT;

   不可继承的样式：border padding margin width height ;

  　优先级就近原则，同权重状况下样式定义最近者为准;

  　载入样式以最后载入的定位为准;

  　优先级为:

 　!important >  id > class > tag     important 比 内联优先级高

 

  　2、CSS3新增伪类举例：

  　　p:first-of-type 选择属于其父元素的首个元素的每一个元素。

  　p:last-of-type  选择属于其父元素的最后元素的每一个元素。

  　p:only-of-type  选择属于其父元素惟一的元素的每一个元素。

  　p:only-child    选择属于其父元素的惟一子元素的每一个元素。

  p:nth-child(2)  选择属于其父元素的第二个子元素的每一个元素。

  　:enabled  :disabled 控制表单控件的禁用态。

  :checked单选框或复选框被选中。

 

  　3、如何居中div？如何居中一个浮动元素？

  　给div设置一个宽度，而后添加margin:0 auto属性

   div{    width:200px;    margin:0 auto; }  

 

  　居中一个浮动元素

  　肯定容器的宽高宽500 高 300 的层  设置层的外边距 .div {   Width:500px ; height:300px;//高度能够不设  Margin: -150px 0 0 -250px;  position:relative;相对定  位  //方便看效果  left:50%;  top:50%;} 

 

 列出display的值，说明他们的做用。position的值， relative和absolute定位原点是？

  1.block 象块类型元素同样显示。  none 缺省值。象行内元素类型同样显示。  inline-block 象行内元素同样显示，但其内容象块类型元素同样显示。  list-item 象块类型元素一    样显示，并添加样式列表标记。  

 

 　2. absolute　生成绝对定位的元素，相对于 static 定位之外的第一个父元素进行定位。

 　fixed （老IE不支持）        生成绝对定位的元素，相对于浏览器窗口进行定位。   

  　relative 　生成相对定位的元素，相对于其正常位置进行定位。   

 　static  默认值。没有定位，元素出如今正常的流中  *（忽略 top, bottom, left, right z-index 声明）。

 　inherit 规定从父元素继承 position 属性的值。

 

4、为何要初始化CSS样式？

 　由于浏览器的兼容问题，不一样浏览器对有些标签的默认值是不一样的，若是没对CSS初始化每每会出现浏览器之间的页面显示差别。固然，初始化样式会对SEO有必定的影响，但鱼和熊掌不可兼得，但力求影响最小的状况下初始化。最简单的初始化方法就是： * {padding: 0; margin: 0;} （不建议）淘宝的样式初始化： body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }body, button, input, select, textarea { font:12px/1.5tahoma, arial, /5b8b/4f53; }h1, h2, h3, h4, h5, h6{ font-size:100%; }address, cite, dfn, em, var { font-style:normal; }code, kbd, pre, samp { font-family:couriernew, courier, monospace; }small{ font-size:12px; }ul, ol { list-style:none; }a { text-decoration:none; }a:hover { text-decoration:underline; }sup { vertical-align:text-top; }sub{ vertical-align:text-bottom; }legend { color:#000; }fieldset, img { border:0; }button, input, select, textarea { font-size:100%; }table { border-collapse:collapse; border-spacing:0; } 

 

  5、absolute的containing block计算方式跟正常流有什么不一样？

 

一个 block-level element ('display' 属性值为 'block', 'list-item' 或是 ‘table’) 会生成一个 block-level box，这样的盒子会参与到 block-formatting context (一种布局的方式) 中。
block formatting context
在这种布局方式下，盒子们自所在的 containing block 顶部起一个接一个垂直排列，水平方向上撑满整个宽度 (除非内部的盒子本身内部创建了新的 BFC)。
containing block
通常来讲，盒子自己就为其子孙创建了 containing block，用来计算内部盒子的位置、大小，而对内部的盒子，具体采用哪一个 containing block 来计算，须要分状况来讨论：

若此元素为 inline 元素，则 containing block 为可以包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；
不然则由这个祖先元素的 padding box 构成。
根元素所在的 containing block 被称为 initial containing block，在咱们经常使用的浏览器环境下，指的是原点与 canvas 重合，大小和 viewport 相同的矩形；
对于 position 为 static 或 relative 的元素，其 containing block 为祖先元素中最近的 block container box 的 content box (除 margin, border, padding 外的区域)；
对于 position:fixed 的元素，其 containing block 由 viewport 创建；
对于 position:absolute 的元素，则是先找到其祖先元素中最近的 position 属性非 static 的元素，而后判断：
若是都找不到，则为 initial containing block。

6、position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？

 

总的来讲，能够把它看做是一个相似优先级的机制， "position:absolute" 和 "position:fixed" 优先级最高，有它存在的时候，浮动不起做用，'display' 的值也须要调整； 其次，元素的 'float' 特性的值不是 "none" 的时候或者它是根元素的时候，调整 'display' 的值； 最后，非根元素，而且非浮动元素，而且非绝对定位的元素，'display' 特性值同设置值。

这从另外一个侧面说明了一个问题：浮动或绝对定位的元素，只能是块元素或表格。

1. 'display' 的值为 'none'

若是 'display' 的值为 'none'，那么 'position' 和 'float' 不起做用。在这种状况下，元素不产生框。所以浮动和定位无效。

2. 'position' 的值是 'absolute' 或 'fixed'

不然，若是 'position' 的值是 'absolute' 或 'fixed'，框就是绝对定位的，'float' 计算后的值应该是 'none'，而且，'display' 会被按照上表设置。 框的位置将由 'top'，'right'，'bottom' 和 'left' 属性和该框的包含块肯定。

也就是说，当元素是绝对定位时，浮动失效，'display' 会被按规则重置。

 2、position跟display、overflow、float下的margin collapse。

margin collapse我以为这里的意思应该是Collapsing margins，即外边距折叠，指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距。

其中所说的 margin 毗邻，能够归结为如下两点：

• 这两个或多个外边距没有被非空内容、padding、border 或 clear 分隔开。
• 这些 margin 都处于普通流中。

1.两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠。

注意一点，在没有被分隔开的状况下，一个元素的 margin-top 会和它普通流中的第一个子元素(非浮动元素等)的 margin-top 相邻； 只有在一个元素的 height 是 "auto" 的状况下，它的 margin-bottom 才会和它普通流中的最后一个子元素(非浮动元素等)的 margin-bottom 相邻。

示例代码：

 

 

7、对BFC规范的理解？

 　（W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其余元素的关 系和相互做用。）

 

　8、css定义的权重

 　如下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，如下例子是演示各类定义的权重值：/*权重为1*/div{}/*权重为10*/.class1{}/*权重为100*/#id1{}/*权重为100+1=101*/#id1 div{}/*权重为10+1=11*/.class1 div{}/*权重为10+10+1=21*/.class1 .class2 div{} 若是权重相同，则最后定义的样式会起做用，可是应该避免这种状况出现

 

 　9、解释下浮动和它的工做原理？清除浮动的技巧

 浮动的定义

使元素脱离文档流 按照指定方向发生位移 遇到父级边界或者相邻的浮动元素听了下来

浮动的框能够向左或向右移动，直到它的外边缘碰到包含框或另外一个浮动框的边框为止。

因为浮动框不在文档的普通流中，因此文档的普通流中的块框表现得就像浮动框不存在同样

 清除浮动：1.加一个div 设置css为clear:both  或者 2.直接给须要清除浮动的元素设置css overflow:hidden  (通常推荐第一种方式)

 

 　10、用过媒体查询，针对移动端的布局吗？

   用过 好比说在jquerymobbile中使用表单时就须要使用媒体查询来让 label标签中的内容与input标签中的内容显示在一行 而且不一样分辨率下面他们所占的宽度也有所不一样

 

 　11、使用 CSS 预处理器吗？喜欢那个？

 三种预处理器

1.SASS  是2007年诞生，最先也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框架，目前受LESS影响，已经进化到了全面兼容CSS的SCSS。

2.LESS2009年出现，受SASS的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手，在ruby社区以外支持者远超过SASS，其缺点是比起SASS来，可编程功能不够，不过优势是简单和兼容CSS，反过来也影响了SASS演变到了SCSS的时代，著名的Twitter Bootstrap就是采用LESS作底层语言的。
3.Stylus，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，在此社区以内有必定支持者，在普遍的意义上人气还彻底不如SASS和LESS。

    目前选择的是LESS，有不少开源项目都使用他，能够阅读学习。他没有SASS要求那么严谨，好比要mixin（中文不知道怎么翻译）时，SASS要求被mixin样式须要     添加声明，调用时也要求调用。

 

　　12、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 

 

 13、常常遇到的CSS的兼容性有哪些？缘由，解决方法是什么？

 

 14、介绍一下CSS的盒子模型？

（1）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading;

（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).

 

1.对WEB标准以及W3C的理解与认识？

 标签闭合、标签小写、不乱嵌套、提升搜索机器人搜索概率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更普遍的设备所访问、更少的代码和组件，容易维护、改版方便，不须要变更页面内容、提供打印版本而不须要复制内容、提升网站易用性;

 

 　2.XHTML和HTML有什么区别？

 　HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言

　　最主要的不一样：
　　XHTML 元素必须被正确地嵌套。
　　XHTML 元素必须被关闭。
　　标签名必须用小写字母。

  　XHTML 文档必须拥有根元素。

 

 　3.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

 用于声明文档使用那种规范(HTML/XHTML)通常为 严格 过分 基于框架的html文档

 加入XMl声明可触发，解析方式更改成IE5.5 拥有IE5.5的bug

 

  　4.行内元素有哪些?块级元素有哪些?CSS的盒模型?

  　块级元素：div p h1 h2 h3 h4 form ul

　　行内元素: a b br i span input select

  　Css盒模型:内容，border ,margin，padding

 

  　5.CSS引入的方式有哪些? link和@import的区别是?

  内联内嵌外链导入

　　区别 ：同时加载
　　前者无兼容性，后者CSS2.1如下浏览器不支持

  　Link 支持使用javascript改变样式，后者不可

 

  6.CSS选择符有哪些?哪些属性能够继承?优先级算法如何计算?内联和important哪一个优先级高?

  标签选择符类选择符 id选择符

　　继承不如指定 Id>class>标签选择

  　后者优先级高

 

  7.前端页面有哪三层构成，分别是什么?做用是什么?

  　结构层 HTML 表示层 CSS 行为层 js

 

  　8.CSS的基本语句构成是?

  　选择器{属性1:值1;属性2:值2;……}

 

 9.你作的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

  　Ie(Ie内核) 火狐(Gecko) 谷歌(webkit) opear(Presto)

 

  　10.写出几种IE6 BUG的解决方法

  　1.双边距BUG float引发的 使用display

　　2.3像素问题 使用float引发的 使用dislpay:inline -3px
　　3.超连接hover 点击后失效 使用正确的书写顺序 link visited hover active
　　4.Ie z-index问题 给父级添加position:relative
　　5.Png 透明 使用js代码 改
　　6.Min-height 最小高度 !Important 解决’
　　7.select 在ie6下遮盖 使用iframe嵌套
　　8.为何没有办法定义1px左右的宽度容器(IE6默认的行高形成的，使用over:hidden,zoom:0.08 line-height:1px)

  　9.ie 6 不支持!important

 

  　11.img标签上title与alt属性的区别是什么?

  　Alt 当图片不显示是 用文字表明。

  　Title 为该属性提供信息

 

  　12.描述css reset的做用和用途。

  　Reset重置浏览器的css默认属性 浏览器的品种不一样，样式不一样，而后重置，让他们统一

 

  13.解释css sprites，如何使用。

  Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量

 

  14.浏览器标准模式和怪异模式之间的区别是什么?

  　盒子模型渲染模式的不一样

  使用 window.top.document.compatMode 可显示为何模式

 

 　15.你如何对网站的文件和资源进行优化?期待的解决方案包括：

     文件合并

　　文件最小化/文件压缩
　　使用CDN托管

  　缓存的使用

 

  16.什么是语义化的HTML?

  　直观的认识标签对于搜索引擎的抓取有好处

 

  　17.清除浮动的几种方式，各自的优缺点

  　1.使用空标签清除浮动 clear:both(理论上能清楚任何标签，增长无心义的标签)

　　2.使用overflow:auto(空标签元素清除浮动而不得不增长无心代码的弊端,,使用zoom:1用于兼容IE)

    3.是用afert伪元素清除浮动(用于非IE浏览器)

 

    18.css hack

   　_marging \\IE 6

　　+margin \\IE 7
　　Marging:0 auto \9 全部Ie

    Margin \0 \\IE 8

 

  Javascript部分

  　1.javascript的typeof返回哪些数据类型

    Object number function boolean underfind

 

 　2.例举3种强制类型转换和2种隐式类型转换?

   强制（parseInt,parseFloat,number）

  隐式（== – ===）

 　3.split() join() 的区别

   前者是切割成数组的形式，后者是将数组转换成字符串

 　4.数组方法pop() push() unshift() shift()

  　Push()尾部添加 pop()尾部删除

  　Unshift()头部添加 shift()头部删除

 　5.事件绑定和普通事件有什么区别

  总结：普通事件中的onclick是DOM0级事件只支持单个事件，会被其余onclick事件覆盖，而事件绑定中的addEventListener是DOM2级事件能够添加多个事件而     不    用担忧被覆盖

　　6.IE和DOM事件流的区别

     1.执行顺序不同、

     2.参数不同

  　3.事件加不加on

  　4.this指向问题

 

 7.IE和标准下有哪些兼容性的写法

  　Var ev = ev || window.event

    document.documentElement.clientWidth || document.body.clientWidth

  　Var target = ev.srcElement||ev.target

 　8.ajax请求的时候get 和post方式的区别
  　一个在url后面 一个放在虚拟载体里面

  　有大小限制

   　安全问题

   　应用不一样一个是论坛等只须要请求的，一个是相似修改密码的

 　9.call和apply的区别
   Object.call(this,obj1,obj2,obj3)

 　Object.apply(this,arguments)

   10.ajax请求时，如何解释json数据
    使用eval parse 鉴于安全性考虑 使用parse更靠谱（也就是把JSON数据转化为数组或对象）

 

      11.b继承a的方法

　　12.JavaScript this指针、闭包、做用域


　　13.事件委托是什么
    让利用事件冒泡的原理，让本身的所触发的事件，让他的父元素代替执行！

　　14.闭包是什么，有什么特性，对页面有什么影响

 　闭包就是可以读取其余函数内部变量的函数。

　15.如何阻止事件冒泡和默认事件
　canceBubble return false

　16.添加 删除 替换 插入到某个接点的方法
　obj.appendChidl()

　obj.replaceChild

　obj.removeChild

　17.解释jsonp的原理，以及为何不是真正的ajax

　动态建立script标签，回调函数

　Ajax是页面无刷新请求数据操做

　18.javascript的本地对象，内置对象和宿主对象
　本地对象为array obj regexp等能够new实例化

　内置对象为gload Math 等不能够实例化的

宿主为浏览器自带的document,window 等

　　19.document load 和document ready的区别
　  Document.onload 是在结构和样式加载完才执行js

　　Document.ready原生种没有这个方法，jquery中有 $().ready(function)

　　20.”==”和“===”的不一样
  　前者会自动转换类型

    后者不会

　　21.javascript的同源策略
　一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合

　　22.编写一个数组去重的方法

   function oSort(arr)

　　{
　　var result ={};
　　var newArr=[];
　　for(var i=0;i<arr.length;i++)
　　{
　　if(!result[arr])
　　{
　　newArr.push(arr)
　　result[arr]=1
　　}
　　}
　　return newArr
　　}
</arr.length;i++)

1.自我评价一下HTML/CSS/JS的掌握状况

 

 

2.简述HTML常用的标签和做用。

 　Div/a/p/span/li/ul/ol/table/tr/td

 

　3.你认为最常遇到的兼容Bug有哪些?有哪些问题是你认为解决起来最麻烦的?

 　IE6 PNG

  IE6 Fixed

 

　4.块级元素和行内元素都有哪些? 行内元素有哪些特色?


　　5.介绍所知道的CSS hack技巧(如：_， *， +， \9， !important 之类)


　　6.CSS定位方式有哪些?position属性的值有哪些?他们之间的区别是什么?


　　在CSS中关于定位的内容是：position:relative | absolute | static | fixed


　　•    static 没有特别的设定，遵循基本的定位规定，不能经过z-index进行层次分级。


　　•    relative 不脱离文档流，参考自身静态位置经过 top,bottom,left,right 定位，而且能够经过z-index进行层次分级。


　　•    absolute 脱离文档流，经过 top,bottom,left,right 定位。选53D6其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，能够经过z-index进行层次分级。


　　•    fixed 固定定位，这里他所固定的对像是可视窗口而并不是是body或是父级元素。可经过z-index进行层次分级。


　　7.函数的几种定义方法？

　function a(){},
　var a = function(){}


　　8.对象的定义方法？

　a = new Object(), a = {}


　　9.类的定义方法（prototype）（继承）

　Var a = function(){}
a.prototype = {}
　new a();


　　10.this 关键字的指向
obj.foo() == obj        //方法调用模式,this指向obj
　foo() == window;         //函数调用模式,this指向window
new obj.foo() == obj    //构造器调用模式, this指向新创建对象
　foo.call(obj) == obj;//APPLY调用模式,this指向obj


　　11.什么是闭包，及其做用是什么？

 

　　12.事件绑定的几种方法，事件冒泡？


　　13.Ajax/json/json0070？


　　14.异步ajax的优缺点都有什么？


　　优势：


　　•    相对于同步ajax：不会形成UI卡死，用户体验好。


　　•    相对于刷新页面，省流量


　　缺点：

　•    后退按钮无效；
•    多个请求同时触发时，因为回调时间不肯定，会形成混乱，避免这种混乱须要复杂的判断机制。
　•    搜索引擎不友好
　•    数据安全


　　15.经常使用JS框架都有什么？是否使用过jQuery，以及jQuery的优势是什么？


　　16.JS用了多久，介绍一下本身作过的JS项目？


　　17.开发调试工具和方法都有什么（编辑器、浏览器）


　　18.类、函数、对象（代码表达）


　　19.闭包（setTimeout）（产生两个首尾相连的计时器）（使用for循环产生10个计时器）||


　　20.Jquery Mobile 相关


　　21.HTML5/CSS3的掌握状况


　　22.是否据说过和理解webapp？


　　23.我的擅长的语言，优缺点都是什么？


　　24.介绍一下曾经参与过的项目经验，合做开发、独立开发


　　25.编程的重要知识？


　　26.开发过程当中遇到困难，如何解决？


　　27.有没有我的/开源项目

 

　　28.前端开发（HTML/CSS/）

 

 

 

最新前端开发工程师面试题——JavaScript部分

 

　　1、eval是作什么的？

 

　　它的功能是把对应的字符串解析成JS代码并运行；应该避免使用eval，不安全，很是耗性能（2次，一次解析成js语句，一次执行）。

 

　　2、Node.js的适用场景？

 

　　高并发、聊天、实时消息推送

 

　　3、介绍js的基本数据类型。

 　number,string,boolean,object,undefined

 

　　4、Javascript如何实现继承？

 

　　经过原型和构造器

 

 5、如何建立一个对象? （画出此对象的内存图）

 　function Person(name, age) {    this.name = name;    this.age = age;    this.sing = function() { alert(this.name) }   } 

 

　6、谈谈This对象的理解。

 　this是js的一个关键字，随着函数使用场合不一样，this的值会发生变化。可是有一个总原则，那就是this指的是当前调用函数的那个对象。this通常状况下：是全局对象Global。 做为方法调用，那么this就是指这个对象 

 

　7、事件是什么？IE与火狐的事件机制有什么区别？ 如何阻止冒泡？

（1） 咱们在网页中的某个操做（有的操做对应多个事件）。例如：当咱们点击一个按钮就会产生一个事件。是能够被 JavaScript 侦测到的行为。   

 （2） 事件处理机制：IE是事件冒泡、火狐是 事件捕获； 

　（3） ev.stopPropagation();

 

　8、什么是闭包（closure），为何要用它？

 　执行say667()后,say667()闭包内部变量会存在,而闭包内部函数的内部变量不会存在.使得Javascript的垃圾回收机制GC不会收回say667()所占用的资源，由于say667()的内部函数的执行须要依赖say667()中的变量。这是对闭包做用的很是直白的描述.  function say667() {    // Local variable that ends up within closure    var num = 666;    var sayAlert = function() { alert(num); }    num++;    return sayAlert;} var sayAlert = say667(); sayAlert()//执行结果应该弹出的667  

 

　9、如何判断一个对象是否属于某个类？

 　使用instanceof （待完善）   if(a instanceof Person){       alert('yes');   }

 

10、Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？

 　hasOwnProperty

 

 11、对JSON 的了解？

 　JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小{'age':'12', 'name':'back'}

 

2016年Web前端面试题目汇总

如下是收集一些面试中常常会遇到的经典面试题以及本身面试过程当中没法解决的问题，经过对知识的整理以及经验的总结，从新巩固自身的前端基础知识，若有错误或更好的答案，欢迎指正。:）

 

HTML/CSS部分

 

1、什么是盒子模型？

在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分能够显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一块儿构成了css中元素的盒模型。

 

2、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea

块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img

 

3、CSS实现垂直水平居中

 一道经典的问题，实现方法有不少种，如下是其中一种实现：

HTML结构：

<div class="wrapper">

 <div class="content"></div>

 </div>

 

CSS：

.wrapper{position:relative;}

  .content{

   width:200px;

    height:200px;

  position: absolute;        //父元素须要相对定位

   top: 50%;

   left: 50%;

  margin-top:-100px ;   //二分之一的height，width

  margin-left: -100px;

  }

 

4、简述一下src与href的区别

href 是指向网络资源所在位置，创建和当前元素（锚点）或当前文档（连接）之间的连接，用于超连接。

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

 

5、什么是CSS Hack?

通常来讲是针对不一样的浏览器写不一样的CSS,就是 CSS Hack。

IE浏览器Hack通常又分为三种，条件Hack、属性级Hack、选择符Hack（详细参考CSS文档：css文档）。例如：

// 1、条件Hack

  <!--[if IE]>

   <style>

      .test{color:red;}

   </style>

   <![endif]-->

  // 2、属性Hack

  .test{

  color:#0909; /* For IE8+ */

  *color:#f00;  /* For IE7 and earlier */

  _color:#ff0;  /* For IE6 and earlier */

   }

 

   // 3、选择符Hack

  * html .test{color:#090;}       /* For IE6 and earlier */

  * + html .test{color:#ff0;}     /* For IE7 */

 

6、简述同步和异步的区别

同步是阻塞模式，异步是非阻塞模式。

同步就是指一个进程在执行某个请求的时候，若该请求须要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；

异步是指进程不须要一直等下去，而是继续执行下面的操做，无论其余进程的状态。当有消息返回时系统会通知进程进行处理，这样能够提升执行的效率。

 

7、px和em的区别

px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，而且em会继承父级元素的字体大小。

浏览器的默认字体高都是16px。因此未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em

 

8、什么叫优雅降级和渐进加强？

渐进加强 progressive enhancement：

针对低版本浏览器进行构建页面，保证最基本的功能，而后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

 优雅降级 graceful degradation：

一开始就构建完整的功能，而后再针对低版本浏览器进行兼容。

 区别：

a. 优雅降级是从复杂的现状开始，并试图减小用户体验的供给

b. 渐进加强则是从一个很是基础的，可以起做用的版本开始，并不断扩充，以适应将来环境的须要

c. 降级（功能衰减）意味着往回看；而渐进加强则意味着朝前看，同时保证其根基处于安全地带

 

9、浏览器的内核分别是什么?

IE: trident内核

Firefox：gecko内核

Safari：webkit内核

Opera：之前是presto内核，Opera现已改用Google Chrome的Blink内核

Chrome：Blink(基于webkit，Google与Opera Software共同开发)

 

JavaScript部分

1、怎样添加、移除、移动、复制、建立和查找节点？

1）建立新节点

createDocumentFragment() //建立一个DOM片断

 

createElement() //建立一个具体的元素

 

createTextNode() //建立一个文本节点

 

 

 

2）添加、移除、替换、插入

 

 

 

appendChild() //添加

 

removeChild() //移除

 

replaceChild() //替换

 

insertBefore() //插入

 

 

 

3）查找

 

 

 

getElementsByTagName() //经过标签名称

 

getElementsByName() //经过元素的Name属性的值

 

getElementById() //经过元素Id，惟一性

 

 

 

2、实现一个函数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;

 

}

 

 

 

3、如何消除一个数组里面重复的元素？

 

 

 

// 方法一：

 

var arr1 =[1,2,2,2,3,3,3,4,5,6],

 

    arr2 = [];

 

for(var i = 0,len = arr1.length; i< len; i++){

 

    if(arr2.indexOf(arr1[i]) < 0){

 

        arr2.push(arr1[i]);

 

    }

 

}

 

document.write(arr2); // 1,2,3,4,5,6

 

 

 

4、想实现一个对页面某个节点的拖曳？如何作？（使用原生JS）。

 

 

 

5、在Javascript中什么是伪数组？如何将伪数组转化为标准数组？

 

 

 

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

 

 

 

function log(){

 

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

 

//为了使用unshift数组方法，将argument转化为真正的数组

 

      args.unshift('(app)');

 

 

 

      console.log.apply(console, args);

 

};

 

 

 

6、Javascript中callee和caller的做用？

 

 

 

caller是返回一个对函数的引用，该函数调用了当前函数；

 

 

 

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

 

 

 

7、请描述一下cookies，sessionStorage和localStorage的区别

 

 

 

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问而且当会话结束后数据也随之销毁。所以sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，不然数据是永远不会过时的。

 

 

 

web storage和cookie的区别

 

 

 

Web Storage的概念和cookie类似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，而且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还须要指定做用域，不能够跨域调用。

 

除此以外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie须要前端开发者本身封装setCookie，getCookie。可是Cookie也是不能够或缺的：Cookie的做用是与服务器进行交互，做为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

 

 

 

8、手写数组快速排序

 

 

 

关于快排算法的详细说明，能够参考阮一峰老师的文章快速排序

 

“快速排序”的思想很简单，整个排序过程只须要三步：

 

（1）在数据集之中，选择一个元素做为”基准”（pivot）。

 

（2）全部小于”基准”的元素，都移到”基准”的左边；全部大于”基准”的元素，都移到”基准”的右边。

 

（3）对”基准”左边和右边的两个子集，不断重复第一步和第二步，直到全部子集只剩下一个元素为止。

 

 

 

9、统计字符串”aaaabbbccccddfgh”中字母个数或统计最多字母数。

 

 

 

var str = "aaaabbbccccddfgh";

 

var obj  = {};

 

for(var i=0;istr.length;i++){

 

    var v = str.charAt(i);

 

    if(obj[v] & obj[v].value == v){

 

        obj[v].count = ++ obj[v].count;

 

    }else{

 

        obj[v] = {};

 

        obj[v].count = 1;

 

        obj[v].value = v;

 

    }

 

}

 

for(key in obj){

 

    document.write(obj[key].value +'='+obj[key].count+' '); // a=4  b=3  c=4  d=2  f=1  g=1  h=1

 

}

 

 

 

10、写一个function，清除字符串先后的空格。（兼容全部浏览器）

 

 

 

function trim(str) {

 

    if (str & typeof str === "string") {

 

        return str.replace(/(^s*)|(s*)$/g,""); //去除先后空白符

 

    }

 

}

 

 

 

其余

 

 

 

1、一次完整的HTTP请求是怎样的一个过程？

 

 

 

基本流程：

 

 

 

a. 域名解析

 

 

 

b. 发起TCP的3次握手

 

 

 

c. 创建TCP链接后发起http请求

 

 

 

d. 服务器端响应http请求，浏览器获得html代码

 

 

 

e. 浏览器解析html代码，并请求html代码中的资源

 

 

 

f. 浏览器对页面进行渲染呈现给用户

 

 

 

2、对前端工程师这个职位你是怎么样理解的？

 

 

 

a. 前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好

 

 

 

b. 参与项目，快速高质量完成实现效果图，精确到1px；

 

 

 

c. 与团队成员，UI设计，产品经理的沟通；

 

 

 

d. 作好的页面结构，页面重构和用户体验；

 

 

 

e. 处理hack，兼容、写出优美的代码格式；

 

 

 

f. 针对服务器的优化、拥抱最新前端技术。

 

 

1,   js的几中数据类型？

3中基本的数据类型： 布尔型 字符串 数字

两种引用型：对象 数组；

2中特殊型：underfine  null

2,js基本的内置对象 ？

date   XHTML  

String（）、Number（）、Boolean（）、RegExp（）、Date（）、Error()、Array（）、

Function（）、Object（）、symbol（）;相似于对象的构造函数

 

3.如何判段一个对象属于哪一种类型？

instance of  

判断为array   console.log(instance of array) 是的话返回true

4.对json数据的理解；

json数据是先后端数据交互的语言 ，ajax请求的数据就是以json的格式 在数据传输过程当中json是以文本也就是字符串的形式传递的因此json数据的解析，与序列化很重要

 json数据的解析（json对象转换为js字符串或数组）

eval()

JSON.parse()

 json数据的序列化（js字符串或数组转化为json对象）

stringgify()

 

5.js延迟加载的方法有哪些？

     1.页面初始化 window.onload();

　　2.把javascrip 或csst放在底部加载 （先让页面加载出来再加载js/css）

　　3.用ajax下载代码放在eval()中执行；

　　4， 在引用javascript时添加defer=defer

　　<script type="text/javascript"  defer="defer">

6.ajax是什么？ 交互模型？同步和异步的区别？如何解决？


什么是面向过程什么是面向对象
面向过程就是分析出解决问题所须要的步骤，而后用函数把这些步骤一步一步实现，使用的时候一个一个依次调用就能够了。 
面向对象是把构成问题事务分解成各个对象，创建对象的目的不是为了完成一个步骤，而是为了描叙某个事物在整个解决问题的步骤中的行为。