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>

要点
一、column-count 把div中的文本分为多少列
二、column-width 规定列宽
三、column-gap 规定列间隙
四、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。
element1和 element2这两种元素必须具备相同的父元素，但 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这个页面能够访问吗？