阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      阿里巴巴 前端工程师面试题

      阿里巴巴2017秋招前端笔试题

      下面的 JSX 代码中,哪一个无法达到预期的效果?

      正确答案: C

      <h2>Hello World</h2>
      <input type=”checkbox”/>
      <div class=”msg-box”>{msg}</div>
      <label htmlFor=”name”>Leo</label>
      <div style={{height: 50}}></div>
      <img src={imgSrc}/>
      

      正则表达式 /a+(bab)?(caac)*/ ,下列选项中是该正则表达式的子集是?

      正确答案: C

      /(bab)(caca)/
      /a(bab){2}(caac)*/
      /a{2}/
      /a+(bab){0,1}(ca)+(ca)/
      /a(^bab)+(caac){1,}/
      /a+(babc){2,}(acc){1,}/
      

      下列说法错误的是:

      正确答案: C

      在Blink和WebKit的浏览器中,某个元素具有3D或透视变换(perspective transform)的CSS属性,会让浏览器创建单独的图层。
      
      我们平常会使用left和top属性来修改元素的位置,但left和top会触发重布局,取而代之的更好方法是使用translate,这个不会触发重布局。
      
      移动端要想动画性能流畅,应该使用3D硬件加速,因此最好给页面中的元素尽量添加translate3d或者translateZ(0)来触发3D硬件加速。
      
      解决浏览器渲染的性能问题时,首要目标就是要避免层的重绘和重排。
      

      将数组 var a=[1,2,3] 变成数组 [4,3,2,1] 下面的方式正确的是?

      正确答案: A C

       a.reverse().unshift(4)
       a.push(4).reverse()
       a.push(4); a.reverse()
       a.splice(3,1,4).reverse()
      

      目前 HTTP2 协议已经逐渐普及到日常服务器中,以下对于 HTTP2 协议描述正确的是:

      正确答案: A B C D

      所有http请求都建立在一个TCP请求上,实现多路复用
      可以给请求添加优先级
      服务器主动推送 server push
      HTTP2的头部会减小,从而减少流量传输
      

      请问下面哪种方式可以在不改变原来数组的情况下,拷贝出数组 b ,且满足 b!=a 。

      例如数组 a[1,2,3]

      正确答案: B D

      let b=a;
      let b=a.slice();
      let b=a.splice(0,0);
      let b=a.concat();
      

      以下代码,分别给节点 #box 增加如下样式,问节点 #box 距离 body 的上边距是多少?

      <body style=”margin:0;padding:0”>
          <div id=”box” style=”top:10px;margin:20px 10px;”>
          </div>
      </body>
      
      如果设置 position: static ; 则上边距为____ px
      如果设置 position: relative ; 则上边距为____ px
      如果设置 position: absolute ; 则上边距为____ px
      如果设置 position: sticky ; 则滚动起来上边距为____ px
      

      position: static,元素处于正常的文档流中,会忽略left、top、right、bottom和z-index属性,只有margin:20px 10px好使,margin-top为20px,所以上边距为20px

      position: relative ; 元素设置相对于原本位置的定位,margin-top的20px加上top的10ox为30px

      position: absolute 同上,只不过这个定位是脱离文档流的

      position: sticky 元素未滚动,在当前可视区域他的top值不生效,只有margin生效,滚动起来后margin 失效,top值生效

      我们需要实现动态加载一个 JavaScript 资源,但是有几处不知道如何处理,需要您的帮助完成这一项工作

      var script = document.createElement(“script”);
      var head = document.getElementsByTagName(“head”)[0];
      script.type = “text/javascript”;
      script.src = “//i.alicdn.com/resource.js”;
      // 绑定资源加载成功事件
      
      script.aaa = function( ){
          // 判断资源加载状态是否为加载成功或加载完成
          if(bbb.test (script.ccc  )  ) {
              script.onreadystatechange = null;
              . . . .
          }
      };
      // 绑定资源加载失败事件
      script.ddd = function( ) {
          . . . .
      };
      head.insertBefore (script , head.firstChild)
      

      参考答案

      (1) onreadystatechange
      (2) /^(loaded|complete)$/
      (3) readyState
      (4) onerror
      

      请使用两种不同的CSS方法(要求dom结构不同)实现下图所示的条形图。

      从左到右的条形分别记为A,B,C,D,E。A的高度为30%,颜色为#f00;B的高度为80%,颜色为#ddd;C的高度为70%,颜色为#0fd;D的高度为60%,颜色为#ff0;E的高度为90%,颜色为#234,每个条形之间的距离可以任意设置(可以考虑使用CSS3新属性来实现)。

      https://www.nowcoder.com/test/question/done?tid=39075211&qid=50532#summary

      请实现方法 parse ,作用如下:

      var object = {
       b: { c: 4 }, d: [{ e: 5 }, { e: 6 }]
      };
      console.log( parse(object, ‘b.c’) == 4 ) //true
      console.log( parse(object, ‘d[0].e’) == 5 ) //true
      console.log( parse(object, ‘d.0.e’) == 5 ) //true
      console.log( parse(object, ‘d[1].e’) == 6 ) //true
      console.log( parse(object, ‘d.1.e’) == 6 ) //true
      console.log( parse(object, ‘f’) == ‘undefined’ ) //true
      
      function parse(obj, str) {
          str.replace('[', '.').replace(']', '').split('.').map((ele) => obj = obj[ele.trim()]);
          return obj || 'undefined';
      }
      

      请问何为混合应用 (Hybrid APP) ,与原生 Native 应用相比它的优劣势。

      Hybrid APP 是 Native APP 上结合使用了 Web View (Native APP 的模块或称组件,用来加载Web资源),采用了Web 技术的 APP,本质上属于原生应用(APP外壳)。

      • 优势:
        • 兼容性良好,“一次开发,多处运行”,能够减少原生APP开发在多平台带来的问题
        • 代码移植性高
        • 开发者社区活跃,能够及时应用最新适合的Web技术来解决问题,提高用户体验
        • APP更加轻便,内容更新方便,部分更新不用从 APP Store 下载
      • 劣势:
        • 性能:相对不如 Native APP 性能良好、体验流畅
        • Web技术在APP中操作权限有限,需要APP同步支持

      阿里巴巴 前端工程师面试题

      其它面试题

      https://www.nowcoder.com/test/86369/summary

      目录
      目录