Interview(XCJ)

面试题

• 
  
• 1.box-sizing属性有几个值，分别代表什么？
  
  • content-box ：在宽度和高度之外绘制元素的内边距和边框
  • border-box：为元素设定的宽度和高度决定了元素的边框盒
  • inherit：规定应从父元素box-sizing属性的值

• 2.举例说明几个css可以继承与不可以继承的属性？

• 可继承
  
  • 1.文本属性
  • 2.盒子模型的属性（宽高，边框，边距）
  • 3.背景属性（background系列）
  • 4.定位属性（float、clear、position等）
  • 5.生成内容属性（content、counter-reset、counter-increament
  • 6.轮廓样式属性（outline系列）
  • 7.页面样式属性（size）
• 不可继承
  
  • 字体系列属性
  • 文本系列属性
  • 元素可见性
  • 表格布局属性
  • 列表布局属性
  • 生成内容属性

• 3.position的值，relative和absolute分别是相对于谁定位的？

• 4.null和undefined的区别
• 5.ajax请求的时候，get和post区别有哪些？
• 6.使用ajax如何控制请求的异步与同步
  
  • async:true异步
    

    ajax发送请求后，在等待server端返回的这个过程中，后台会继续执行ajax块后面的脚本，知道server返回正确的结果才会去执行success，也就是说这时执行的是两个线程（ajax块发出请求后是一个线程，ajax块后面的脚本是一个线程）

