前端面试题目小结

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标准,可以削减差异化。