前端面试题目小结

1、说说你对web标准的理解

+ web标准不是某一个标准，而是由一些列标准组合而成。

+ 网页主要由三个部分组成：结构、样式、行为

+ 对应的标准也分三个方面：结构化标准语言主要包括XHTML和HTML以及XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。

+ 这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准。

2、各种浏览器内核的区别

Trident(又称为MSHTML）代表 IE 浏览器

• Trident是微软开发的一种排版引擎。
• 基于Trident内核的浏览器有 ie6、ie7、ie8(Trident 4.0) 、ie9(trident 5.0) 、ie10(trident6.0)、ie11(trident7.0)、国内的很多双核浏览器也是基于trident内核的，例如：世界之窗、360安全浏览器、遨游2.0（3.0以上版本开始采用webkit内核）、搜狗浏览器、腾讯浏览器等

Gecko（跨平台）代表 Mozilla Firefox

• Gecko是一个跨平台内核，可以在Windows、BSD、Linux和Mac OS X中使用
• 正在和曾经使用Gecko引擎的浏览器有Firefox、网景6～9、SeaMonkey、Camino、Mozilla、Flock、Galeon、K-Meleon、Minimo、Sleipni、Songbird、XeroBank。
• Google Gadget引擎采用的就是Gecko浏览器引擎。

WebKit内核（代表：Safari、Chrome）

• WebKit 是一个开放源代码的浏览器引擎(Web Browser Engine)。WebKit也是自由软件，同时开放源代码。它的特点在于源码结构清晰、渲染速度极快。主要代表产品有Safari和Google的浏览器Chrome。
• WebKit内核在手机上的应用也十分广泛，例如Google的Android平台浏览器、Apple的iPhone浏览器、Nokia S60浏览器等所使用的浏览器内核引擎，都是基于WebKit引擎的。
• WebKit内核也广泛应用于Widget引擎产品，包括中国移动的BAE、Apple的Dashboard以及Nokia WRT在内采用的均为WebKit引擎。

Presto内核（代表：Opera）

• Presto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。
• Presto的特点就是渲染速度的优化达到了极致，它是目前公认的网页浏览速度最快的浏览器内核，然而代价是牺牲了网页的兼容性。
• Presto实际上是一个动态内核，与Trident、Gecko等内核的最大区别就在于脚本处理上，Presto有着天生的优势，页面的全部或者部分都能够在回应脚本事件时等情况下被重新解析。此外该内核在执行JavaScript时有着最快的速度，根据同等条件下的测试，Presto内核执行同等JavaScript所需的时间仅有Trident和Gecko内核的约1/3。
• Presto是商业引擎，除了Opera以外较少浏览器使用Presto内核，这在一定程度上限制了Presto的发展。

3、CSS布局以及盒模型的理解

+ 有两种，IE盒模型、标准W3C盒模型

+ IE的content部分包含了border和padding

+ 盒模型：内容content、填充padding、边界margin、边框boprder

+ 可以使用border-sizing属性来实现不同浏览器的差异

.box{
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
       -o-box-sizing: border-box;
          box-sizing: border-box;
}

4、CSS样式的优先级

行内样式、内联样式、外联样式、导入式 行内式样式权重 > style 标签内嵌样式的权重 > 外链样式的权重

5、CSS选择器的优先级

ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符

6、CSS3有哪些新的属性

• 圆角--border-radius

• 阴影--box-shadow

• 文字特效--text-shadow
• 渐变--gradient
• 旋转--transform（rotate：旋转、scale：缩放、translate：定位、skew：倾斜）
• 多背景
• rgba
• 边框背景--border-image
• 服务器端字体：font-face

  @font-face {
  　　font-family: 'MyFont';    /* 表示为这种字体起一个名称，可以随意设置，这里用的是MyFont */
  　　src: url('myfont.eot');     /* 这一行表示字体位置，由于ie只支持服务器端的eot字体，所以这一行是ie专用的 */    
  　　src: local('myfont.ttf'),
  　　url('myfont.woff') format('woff'),
  　　url('myfont.ttf') format('truetype'); /* local()表示在本机（客户端）查找该字体，如果本机已经安装了，就不用下载了。url()表示字体在服务器上的位置，format()用来说明字体格式。Firefox 3.5支持TrueType和OpenType字体，Firefox 3.6又增加了WOFF字体。其他基于Webkit引擎的浏览器（sarif，opera、chrome），目前好像只支持truetype */
  }

  这样使用就行

h2{ font-family: "MyFont"; }

• 选择器的增加
• 伪元素::selection
• 媒体查询

• 多栏布局、弹性布局flex-box

• 弹性布局，适应性强，在做不同屏幕分表率的界面时非常实用
• 可以随意按照宽度、比例划分元素的宽高
• 可以轻松改变元素的显示顺序
• 自适应布局实现快捷，易维护

.flex{
  display: box;    // 将一个元素的子元素以弹性布局进行布局
  box-flex: 1;    // 子元素如何分配剩余空间
  box-orient: horizontal | vertical | inline-axis | block-axis | inherit;    // 子元素的排列方式（横向或者竖向）
  box-direction: normal | reverse | inherit;    // 子元素排列顺序
  box-align: start | end | center | baseline | stretch;    // 垂直对齐方式
  box-pack: start | end | center | justify;    // 水平对齐方式
  box-ordinal-group:    ;    // 子元素的显示顺序
}

7、CSS3哪些属性对性能有影响

css3 在使用起来非常强大，实现效果快，但有些属性对页面性能有影响，尤其在手机端使用的时候

• box-shadow 如果大量使用box-shadow，又或者容器比较大的时候，性能都会降低很多；无论是Firefox还是Chrome，对box-shadow的支持都存在这个问题，Opera则好上很多，带来的迟滞感不是很强。
• gradients 页面性能杀手，尤其是在和 box-shadow一起使用时

提升移动端CSS3动画体验的主要方法：

高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂，我们总结为以下几点： 流量、功耗与流畅度。 在PC时代我们更多的是考虑体验上的流畅度，而在Mobile端本身丰富的场景下，需要额外关注对用户基站网络流量使用的情况，设备耗电量的情况。

• 尽可能多的利用硬件能力，如使用3D变形来开启GPU加速

  .demo{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  // 如动画过程有闪烁（通常发生在动画开始的时候），可以尝试下面的Hack：
  .demo{
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
            backface-visibility: hidden;
  
    -webkit-perspective: 1000;
       -moz-perspective: 1000;
        -ms-perspective: 1000;
            perspective: 1000;
  }

• 尽可能少的使用box-shadows与gradients

• 尽可能的让动画元素不在文档流中，以减少重排(position 定位 让元素脱离文档流)
• 执行队列，所有可触发layout的操作都会被暂时放入 layout-queue 中，等到必须更新的时候，再计算整个队列中所有操作影响的结果，如此就可只进行一次的layout，从而提升性能。

8、HTML5新特效有哪些？

• 新增更语义化的标签
• 删除一些无意义的标签
• 表单元素更多的type类型支持
• 音频、视频元素的增加
• 画布 canvas API
• 获取地理位置 Geolocation API
• 本地存储：lacalStorage（长期数据存储，不手动删除则一直存在）、sessionStroage（数据在浏览器关闭后自动删除）

9、javascript的数据类型有哪些？

基本数据类型，实际的值保存在变量中：

• undefined
• null
• number
• string
• boolean

引用数据类型，引用类型的值是保存在内存中的对象

• Object
• Date
• Array
• RegExp

10、与语义化的理解

• 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
• 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
• 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
• 便于团队开发和维护，语义化更具可读性，遵循W3C标准，可以减少差异化。