前端理论知识总结（面试题）

  1. 语义化的理解？

用正确而标签做正确的事，不仅便于机器理解，也便于人理解。

    2. HTML5的离线储存？

  • localStorage 长期存储数据，浏览器关闭后数据不丢失；

  • sessionStorage 数据在浏览器关闭后自动删除。

    3. iframe缺点

  • 页面资源需要额外链入，会增加请求。

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

  • iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

    4. css3 新增伪类

  • :root (匹配文档的根元素。在HTML中，根元素永远是HTML)

  • :empty (匹配没有任何子元素的元素)

  • :first-child (第一个元素)

  • :last-child (最后一个元素)

  • :only-child (匹配属于其父元素的唯一子元素的每个元素)

  • :nth-child(n) (匹配属于其父元素的第 N 个子元素)

  • :nth-last-child(n) (匹配属于其元素的第 N 个子元素的每个元素,从最后一个子元素开始计数)

  • :first-of-type (匹配属于其父元素的特定类型的首个子元素的每个元素)

  • :last-of-type (匹配属于其父元素的特定类型的最后一个子元素的每个元素)

  • :only-of-type (匹配父级元素下的为一个一个E元素)

  • :nth-of-type(n) (匹配属于父元素的特定类型的第 N 个子元素的每个元素.)

  • :nth-last-of-type(n) (选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素，从最后一个子元素开始计数)

    5. cookies，sessionStorage 和 localStorage 的区别？

  • cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会

  • sessionStorage和localStorage的存储空间更大，有更多丰富易用的接口；各自独立的存储空间；

    6. css 选择器

  • id选择器（ # myid）

  • 类选择器（.myclassname）

  • 标签选择器（div, h1, p

  • 子选择器（ul < li）

  • 后代选择器（li a）

  • 属性选择器

  • 伪类选择器

  • 相邻选择器（h1 + p）

    7.  Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

　　<!DOCTYPE> 位于文档中的最前面  声明文档的类型，告诉浏览器以什么样的规范来解析这个文档。

 

    8.  浏览器的内核分别是什么?  经常遇到的浏览器的兼容性有哪些？ 

         IE浏览器的内核Trident、 Mozilla的Gecko、google的WebKit、Opera内核Presto；

 

     ie6 png透明bug  使用 png8 git

     浮动双边界bug  浮动元素设置为display:inline 

     fixed定位bug  使用absolute

    chorme 最小文字不能小于 12px  设置 text-size-adjust:none;

    

   9 . html5有哪些新特性 移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

  • HTML5 现在已经不是 SGML( 标准通用标记语言 ) 的子集，主要是关于图像，视频音频，位置，存储，多任务等功能的增加。

  • 绘画 canvas

  • 用于媒介回放的 video 和 audio 元素

  • 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

  • localStorrage sessionStorage 的数据在浏览器关闭后自动删除

  • 语意化更好的内容元素，比如 article、footer、header、nav、section

  • 表单控件，calendar、date、time、email、url、search

  • 新的技术webworker, websockt, Geolocation

  • 移除的元素

    纯表现的元素：basefont，big，center，font, s，strike，tt，u；

    对可用性产生负面影响的元素：frame，frameset，noframes；

    IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式.

    当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

    10.  简单比较 i b em strong 说出他们的相同点和差别

     em   语义的强调  表示内容的着重点（stress emphasis）

     strong 内容的强调 表示内容的重要性、严肃性和 紧迫性（emphasized text ） 

 

　　< b > < i > 是视觉要素（presentationl elements），单纯样式/风格  无感情色彩

 

　　b和i，一个是加粗，一个是斜体，都是视觉上的效果，而em和strong有情感色彩加强

 

    11.  介绍一下CSS的盒子模型？

     IE 盒子模型、 标准盒子模型；  IE 的宽高部分包含了 border 和 pading margin;
     盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).  宽高只指代内容区的宽高。

12. 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
    span b i em strong a input button select
    div p table ul dl li 
    meta link img hr br input

13. link 和@import 的区别是？
    （1）、link属于XHTML标签，而@import完全是CSS提供的一种方式;

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

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

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

14. 如何居中div？
     左右margin  auto   inline-block 居中   定位 + 负边框 
   
15. 为什么要初始化CSS样式。
    考虑到浏览器兼容性问题 每不同浏览器对每个便签的默认样式是不同的， 为了保证页面内容在不同浏览器中拥有一致性的表现，所以要做重置。
16.页面重构怎么操作？

根据原有页面内容和结构的基础上，通过当前主流的html + css版本，写出符合web标准的页面结构。

具体包括：

1. 结构完整，可通过标准验证
2. 标签语义化，结构合理
3. 充分考虑到页面在站点中的“作用和重要性”，并对其进行有针对性的优化


2.1  列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？
 block inline inling-block none table table-cell

  2.2 CSS3有哪些新特性？

   边框的 圆角 边框背景 边框阴影

   阴影 文字阴影 

  线性渐变

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

  过渡 transtion 

     

