web前端面试题

HTML
• HTML5新增了哪些内容或API，使用过哪些
    Html5 的目的是将互联网内容语义化，更好的为人类和机器阅读，同时更好的支持各种媒体的嵌入。
    新的API：
    •    HTML Geolocation //获取用户的地理位置
    •    HTML Drag and Drop
    •    HTML Local Storage
    •    HTML Application Cache
    •    HTML Web Workers
    •    HTML SSE // server-send events (单向的服务器向客户端推送信息)
    •    HTML Canvas/WebGL
    •    HTML Audio/Video
    新的语义元素：
      section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr。

• input和textarea的区别
   <input type="text" value="入门狗" size="10" Maxlength="15">
   <textarea row="3" col="4">入门狗的博客园</textarea>
   一个单行文本输入，一个多行文本输入。
• 用一个div模拟textarea的实现
   #textarea {
    width:300px;
    border:1px solid #ccc;
    min-height:150px;
    max-height:300px;
    overflow: auto;
    font-size: 14px;
    outline: none;
    }
   <div id="textarea" contenteditable="true"></div>
    
• 移动设备忽略将页面中的数字识别为电话号码的方法
   <meta name=”format-detection” content=”telephone=no” />
-------------------------------------------------------------------
CSS

•    左右布局：左边定宽、右边自适应，不少于3种方法
  .left{float:left}.right{width:100%}
  .wapper{display:flex}.right{flex:1}
  .left{float：left}.right{float:left;width”calu(100vw-200px)}
  .right{margin-left:-100%}

•    CSS3用过哪些新特性

  CSS3 是CSS的升级版本，提供更加丰富且使用的规范：盒子模型，列表模块，超链接方式，语言模块，背景和边框，文字特效，多栏布局等等。
 
  1.新的选择器
    tbody:nth-child(even),tbody:nth-child(odd) //偶数行，奇数行。
    ：not(.textiput) //不是class为textinput的节点
    div:first-child  || last-child //div的第一个节点
  2.新的特性
    @font-face
      用来加载字体样式，而且还能加载服务器的字体样式，让客户端显示没有安装的字体。
    Word-wrap：break-down
    设置文字到大容器边缘是否换行。
    Text-overflow:clip | ellipsis (省略号)
    设置当前行到达容器边缘时如何显示。
    Text-decoration
    {
     Text-fill-color:文字内部填充颜色
     Text-stroke-color:文字边界填充颜色
     Text-stroke-width:文字边界宽度
    }
  3.CSS3多栏布局
    column-count:表示布局几列
    column-rule:表示列与列之间的间隔条样式
    column-gap:表示列与列之间的间隔
  4.边框和颜色
    关于颜色css3已经提供了透明度的支持
    color:rgba(255,0,0,0.75);
    background:rgba(0,0,255,0.75);
    其中a代表透明度。
    还支持hsla(112,72%,33%,0.68)颜色申明方式及其透明度。
    对于border,提供了圆角支持
    border-radius:15px;
  5.css3的渐变效果
    -webkit-gradient();linear,radial
  6.css3的阴影(shadow)和反射(reflect)效果
    text-shadow:
    box-shadow:
    -webkit-box-reflect:below 10px;
  7.背景(background)
    背景的覆盖面
    多图片背景：background:url() 10px center no-repeat,url() 10px center repeat-x;
  8.css3的盒子模型
    display:-webkit-box;
    display:-moz-box;
    -webkit-box-orient:horizontal;
    -moz-box-orient:horizontal;// 实现div的水平排列
    -webkit-box-flex:2 //设置div如何填充剩下的位置
    -moz-box-flex:2
  9.css3的transition，transforms和animation
    transition
      transitopn-property:用于指定过度的性质
      transition-duration：用于指定这个过度持续的时间
      transition-delay:用于指定延迟过度时间
      transition-timing-function:用于指定过度类型
    transforms
      其实就是指拉伸、压缩、旋转、偏移等等一些图形学里的基本变换。
    animation
      让CSS脱离静止的前提。

