前端面试

面试

HTML5

what

• 是一套包含HTMML,CSS,JS在内的技术组合，它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务。

优

• 1. 网络标准统一，HTML5本身是由W3C推荐出来的。
• 2. 多设备，跨平台，即时更新。
• 3. 提高可用性和改进用户的友好体验。
• 4. 有几个新的标签将有利于开发者定义重要的内容。
• 5. 可以给站点带来更多的多媒体元素。
• 6. 可以很好的替代Flash和Silverlight。
• 7. 涉及到网站的抓取和索引时，对于SEO很友好。
• 8. 被大量应用于移动应用程序和游戏。

缺

• 1. 安全性：websocket和透明代理的实现有严重安全问题，webstorage和websocket这样的功能很容易被黑客利用来盗取用户的信息与资料。
• 2. 完善性：许多特性浏览器的支持程度不一样。
• 3. 技术门槛：HTML5简化了开发者学习，像web worker、web socket、web storage等新特性，后台甚至浏览器原理的知识。
• 4. 性能：某些平台上的引擎问题导致HTML5性能低下。
• 5. 浏览器兼容性：最大缺点，IE9以下浏览器几乎全军覆没。

Doctype作用

• 1. 声明位于文档最前面，处于标签之前，告知浏览器的解析器以何种方式解析文档。
• 2. 严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。
• 3. 在混杂模式中，页面以宽松的方式向后兼容的方式显示。模拟老式浏览器的行为防止站点无法工作。
• 4. Doctype不存在或格式不正确会导致文档以混杂模式呈现。

语义化

• 1. 去掉或样式丢失的时候能让页面呈现清晰的结构
  • ：html本身是没有表现的，我们看到例如h1是粗体，字体大小2em，加粗；strong是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。
• 2. 屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页.
  • 例如,如果你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,而不是试着去对它完整发音.
• 3. PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）.使用语义标记可以确保这些设备以一种有意义的方式来渲染网页.理想情况下,观看设备的任务是符合设备本身的条件来渲染网页.语义标记为设备提供了所需的相关信息,就省去了你自己去考虑所有可能的显示情况（包括现有的或者将来新的设备）.
  • 例如,一部手机可以选择使一段标记了标题的文字以粗体显示.而掌上电脑可能会以比较大的字体来显示.无论哪种方式一旦你对文本标记为标题,您就可以确信读取设备将根据其自身的条件来合适地显示页面.
• 4. 搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重.
  • 5. 你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记.因此,如果页面文件的标题被标记,而不是,那么这个页面在搜索结果的位置可能会比较靠后.除了提升易用性外,语义标记有利于正确使用CSS和JavaScript,因为其本身提供了许多“钩钩”来应用页面的样式与行为.SEO主要还是靠你网站的内容和外部链接的。
• 6. 便于团队开发和维护

• W3C给我们定了一个很好的标准，在团队中大家都遵循这个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发。

CSS3

响应式布局

• 媒体查询

• 百分比

  • %单位是依赖于元素的祖先元素。

• rem

  • rem与em区别

    • rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。
    • 作用：利用rem可以实现简单的响应式布局，可以利用html元素中字体的大小与屏幕间的比值设置font-size的值实现当屏幕分辨率变化时让元素也变化，以前的天猫tmall就使用这种办法
    • em是文本相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸(默认16px)。(相对父元素的字体大小倍数)
    • em（font size of the element）是指相对于父元素的字体大小的单位。它与rem之间其实很相似，区别在。（相对是的HTML元素的字体大，默认16px）
    • em与rem的重要区别： 它们计算的规则一个是依赖父元素另一个是依赖根元素计算

  • 通过 rem 单位来实现适配，需要内嵌一段脚本去动态计算根元素大小。

• vw/vh

  • 使用纯CSS视口单位来自行自适应，虽然现在的兼容性还没法完全能够接受

  • 依赖于视口的尺寸，根据视口尺寸的百分比来定义的

    • vw : 1vw 等于视口宽度的1%
    • vh : 1vh 等于视口高度的1%
    • vmin : 选取 vw 和 vh 中最小的那个
    • vmax : 选取 vw 和 vh 中最大的那个

出现css阻塞地方

• 1. 当css后面跟着嵌入的js时，该css就会出现阻塞后面资源下载的情况，而当把嵌入JS放到css前面就不会出现阻塞。
• 2. 根本原因是浏览器会维持html中css与js的顺序，样式表必须在嵌入的js执行前先加载解析完。但嵌入的js会阻塞后面资源的下载，所以就会出现上面CSS阻塞下载的情况。

优化css性能

• • 减少首次有效绘制时间，只将渲染首屏内容的关键css内联到HTML中（Github上有一个项目Critical CSS可确定哪些内容是首屏关键样式），但内联css不会进行缓存，每次需重新下载。
• • 剩下的css由外部异步加载导入并启动缓存。异步加载方式：
  • • 使用js动态动态创建样式表link并插入到DOM中
  • • 将link元素的media属性设置为用户浏览器不匹配的媒体类型。因为对浏览器来说，如果样式表不适合当前媒体类型，其优先级会被放低，会在不阻塞页面渲染情况下再进行下载，但在文件加载完成后将media的值设为screen或all <link rel="stylesheet" href="mystyle.css" media="noexist" onload="this.media='all'">