transition 简写属性，用于在一个属性中设置四个过渡属性。 3
transition-property 规定应用过渡的 CSS 属性的名称。 3
transition-duration 定义过渡效果花费的时间。默认是 0。 3
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 3
transition-delay 规定过渡效果何时开始。默认是 0。

  动画： animation 

    @keyframes

    

 

  背景： background-size 属性规定背景图片的尺寸。

           background-origin 属性规定背景图片的定位区域。

3.  使用 CSS 预处理器吗？喜欢那个？

   只使用过 less 

4. 对BFC规范的理解？

    块级格式化上下文： 是W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。

    1.通过边缘不和浮动元素重叠的特性，实现两栏结构。

    2.清除元素内部浮动

    3.解决合并外边距的问题

Javascript 

  3.1. js延迟加载的方式有哪些

    defer和async、动态创建DOM方式（用得最多）、按需异步载入js

   2. 函数表达式和函数声明

    一个函数表达式产生一个值(一个函数). 一个函数声明将一个匿名函数赋值给一个变量.

   解析器会率先读取函数声明，并使其在执行任何代码之前可用；而函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解释执行。 函数表达式可以被立即调用。

    3.3  eval是做什么的？

　　　　将字符串转化为解释成Javascript代码，并且执行.

           应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。

  3.4   null，undefined 的区别？

    null是一个表示"无"的对象，转为数值时为0；undefined是什么都没有。

    一般定义了变量或属性 但未赋值时 为 undefined;

   3.5 谈一下node.js

 

     其特点为：它是一个Javascript运行环境 ,依赖于Chrome V8引擎进行代码解释

     事件驱动 非阻塞I/O 轻量、可伸缩，适于实时数据交互应用 单进程，单线程.

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

  3.6  介绍js的基本数据类型。

    number string boolean   array object  null undefined;

3.7 Javascript如何实现继承？

    通过原型和构造器

3.8 谈谈This对象的理解。

  指向当前的作用域，使用场合不同，this的值会发生变化。

  全局作用域  函数中的this  方法调用  apply式的调用 。

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

     事件是可以被 JavaScript 侦测到的行为。 常见的事件包括 鼠标事件 键盘事件 页面相关事件 表单事件

    ie低版本只有冒泡 标准浏览器的事件包括 捕获和冒泡两个阶段 e.stopPropagation()  e.preventDefault();  

 3.10 什么是闭包（closure），为什么要用它？

   函数通过作用域相互关联起来， 函数内部的函数在作用域外存在引用，就形成了一个闭包。

    它保存了函数所在作用域的作用域链 ， 可以在函数外部读取函数内部的变量，并让这些变量的值始终保持在内存中。

 3.11 "use strict";是什么意思 ? 使用它的好处和坏处分别是什么？

        严格模式

     - 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;

　　- 消除代码运行的一些不安全之处，保证代码运行的安全；

　　- 提高编译器效率，增加运行速度；

　　- 为未来新版本的Javascript做好铺垫。

     坏处是低版本浏览器不支持。

 

     全局变量显式声明，  静态绑定， 增强的安全措施  重名错误   函数必须声明在顶层

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

    instanceof 

3.13  new操作符具体干了什么呢?

   1. 创建一个新的对象

   2. 把函数的原型，赋值给新对象的原型

   3. 以新对像的this 为指向，调用构造函数 返回这个新的对象。

3.14    删选 过滤掉原型属性和方法

    hasOwnProperty

3.15 JSON 的了解？

    一种轻量级的数据交换格式，它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小

 

3.16 如何解决跨域问题

 jsonp、 iframe、window.postMessage、window.name、服务器上设置代理页面

 

3.17 模块化怎么做？

    创建 立即执行函数,不暴露私有成员

3.18  call() 和 .apply() 的区别？

　　更改对象的this指向，apply第二个参数为数组， call 需要依次传入参数。


其他：

1. 你认为前端应该如何高质量完成工作? 

精确地实现效果图；
与设计师，产品经理，和交互的的充分沟通；
优化页面结构和用户体验；
做hack，处理兼容、写出优美的代码格式；

针对服务器的优化、拥抱 HTML5。

 

2. 说说最近最流行的一些东西吧？常去哪些网站？

     github 获取学习开源资源

　　stackoverflow  解决和查询一些工作中遇到的问题和疑惑

     博客园  总结和交流一些前端的知识

     w3cfuns  交流学习

 

    淘宝ued  百度 fex 前端研发团队   腾讯isux研究院 allowyTeam;

3. 常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？

    jquery yui kissy    chorme developer tools   Fiddler   jshint

    backbone angular ember knockout 

    slide  tab dialog  accordion scrollspy


 4. 什么是面向对象，有什么特点？

    把具体事务抽象化，归结为类，具有该类问题的属性 和解决处理问题的方法。

    基本特征是 封装、继承、和多态   javascript中通过原型实现继承 以前主流的方式是 构造函数+ 原型继承

    现在 Object.create();  

5. W3C标准的理解

    万维网联盟 w3c 标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。 

    对应的标准也分三方面  结构化标准语言html XML标准  表现化标准 css  行为标准DOM ecmascript 

 

     

posted @ 2014-07-01 17:29  花落红尘  阅读(635)  评论(0)  编辑  收藏  举报