• BFC、IFC

  FC 定义的是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位以及和其他元素的关系和相互作用。
  IFC(行内格式上下文)
    inline box 水平排列，水平方向上的margin,border和padding在框之间得到保留。
    display：inline | inline-table | inline-block会形成IFC

  BFC(块级格式上下文)
    1.消除浮动
    2.消除文字环绕，实现两栏布局
    3.消除margin合并
  满足以下条件形成BFC
    float不为none，float：left | right
    绝对定位元素，position:absolute | fixed;
    非块级元素具有display:inline-block,table-caption,flex,inline-flex
    块级元素具有overflow,且值 ！= visible

•    对栅格的理解
  bootsrap通过CSS3的媒体查询语句来实现响应式的栅格布局。
  1.布局容器
    .container会利用媒体查询改变页面的宽度。
    .container-fluid没有媒体查询，始终是100%的width,没有左右margin.
    两类容器都有15px的内边距。
  2.栅格系统
    一行最多分为12列，利用float实现流动布局。
    使用%宽度，让内容宽度平滑渐变。
    使用媒体查询
•    （水平）居中有哪些实现方式
    行内元素，text-align:center;
    块级元素，margin：0 auto;

•    1像素边框问题
   设备物理像素可以理解为分辨率；设备独立像素为程序可以处理的像素(1:px)
   如iphone6 的设备独立像素为(375*667)即显示屏的width*height,但是iphone6
   的分辨率为 750*1334，即两个物理像素显示一个独立像素。
   由于retina视网膜屏的设备物理像素/设备独立像素 = 2 或者更大，就会出现
   边框为2的情况。
   只有ios8+才支持0.5px，其余移动系统会显示为0px.
    var dpr, rem, scale;
    var docEl = document.documentElement;
    var fontEl = document.createElement('style');
    var metaEl = document.querySelector('meta[name="viewport"]');

    dpr = window.devicePixelRatio || 1;
    rem = docEl.clientWidth * dpr / 10;
    scale = 1 / dpr;


    // 设置viewport，进行缩放，达到高清效果
    metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');

    // 设置data-dpr属性，留作的css hack之用
    docEl.setAttribute('data-dpr', dpr);

    // 动态写入样式
    docEl.firstElementChild.appendChild(fontEl);
    fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';

    // 给js调用的，某一dpr下rem和px之间的转换函数
    window.rem2px = function(v) {
        v = parseFloat(v);
        return v * rem;
    };
    window.px2rem = function(v) {
        v = parseFloat(v);
        return v / rem;
    };

    window.dpr = dpr;
    window.rem = rem;

-------------------------------------------------------------
Javascript

1.图片懒加载
  图片的延迟加载的原理就是先不设置img的src属性，等合适的时机(比如滚动、
  滑动)再把图片真实的url放到img的src属性上。
  过多的图片会严重影响网页的加载速度，移动网络下的消耗巨大，而且新图片的
  载入会导致页面重绘，延迟加载几乎是标配。
  <1>移动还会涉及到图片元素的宽高比自适应的问题
     <stylt> .lazyload{width:100%;height:0;padding-top:75%;background-size:100%}
     </style>
     当margin/padding取形式为百分比的值时，无论是left/right,还是top/bottom
     都是以父元素的width为参照物。
  <2><img>标签并不会在网页中插入图像，而是从网页中链接图像。
     <img>创建的是被引用图像的占位空间。

  lazysizes
  script src="lazysizes.min.js" async=""></script>

  // 非响应式 例子
  <img data-src="image.jpg" class="lazyload" />
  // 响应式 例子，自动计算合适的图片data-srcset相应加载最适应的图片
  <img
      data-sizes="auto"
      data-src="image2.jpg"
      data-srcset="image1.jpg 300w,
      image2.jpg 600w,
      image3.jpg 900w" class="lazyload" />