• • 文件压缩，只会去除无用的空格。
• • 去除无用的css。编写代码时，尽量提取公共类，减少重复。
• • 有选择的使用选择器
  • 保持简单，不要嵌套过多过于复杂的选择器。
  • • 通配符和属性选择器效率最低，需要匹配的元素最多，尽量避免使用。

• 减少重排和重绘

  • • 触发重排：font-size、font-family、元素内外边距，通过js改变css类，通过js获取DOM元素位置的相关属性、css伪类激活，滚动滚动条或改变窗口大小。 优先使用flex弹性布局。
  • • 触发重绘：改变元素的外观（如color，background，visibility等属性）

css预处理

• • css预处理器是一种专门的编程语言，用来为css增加一些变成特性（css本身不是编程语言）不需要考虑浏览器兼容问题，因为css预处理器最终编译和输出的仍是标准的css样式。
• • 可在css预处理器中使用变量，简单逻辑判断，函数等基本编程技巧。有合理的样式复用机制。
• less，sass

浮动的原理和工作方式

• • 浮动元素是脱离文档流的，不占据空间。浮动元素碰到包含他的元素的边框或其他浮动元素的边框会停下来。
• • 引发问题：
  • • 父元素的高度无法撑开，影响与父元素同级的元素。
  • • 与浮动元素同级的非浮动元素紧跟其后。
  • • 若非第一个元素浮动，则该元素之前的元素也需要紧跟其后，否则会影响页面的显示的结构。

• 清除浮动：

  • • 在所有浮动标签后面使用空标签清除浮动，定义css clear：both；弊端是增加无意义的标签。
  • • 给浮动元素的父标签添加css属性，overflow：auto；
  • • 非IE浏览器者使用伪元素清除浮动，不过要设置伪对象height：0；否则该元素高度要比实际高出若干像素。

link与@import区别

• • link是HTML标签无兼容问题，页面被加载时，link会同时被加载。
• • @import由css提供，但只在IE5以上才能识别，且引用的css会等到页面被加载完再加载。

absolute与fixed区别

• 共同点：

  • 1. 改变行内元素的呈现方式，display被置为inline-block；
  • 2. 让元素脱离普通流，不占据空间；
  • 3. 默认会覆盖到非定位元素上。

• 不同点：

  • 1. absolute的根元素是可以设置的，而fixed的根元素固定为浏览器。
  • 2. 当你滚动网页时，fixed元素与浏览器窗口之间的距离是不变的。

src与href区别

• src用于替换当前元素，href用于在当前文档和引用资源间确立联系。
• src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在的位置，请求src资源时会将其指向的资源下载并应用到文档中。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也是如此，类似于将所指资源嵌入当前标签内，这也是为啥要将js脚本放在底部而不是头部。
• href指向网络资源所在的位置，建立和当前元素之间的链接，如果我们在文档中添加<link href="common.css" rel="stylesheet" />，那浏览器就会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css而不是使用@import方式。

bootstrap

JS

js继承及对象共享

• 1.利用原型来继承,通过增加一个空的函数来避免原型链上的对象共享
• 1.利用原型来继承,通过增加一个空的函数来避免原型链上的对象共享

  var a = {name：“小明”}；
      var b = cloneObj(a);
       function cloneObj(obj){
              var f = function(){};
              f.prototype = obj;
              return new f();
      }

2.使用extend，多用于插件封装

示例：

Var item={name:”olive”,age:23};

Var item1={name:”Momo”,sex:”gril”};

Var result=$.extend({},item,item1);

结果：

Result={name:”Momo”,age:23,sex:”gril”};

js阻塞

• why

  • • 所有浏览器在下载JS时会阻塞一切其他活动，比如资源的下载，内容的呈现等等。直到JS下载，解析，执行完才开始继续并行下载其他资源并呈现内容。为了提高用户体验，新一代浏览器都支持并行下载JS，但是JS下载仍会阻塞其他资源的下载，如图片或css文件。
  • • 由于浏览器为了防止JS修改DOM树，需要重新构建DOM树的情况，所以就会阻塞其他的下载和呈现。
  • • 同时嵌入的脚本会阻塞所有内容的呈现，而由外引入的脚本只会阻塞其后内容的呈现，2种方式都会阻塞其后资源的下载，但是外部引入的脚本可将引入标签写在页面最后就可避免此种情况。

• how to do

  • 嵌入脚本

    • 1. 放在底部，虽然放在底部照样会阻塞所有呈现，但不会阻塞资源下载。
    • 2. 如果嵌入JS放在head中，请把嵌入JS放在CSS头部。
    • 3. 使用 defer（只支持IE）
    • 4. 不要在嵌入的JS中调用运行时间较长的函数，如果一定要用，可以用 setTimeout 来调用
  • 1. 将脚本放在底部。还是放在head中，用以保证在js加载前，能加载出正常显示的页面。