爱前端

前端面试题目总结

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的发展。

老的IE浏览器有一套自己的标准,其他内核的浏览器都在尽量遵守 W3C 标准

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

  • 有两种, IE 盒子模型、标准 W3C 盒子模型;
  • IE的content部分包含了 border 和 pading;
  • 盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border).
  • 可以使用 box-sizing 属性来实现box-sizing : content-box | border-box | inherit 不同浏览器的差异
  • IE8+支持该属性
    .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权重问题

  • css文件的权重:行内样式、内联样式、外联样式、导入式 行内式样式权重 > style 标签内嵌样式的权重 > 外链样式的权重

  • 选择器权重:内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符

5、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:    ;    // 子元素的显示顺序
    }
    

6、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,从而提升性能。

7、html5 新特性

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

8、javascript 数据类型

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

  • undefined
  • null
  • number
  • string
  • boolean

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

  • Object
  • Date
  • Array
  • RegExp
引用数据类型指向的是一个路径,因此 b = a (a为引用类型数据)后,b的值改变,a的值也改变,为避免这种情况,可用以下方法:
  • 遍历a中的数据,重新赋值给b
  • 利用 jquery、zepto等的clone()方法

9、对前端语义化的理解

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

10、常用的前端框架和js库有哪些,分别有什么优缺点

一、jquery:js库,熟练使用jquery是每个合格前端的必备技能

优点

  • jQuery实现脚本与页面的分离
  • 性能:在大型JavaScript框架中,jQuery对性能的理解最好。
  • 它是一个“标准”:虽然并不是官方标准,但业内对jQuery的支持经非常广泛
  • 丰富的插件:基于jQuery开发的插件种类很多,能解决大部分问题,前端工程师还可以根据项目需要自行封装不同需求的插件。
  • 入门简单、易学,节约学习成本。
  • 轻量级,最新的版本压缩的jquery代码只有十几k
  • 强大的选择器,提供多重选择
  • 出色的DOM操作的封装:jQuery封装了大量常用DOM操作,使你编写DOM操作相关程序的时候能够得心应手,优雅的完成各种原本非常复杂的操作,让JavaScript新手也能写出出色的程序
  • 完善的Ajax
  • 可靠的事件处理机制
  • 不污染顶级变量
  • 出色的浏览器兼容性
  • 链式操作方式
  • 行为层与结构层的分离
  • 完善的文档
  • 开源

缺点: 从上面的介绍可以看出 jquery的优点很多,当然任何一个框架都不是完美的,jQuery也有自身的缺陷,下面就罗列下jQuery的缺点和劣势。

  • 不能向后兼容:每一个新版本不能兼容早期的版本
  • 插件兼容性
  • 在同一页面上使用多个插件时,很容易碰到冲突现象
  • jQuery的稳定性
  • 在大型框架中,jQuery核心代码库对动画和特效的支持相对较差

二、bootstrap:前端UI类库,同样的还有Amaze UI

优点:

  • Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,简洁灵活,使得 Web 开发更加快捷。
  • Bootstrap中包含了丰富的Web组件,根据这些组件,可以快速的搭建一个漂亮、功能完备的网站。
  • 其中包括以下组件:下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对象等
  • 自带jQuery插件
  • 支持less
  • 可定制化
  • 开源
  • 响应式设计
  • 对于一些设计要求不高的页面来说,bootstrap可以快速实现一个一致性很高的界面

缺点:

  • 它不遵循最佳实践:DOM元素上将拥挤大量的类,打破了良好的web设计基本规则之一,HTML不再有语义,而且内容和表示不再分离
  • 它将与我现有设置发生碰撞
  • Twitter Bootstrap 太重
  • 不支持SASS
  • 严格来讲,bootstrap 是个前端UI的类库,依赖它来搭建的网站外形很相似,没什么特点
  • 对中文排版的支持不好

三、meteor

优点:

  • 前后端统一,只用Javascript一门语言,抹平云端界限,一份代码处处运行
  • 实时数据同步,所有数据实时推送的基础设置,每个终端都无延迟同步响应
  • 前端随动反馈,面向数据的编程模型,数据实时推送后,界面会自动更新
  • 跨平台,iOS、Android、PC端一应俱全
  • 省流量,省掉了通过Ajax请求建立和关闭连接时的暂用的额外流量
  • 代码简洁,轻轻松松几分钟内实现一个聊天室或TodoList的跨平台应用
  • 结构简单,上手较容易(MVVM框架)
  • 实时代码更新,在服务器代码更新后,客户端无须用户干预,实时更新
  • 延迟同步机制,用户提交的数据实时反馈在屏幕上,如果因为网络原因数据提交失败,数据会在网络重新连接后上传
  • 便捷发布,打包后的程序中会包含所有依赖项,让代码可以在任意装有Node.js的机器运行
  • 互通性,支持通过DDP协议连接到NativeAPP、数据库甚至是Arduinos
  • 兼容性,可以轻松的兼容其他模板框架、测试框架、Dom操作框架等

缺点:

  • 版本不够稳定
  • 前后端开发没有分离,算缺点也算是优点

四、zepto

优点:

  • 拥有和jQuery相似的语法,使用起来比较方便,学习成本低
  • 压缩后的 zepto.min.js 大小只有21K, 使用服务器端 gzip 压缩后大小只有5~10K, 非常的小
  • 功能很齐全,多出来了一些触摸屏的事件,是开发iPhone和Android网页绝对是首选了

缺点:

  • Zepto不支持Windows Phone下的IE

10、那些操作会造成内存泄漏?

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。 垃圾回收器定期扫描对象,并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为0(没有其他对象引用过该对象),或对该对象的惟一引用是循环的,那么该对象的内存即可回收。

  • setTimeout 的第一个参数使用字符串而非函数的话,会引发内存泄漏。
  • 闭包、控制台日志、循环(在两个对象彼此引用且彼此保留时,就会产生一个循环)

11、前端安全的检测与预防

  • WEB基本攻击大致可以分为三大类—— “资源枚举”、“参数操纵” 和 “其它攻击”
  • 资源枚举:遍历站点所有可访问的目录,然后把一些常见的备胎文件名(比如“sql.bak”、“index-副本.html”)一个个都枚举一下,如果运气好枚举到了就直接下载。
  • 参数操纵:包括了SQL注入、XPath注入、cgi命令执行,还有XXS和会话劫持等,xxs攻击指的是恶意攻击者往Web页面里插入恶意html代码,当用户浏览该页之时,嵌入的恶意html代码会被执行,从而达到恶意用户的特殊目的
  • cookie劫持:通过获取页面的权限,在页面中写一个简单的到恶意站点的请求,并携带用户的cookie,获取cookie后通过cookie 就可以直以被盗用户的身份登录站点

解决方案:

  • 永远不要相信客户端传来的任何信息,对这些信息都应先进行编码或过滤处理
  • 谨慎返回用户输入的信息
  • 使用黑名单和白名单处理(即“不允许哪些敏感信息”或“只允许哪些信息”,白名单的效果更好但局限性高)
  • 检查、验证请求来源,对每一个重要的操作都进行重新验证
  • 使用SSL防止第三方监听通信(但无法阻止XSS、CSRF、SQL注入攻击)
  • 不要将重要文件、备份文件存放在公众可访问到的地方
  • 会话ID无序化
  • 对用户上传的文件进行验证(不单单是格式验证,比方一张gif图片还应将其转为二进制并验证其每帧颜色值<无符号8位>和宽高值<无符号16位>)
  • WSDL文档应当要求用户注册后才能获取

12、