2.实现页面加载进度条
  目前没有任何浏览器可以直接获取正在加载对象的大小，所以无法通过数据的小大
  来实现0-100%的显示加载过程。
  解决方案是在页面中设置节点，当加载到设置的节点时显示相应的加载进度。
  <body>
      <div class = 'loading'></div>
      <div id="header">
      页头部分
      </div>
      <script type="text/javascript">
          $('.loading').animate({'width':'33%'},50);  //第一个进度节点
      </script>
      <div id="mainpage">
      左侧内容
      </div>
      <script type="text/javascript">
          $('.loading').animate({'width':'55%'},50);  //第二个进度节点
      </script>
      <div id="sider">
      右边侧栏
      </div>
      <script type="text/javascript">
          $('.loading').animate({'width':'80%'},50);  //第三个进度节点
      </script>
      <div id="footer">
      页脚部分
      </div>
      <script type="text/javascript">
          $('.loading').animate({'width':'100%'},50);  //第四个进度节点
      </script>
  </body>
   .loading{
    background:#FF6100; //设置进度条的颜色
    height:5px; //设置进度条的高度
    position:fixed; //设定进度条跟随屏幕滚动
    top:0; //将进度条固定在页面顶部
    z-index:99999  //提高进度条的优先层级，避免被其他层遮挡
    }

3.事件委托
  事件捕获，与事件冒泡。在父元素响应事件。

4.实现extend函数
  var isObj = function (o) {
            return Object.prototype.toString.call(o) === "[object Object]";
        }
        _$.fn.extend = function (obj) {
            if (isObj(obj)) {
                for (var i in obj) {
                    this[i] = obj[i];
                }

            }
        }

5.为什么会有跨域的问题以及解决方式
  同源策略：允许浏览器某个网页上的js 请求来自另外一个网页的数据，当且仅
            当两个网页来自相同的域。它是出于安全性考虑，为避免XSS跨站点
            脚本攻击和CSRF跨站点请求伪造。
  当一个网页的ajax请求一个不在自身域的数据时，即为跨域请求。
  域：由协议内型，域名，端口号组成，任何一个不同都会形成跨域。
  解决方案：
  1.jsonp
    <script src =''>请求方式可以绕过同源策略，请求的同时将解析函数传过去
    <script type="application/javascript"
      src="http://server.demo.com/Users/1234?callback=parseResponse"></script>
    parseResponse({"Name": "Foo", "Id": 1234, "Rank": 7});  
  2.跨域资源共享(CORS)
    1.简单请求
      浏览器发现ajax是简单的跨域请求，就会自动在头信息之中添加一个Origin
      字段，用来说明本次请求来自哪个域，服务器根据这个值，决定是否同意这次
      请求。如果他服务器同意，则会响应头部添加Access-Control-Allow-Origin
      字段，表示同意跨域请求。
    2.复杂请求
      比简单请求多一个预检查请求。

6.jsonp原理、postMessage原理
  postMessage 用作跨域通信。postMessage实现跨域的话原理就类似于jsonp，动态插入iframe标签，再从iframe里面拿回数据。
  iframe是HTML内联的框架元素，表示嵌套的浏览上下文，有效地将另一个HTML页面
  嵌入到当前页面中。


7.实现拖拽功能，比如把5个兄弟节点中的最后一个节点拖拽到节点1和节点2之间

8.动画：setTimeout何时执行，requestAnimationFrame的优点
  实际上浏览器负责进行排序，指派某段程序在某个时间点运行的优先级。单线程
  强制资源不共享，所以到了某个时间点，还得等当前的程序执行完，所以设置的时间并不精确。
  1)requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,一般来说,这个频率为每秒60帧。2)在隐藏或不可见的元素中requestAnimationFrame不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。

9.手写parseInt的实现：要求简单一些，把字符串型的数字转化为真正的数字即可,但不能使用JS原生的字符串转数字的API，比如Number()

10.编写分页器组件的时候，为了减少服务端查询次数，点击“下一页”怎样能确保还有数据可以加载（请求数据不会为空）？

11.ES6新增了哪些特性，使用过哪些，也有当场看代码说输出结果的
  （1）指定参数的默认值
  （2）模板表达式，在字符串中嵌入变量
  （3）多行字符串
  （4）拆包表达式
  （5）对象表达式
  （6）箭头函数
  （7）promise对象
  （8）块级作用域的let和const
  （9） ES6中的类class
  （10）ES6中的模块化 export，import
  ES6新特性使javascript 更加简洁优雅。

