09.26 腾讯校招前端一面经历

时间:2019-11-11
本文章向大家介绍09.26 腾讯校招前端一面经历,主要包括09.26 腾讯校招前端一面经历使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

1. 自我介绍

2. 对前端的理解

3. 为什么li中间会出现空隙

li{
    display: inline-block;
    background: red;
    width: 300px;
    height: 100px;
}
<div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
     </ul>
</div>
浏览器会把inline元素间的空白字符(空格、换行、Tab等)渲染成一个空格。而为了美观。我们通常是一个<li>放在一行,这导致<li>换行后产生换行字符,它变成一个空格,占用了一个字符的宽度。
解决:
方法一:为<li>设置float: left。不足:有些容器是不能设置浮动,如左右切换的焦点图等。
方法二:将所有<li>写在同一行。不足:代码不美观。
方法三:将<ul>内的字符尺寸直接设为0,即font-size: 0。不足:<ul>中的其他字符尺寸也被设为0,需要额外重新设定其他字符尺寸,且在Safari浏览器依然会出现空白间隔。
方法四:消除<ul>的字符间隔letter-spacing: -8px,而这也设置了<li>内的字符间隔,因此需要将<li>内的字符间隔设为默认letter-spacing: normal

4. 实现图片瀑布流(自适应多列)

在以前是需要用到js与css才可以顺利完成一个图片瀑布流的实现,现在有了CCS3之后就可以只用CSS样式实现完美的自适应多列图片瀑布流
<div></div>

要点
1、column-count 把div中的文本分为多少列
2、column-width 规定列宽
3、column-gap 规定列间隙
4、break-inside: avoid; 避免元素内部断行并产生新列
注意: Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。

        /*瀑布流层*/
        .waterfall {
            -moz-column-count: 4;
            /* Firefox */
            -webkit-column-count: 4;
            /* Safari 和 Chrome */
            column-count: 4;
            -moz-column-gap: 1em;
            -webkit-column-gap: 1em;
            column-gap: 1em;
        }

        /*一个内容层*/
        .item {
            padding: 1em;
            margin: 0 0 1em 0;
            -moz-page-break-inside: avoid;a
            -webkit-column-break-inside: avoid;
            break-inside: avoid;
            border: 1px solid #000;
        }

扩展
CSS3多列属性
  • column-count 一行需要分割多少列
  • column-gap 每一列的列距
  • column-rule-style 列边框样式
  • column-rule-width 列边框宽度
  • column-rule-color 列边框颜色
  • column-rule column-rule-* 所有属性的简写。 如:column-rule: 1px solid #ccc(与border使用相似)
  • column-span 指定元素跨越多少列
  • column-width 指定列的宽度

5. css选择器选择一个表格中第二行第二列的td

可以直接使用CSS3中的:nth-child(n)选择器。
:nth-child(n) 选择器匹配父元素中的第 n 个子元素,元素类型没有限制。n 可以是一个数字,一个关键字,或者一个公式。
table tbody tr:nth-child(2) td:nth-child(2){
    background: red;
}

6. 从一个表格中第二行第二列的td开始之后的所有的td

我当时提出的是使用排除法,只要第二行第二列,也就是排除第一行第一列,所以就可以直接使用:not()排除就可以了。不过当需要排除的行列更多时,这个方法明显不行,因此可以用第二种方法,CSS3中的~选择器。
<div></div>
~选择器
element1~element2 选择器匹配出现在 element1 后面的 element2
element1element2这两种元素必须具有相同的父元素,但 element2不必紧跟在 element1的后面。
//可以修改第几行第几列,即为第n+1行第n+1列  这里的n为1
tr:nth-child(n)~tr>td:nth-child(n)~td {
    background: red;
}

7. 做移动端有没有遇到兼容性的问题

8. 处理过canvas?

9. canvas跨域

10. canvas贝塞尔曲线

11. 点击事件的生命周期?

经典问题,具体参考javaScript事件流

12. 委托点击事件对象的target与currentTarget是谁?

事件委托:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。
通俗来讲就是把多个相同的子元素的点击事件绑定到父元素上,利用时间冒泡的原理,点击子元素最终都会冒泡到父元素,因此只把事件绑定在父元素判断是哪个子元素被点击就可以了。
<div></div>
举个栗子
子节点实现相同的功能:
//  实现功能是点击li,弹出123:
<ul id="ul1">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>

// 传统的方法 需要通过循环对多个li进行时间绑定
window.onload = function(){
    var oUl = document.getElementById("ul1");
    var aLi = oUl.getElementsByTagName('li');
    for(var i=0;i<aLi.length;i++){
        aLi[i].onclick = function(){
            alert(123);
        }
    }
}

//  事件委托的方式
//  Event对象提供了一个属性叫target,可以返回事件的目标节点,我们成为事件源,也就是说,target就可以表示为当前的事件操作的dom,但是不是真正操作dom,当然,这个是有兼容性的,标准浏览器用ev.target,IE浏览器用event.srcElement  
window.onload = function(){
              var oUl = document.getElementById("ul1");
              oUl.onclick = function(ev){
                    var ev = ev || window.event;
                       var target = ev.target || ev.srcElement;
                    if(target.nodeName.toLowerCase() == 'li'){
                            alert(123);
                 alert(target.innerHTML);
                    }
              }
}
target:触发事件的某个具体对象,只会出现在事件流的目标阶段(谁触发谁命中,所以肯定是目标阶段)
currentTarget:绑定事件的对象,恒等于this,可能出现在事件流的任意一个阶段中

13. 对vue的掌握

14. 父组件与子组件的通信

也是一个经典问题,参考Vue.js 父子组件及非父子组件间实现通信

15. 如果是爷孙通信?假如是跨多层组件通信?

有多种方法解决

  1. 使用一个空的 Vue 实例作为中央事件总线
  2. 使用Vuex
  3. 使用localStorage和SessionStorage

16. localStorage与cookies区别?

相同点:都可以作为浏览器存储,且都不能进行跨域访问;
不同点:

  1. cookie始终会在同源 http 请求头中携带(即使不需要),在浏览器和服务器间来回传递
  2. localStorage 不会自动把数据发给服务器,仅在本地保存;
  3. localStorage 存储大小比cookie大得多,可以达到5M或更大;
  4. localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;
  5. cookie 设置的cookie过期时间之前一直有效,与浏览器是否关闭无关。

17. localStorage跨域问题?cookies跨域问题?

18. www.baidu.com/m/index.html ; m.baidu.com/n/index.html m设置了一个cookies,n这个页面可以访问吗?

原文地址:https://www.cnblogs.com/jlfw/p/11834257.html