• $.ajax({
      type:'POST',
      url:"",
      dataType:"",
      success:function(result){
          f1();
          f2();
      }
      failure:function(result){
          alert('Failed')
      }
  })
  function2()
  //ajax发出请求后，将停留在function1，等server端的返回，但同时（在这个等待的过程中）前台会去执行function（）

  - async:false同步
  

  ajax块发出请求后，会等待在function1的地方，知道function1执行完成才会执行function2

  • 7.举例写几个jQuery关于dom阶段的操作命令（https://www.processon.com/mindmap/58caa8c0e4b0d15a7562475d）
    
    • 1.text()设置货返回元素的文本内容
    • 2.html()设置或返回元素内容包括HTML标签
    • 3.val（）设置货返回表单字段的值
    • 4.attr（）获取属性值
    • 5.append（）末尾插入
    • 6.appendTo（）元素位置转移
    • 7.prepend（）开头插入
    • 8.after（）在选择元素之后插入
    • 9.before（）在选择元素之前插入
  • 8.简述本地存储
    
    • 实现用户浏览器对数据的本地存储
    • HTML5之前，应用程序数据只能存储在cookie中，包括每个服务器请求。本地存储更为安全，可在不影响网站性能的前提下将大量数据存储与本地
    • 本地存储经由起源地（origin）（经由域和协议），所有页面，从起源地能够存储和访问相同的数据

  • 9.说明浏览器的渲染过程（https://zhuanlan.zhihu.com/p/29418126）

    • 关键渲染路径（Critical Reandering Path）是指与当前用户操作有关的内容。
    • 浏览器渲染页面的过程
      
      • 1.DNS查询
      • 2.TCP连接
      • 3.HTTP请求即响应
      • 4.服务器响应
      • 5.客户端渲染（渲染书构建，布局及绘制）
        
        • （1）处理HTML标记并构建DOM树
        • （2）处理css标记并构建CSSOM树
        • （3）将DOM与CSSOM合并成一个渲染树
        • （4）根据渲染树来布局，以计算每个节点的几何信息
        • （5）将各个节点绘制到屏幕上

  • 10.常见的浏览器兼容问题有哪些？

  • 11.IE与Mozilla的事件机制有什么区别？
  • 12.ES5和ES6中的继承有什么区别，怎么实现的？
    
    • es5（原型链继承–》逐级查找）
  • 13.举例说几个sass与less的区别
  • 14.简单说明你对typescript的了解
  • 15.简述webpack的原理与作用
  • 16.angular、react、vue常用的功能有哪些
  • 17.代码托管工具，日常用到的命令
  • 18.常用的PC端与移动端第三方UI框架有哪些
  • 19.通过前端技术如何实现网页加载速度？
  • 20.如何控制文件是否需要HTML缓存，简述HTML缓存的原理
  • 21.关于网站安全性，前端开发有哪些需要考虑的问题
  • 22.要统计每个http请求从服务器返回的时间，简单描述实现思路

  面试官问题

  • 1.怎么和后台数据交互，怎么处理从后台来的数据
  • 2.原生和jQuery操作dom的方法
  • 3.浏览器渲染页面
  • 4.HTML、css、js的加载顺序
  • 5.原生方面的浏览器兼容（IE8及以上不同版本）
  • 6.if注释是兼容IE几？哪方面的?
  • 7.上拉加载下拉刷新一会使用插件还是自己写？
  • 8.react的生命周期有几个？

  • 9.在循环里使用定时器需要注意什么？

    • 一定要保存当前的i的值再做处理，否则，你拿到的i的值会是for循环里最大的那个

      js代码由上自下读取，读取到i满足if语句的时候并不是停止了，还会继续做循环判断，而此时if语句里面是个延时器，党延时器时间结束要调用aa函数的时候，for循环已经结束，而此时的i变为10

    • 解决方法

    var j = null;  
        for (var i = 0; i < 10; i++) {  
            if(i == 5){  
                j = i;  
                setTimeout(aa,2000);  
                function aa(){  
                    console.log( "i="+j);  
                }  
            }  
        }  

  • 10.es6的新特性，es6的promise，怎么在promise中让之后的代码不执行(主动阻塞）

    • 新特性
      
      • 默认参数（可以将默认值直接放在函数签名中）
      • 模板表达式（var name=Your name is ${first} ${last}）
      • 多行字符串
      • 拆包表达式(var {house,mouse}=$(“body”).data() 在数组中也能用 )
      • 改进的对象表达式
      • 箭头函数
      • Promise
      • 块级作用域let和const
      • 类
      • 模块化

    • 抛出错误后停止promise

      //思路：发生无法继续的错误后，直接返回一个始终不resolve也不reject的Promise，即这个Promise永远处于pending状态，那么后面的Promise链就会一直等着既不执行了
      Promise.stop=function(){
         return new Promise(function(){})
      }
      doSth()
      .then(value=>{
        if(sthBigErrotOccured()){
           return Promise.stop()
        }
        //normal logic
      })
      .catch(reson=>{  //will never get called
      //normal logic
      })
      .then()
      .catch(res=>{  //will nerver  get called
            //normal logic
      })
      .then()
      .catch(res=>{  //wil nerver get called
             //normal logic
       })
       //优点：
       几乎不用改变现有代码；兼容性好；不管使用哪个Promise库，甚至不同的Promise之间相互调用，都支持
       //缺点：
       会造成内存泄漏

  • 11.说说你了解的面向对象？继承有几种方式
  • 12.面向对象中的this指针问题
  • 13.bind,apply,call的区别
    
    • call 参数与方法中的对应
    • apply 第二个参数是数组，与方法中的对应
    • bind返回的仍然是个函数，可以在调用的时候再进行传参
  • 14.CSS3的动画，实行动画的方式，transform中的scale有什么方法能让它放大不变回去
  • 15.redux，不用redux的话自己定义的本地数据存放在那？store里的数据是公用的吗？组件之间如何进行数据交互如何传值的？
  • 16.jQuery的动画
  • 17.react的组价通信有几种方式？react怎么
  • 18.es6是怎么进行编译的
  • 19.webpack需要配置什么
  • 20.es6相对于es5新增了哪些东西？
  • 21.react会用到class（类）吗？class的继承是通过什么继承的？super需要传什么参数吗？
  • 22.常见的网站攻击，XSS攻击的原理是什么？
  • 23.js怎么进行逻辑处理
  • 24.git创建分支有几种方式？常用的git命令。
  • 25.递归和定时器哪个处理逻辑更方便