1.一些开放性题目

1.自我介绍:除了基本个人信息以外,面试官更想听的是你与众不同的地方和你的优势。
2.项目介绍
3.如何看待前端开发?
4.平时是如何学习前端开发的?
5.未来三到五年的规划是怎样的?


    2.position的值, relative和absolute分别是相对于谁进行定位的?

    § absolute :生成绝对定位的元素, 相对于最近一级的 定位不是 static 的父元素来进行定位。
    
    § fixed (老IE不支持)生成绝对定位的元素,通常相对于浏览器窗口或 frame 进行定位。
    
    § relative 生成相对定位的元素,相对于其在普通流中的位置进行定位。
    
    § static 默认值。没有定位,元素出现在正常的流中
    
    § sticky 生成粘性定位的元素,容器的位置根据正常文档流计算得出


      3.如何解决跨域问题

      JSONP:
      
      原理是:动态插入script标签,通过script标签引入一个js文件,这个js文件载入成功后会执行我们在url参数中指定的函数,并且会把我们需要的json数据作为参数传入。
      
      由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源,为了实现跨域请求,可以通过script标签实现跨域请求,然后在服务端输出JSON数据并执行回调函数,从而解决了跨域的数据请求。
      
      优点是兼容性好,简单易用,支持浏览器与服务器双向通信。缺点是只支持GET请求。
      
      JSONP:json+padding(内填充),顾名思义,就是把JSON填充到一个盒子里
      
      <script>
      
          functioncreateJs(sUrl){
      
       
      
              var oScript =document.createElement('script');
      
             oScript.type = 'text/javascript';
      
              oScript.src= sUrl;
      
             document.getElementsByTagName('head')[0].appendChild(oScript);
      
          }
      
       
      
          createJs('jsonp.js');
      
       
      
          box({
      
             'name': 'test'
      
          });
      
       
      
          functionbox(json){
      
             alert(json.name);
      
          }
      
      </script>
      
      CORS:
      
      服务器端对于CORS的支持,主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置,就可以允许Ajax进行跨域的访问。
      
      通过修改document.domain来跨子域
      
      将子域和主域的document.domain设为同一个主域.前提条件:这两个域名必须属于同一个基础域名!而且所用的协议,端口都要一致,否则无法利用document.domain进行跨域
      
      主域相同的使用document.domain
      
      使用window.name来进行跨域
      
      window对象有个name属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的
      
      使用HTML5中新引进的window.postMessage方法来跨域传送数据
      
      还有flash、在服务器上设置代理页面等跨域方式。个人认为window.name的方法既不复杂,也能兼容到几乎所有浏览器,这真是极好的一种跨域方法。


        4.XML和JSON的区别?

        (1).数据体积方面。
        
        JSON相对于XML来讲,数据的体积小,传递的速度更快些。
        
        (2).数据交互方面。
        
        JSON与JavaScript的交互更加方便,更容易解析处理,更好的数据交互。
        
        (3).数据描述方面。
        
        JSON对数据的描述性比XML较差。
        
        (4).传输速度方面。
        
        JSON的速度要远远快于XML


          5.谈谈你对webpack的看法

          WebPack 是一个模块打包工具,你可以使用WebPack管理你的模块依赖,并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的HTML、JavaScript、CSS以及各种静态文件(图片、字体等),让开发过程更加高效。对于不同类型的资源,webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系,最后 生成了优化且合并后的静态资源。
          
          webpack的两大特色:
          
          1.code splitting(可以自动完成)
          
          2.loader 可以处理各种类型的静态文件,并且支持串联操作
          
          webpack 是以commonJS的形式来书写脚本滴,但对 AMD/CMD 的支持也很全面,方便旧项目进行代码迁移。
          
          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 很快且在增量编译上更加快


            6.说说你对作用域链的理解

            作用域链的作用是保证执行环境里有权访问的变量和函数是有序的,作用域链的变量只能向上访问,变量访问到window对象即被终止,作用域链向下访问变量是不被允许的。


              7.创建ajax过程

              (1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.
              
              (2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
              
              (3)设置响应HTTP请求状态变化的函数.
              
              (4)发送HTTP请求.
              
              (5)获取异步调用返回的数据.
              
              (6)使用JavaScript和DOM实现局部刷新.


                8.渐进增强和优雅降级

                渐进增强 :针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
                优雅降级 :一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。


                  9.常见web安全及防护原理

                  sql注入原理
                  就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令。
                  总的来说有以下几点:
                      1.永远不要信任用户的输入,要对用户的输入进行校验,可以通过正则表达式,或限制长度,对单引号和双"-"进行转换等。
                      2.永远不要使用动态拼装SQL,可以使用参数化的SQL或者直接使用存储过程进行数据查询存取。
                      3.永远不要使用管理员权限的数据库连接,为每个应用使用单独的权限有限的数据库连接。
                      4.不要把机密信息明文存放,请加密或者hash掉密码和敏感的信息。
                  
                  XSS原理及防范
                  Xss(cross-site scripting)攻击指的是攻击者往Web页面里插入恶意 html标签或者javascript代码。比如:攻击者在论坛中放一个
                  看似安全的链接,骗取用户点击后,窃取cookie中的用户私密信息;或者攻击者在论坛中加一个恶意表单,
                  当用户提交表单的时候,却把信息传送到攻击者的服务器中,而不是用户原本以为的信任站点。
                  XSS防范方法
                  首先代码里对用户输入的地方和变量都需要仔细检查长度和对”<”,”>”,”;”,”’”等字符做过滤;其次任何内容写到页面之前都必须加以encode,避免不小心把html tag 弄出来。这一个层面做好,至少可以堵住超过一半的XSS 攻击。
                  首先,避免直接在cookie 中泄露用户隐私,例如email、密码等等。
                  其次,通过使cookie 和系统ip 绑定来降低cookie 泄露后的危险。这样攻击者得到的cookie 没有实际价值,不可能拿来重放。
                  如果网站不需要再浏览器端对cookie 进行操作,可以在Set-Cookie 末尾加上HttpOnly 来防止javascript 代码直接获取cookie 。
                  尽量采用POST 而非GET 提交表单
                  XSS与CSRF有什么区别吗?
                  XSS是获取信息,不需要提前知道其他用户页面的代码和数据包。CSRF是代替用户完成指定的动作,需要知道其他用户页面的代码和数据包。
                  要完成一次CSRF攻击,受害者必须依次完成两个步骤:
                  登录受信任网站A,并在本地生成Cookie。
                  在不登出A的情况下,访问危险网站B。
                  CSRF的防御
                  § 服务端的CSRF方式方法很多样,但总的思想都是一致的,就是在客户端页面增加伪随机数。
                  § 通过验证码的方法


                    10.Web Worker 和webSocket

                    worker主线程:
                    
                        1.通过 worker = new Worker( url ) 加载一个JS文件来创建一个worker,同时返回一个worker实例。
                    
                        2.通过worker.postMessage( data) 方法来向worker发送数据。
                    
                        3.绑定worker.onmessage方法来接收worker发送过来的数据。
                    
                        4.可以使用 worker.terminate() 来终止一个worker的执行。
                    
                    WebSocket是Web应用程序的传输协议,它提供了双向的,按序到达的数据流。他是一个Html5协议,WebSocket的连接是持久的,他通过在客户端和服务器之间保持双工连接,服务器的更新可以被及时推送给客户端,而不需要客户端以一定时间间隔去轮询。