12.JS模块化的实践
   js按<script>标签分块，并且按块加载执行，因此一个在一个js块中引用下一个js块的内容会
   出现错误，但是不同的快都属于一个全局作用域，也就是块与块之间的变量和函数是可以共享的。
      单页应用，指的是在一个页面上集成多种功能，甚至整个系统就只有一个页面，所有的业务功能都是它的子模块，通过特定的方式挂接到主界面上。它是AJAX技术的进一步升华，把AJAX的无刷新机制发挥到极致，因此能造就与桌面程序媲美的流畅用户体验。
      从单页应用的特点来看，它比页面型网站更加依赖于JavaScript，而由于页面的单页化，各种子功能的JavaScript代码聚集到了同一个作用域，所以代码的隔离、模块化变得很重要。
  1.基本对象实现命名空间的划分
    缺点没有私有属性，都可以随意修改该模块。
    var util = {
    _prefix:'我想说：',
    log:function(msg){ console.log(_prefix +msg)}
    /*
    其他工具函数
    */
    }
  2.闭包立即执行函数，实现私有变量和模块化
    缺点：加载次序问题，依赖关系问题。
    var util = (function(window){

    var _prefix = '我想说：';
    return {
        log:function(msg){ console.log(_prefix +msg)}
    }

    })(window)
  3.模块加载器，AMD(Asynchronous Module Definition)require.js，CMD(Common
    Module Definition)sea.js
    CMD（用时会自动加载）
        define(function(require, exports, module){
        var _prefix = '我想说：';
        module.exports = {
            log:function(msg){ console.log(_prefix +msg)}
        }
        })

        ///main.js
        define(function(require, exports, module){
            var util = require('util')
            util.log('我是模块主代码，我加载好了')
        })

        ///index.html
        <html>
        <head>
        <script src="seajs.js"></script>
        </head>
        <body>
        <script type='text/javascript'>
            seajs.use(["main"])
        </script>
        </body>
        </html>
    AMD
        <script src="js/require.js" defer async="true" ></script>
        <script src="js/require.js" data-main="js/main"></script>
        main.js
        require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){

    　　　　// some code here

    　　});
        math.js 定义模块
        define(function (){

    　　　　var add = function (x,y){

    　　　　　　return x+y;

    　　　　};

    　　　　return {

    　　　　　　add: add
    　　　　};

        　　});
            main.js引入模块
            require(['math'], function (math){

        　　　　alert(math.add(1,1));

        　　});
      异同：sea.js是使用时加载，require.js是异步按依赖次序加载。
        
13.require.js的实现原理（如果使用过webpack，进一步会问，两者打包的异同及优缺点）
   目的：
      （1）实现js文件的异步加载，避免网页失去响应；
      （2）管理模块之间的依赖性，便于代码的编写和维护。
    webpack
    对应不同文件类型的资源，webpack有对应的模块 loader ，比如对于 less， 使用的是 less-loader，你可以在这里找到 所有loader. webpack 具有requireJS 和 browserify 的功能，但仍有自己的新特性： 1、对 CommonJS、AMD、ES6的语法做了兼容； 2、对js、css、图片等资源文件都支持打包； 3、串联式模块加载器以及插件机制让其具有更好的灵活性和拓展性，例如对 coffeeScript、ES6的支持； 4、有独立的配置文件 webpack.config.js; 5、可以将代码切割成不同 chunk，实现按需加载，降低了初始化时间； 6、支持 SourceUrls 和 SourceMaps，易于调试； 7、具有强大的 Plugin 接口，大多是内部插件，使用起来比较灵活； 8、webpack 使用异步 IO 并具有多级缓存，使得 webpack 在增量编译上更快！

14.promise的实现原理，进一步会问async、await是否使用过
   promise对象对异步调用流程进行管理。
   1.异步任务返回一个promise对象
   2.使用then方法添加回调函数
      function search(term) {
      var url = 'http://example.com/search?q=' + term;
      var xhr = new XMLHttpRequest();
      var result;

      var p = new Promise(function (resolve, reject) {
      xhr.open('GET', url, true);
      xhr.onload = function (e) {
        if (this.status === 200) {
          result = JSON.parse(this.responseText);
          resolve(result);
        }
      };
      xhr.onerror = function (e) {
        reject(e);
      };
      xhr.send();
      });

      return p;
      }

      search("Hello World").then(console.log, console.error);
    链式调用接收前一个回调函数的返回值。
15.实现gulp的功能

16.使用前端框架（angular/vue/react）带来哪些好处，相对于使用jQuery

17.vue双向数据绑定的实现

18.单页应用，如何实现其路由功能