2020暑假实习-腾讯TEG前端二面

2020暑假实习-腾讯TEG前端二面

机试部分

一、简答题

1. 常用的浏览器内核:

1. webkit
2. blink
3. gecko
4. trident
5. …

2. 外边距重叠

外边距重叠是指两个连续的元素，它们各自具有的margin会覆盖对方的margin，造成最终显示在浏览器上的效果是只存在较大的margin(不存在外边距重叠的话则会显示为两者的margin之和)

3. CSS3属性

1. opacity
2. transform
3. display: flex
4. border-radius
5. display: grid
6. transition
7. animation
8. …

4. JS变量类型

1. 基本类型：null、undefined、number、string、boolean、symbol
2. 引用类型：object

5. ES6特性

1. let/const
2. 解构赋值
3. 模版字符串
4. Promise
5. Generator
6. Async/Await
7. 模块化import/export
8. Symbol
9. class
10. 箭头函数
11. Proxy
12. Reflect
13. Array的扩展，如：Array.from、Array.of、扩展字符串…

6. 性能优化

1. 减少HTTP请求方面
   1. 使用sprite图
   2. webpack等打包工具
2. 网络连接速度优化
   1. 接入CDN
   2. 使用HTTP 2.0
3. 减少重排/重绘
   1. 离线处理样式
   2. 将样式放到class里进行集中处理
   3. 分离样式的读写操作
   4. 尽可能避免使用table布局
4. 资源压缩
5. 使用事件代理减少内存开销

7. GET和POST的区别

1. get是幂等操作，每次使用get请求得到的结果都是一样的，即它的操作是没有副作用的，因此get请求可以存储为书签，保存在历史记录里；

   post请求是非幂等的，每次使用post请求得到的结果都是不一样的，即它的操作使用副作用的，因此不能存储为书签、保存在历史记录里。

2. get将请求参数以query字符串的方式附着在url之后，是可见的，安全性差，参数长度有限制(实际为浏览器对url长度的限制)；

   post的请求参数保存在请求实体里，不可见，安全性略好一点点，长度大小没有限制。

3. get只能使用ASCII编码，而post没有限制。

4. get只能传递字符串参数，post还能传递二进制文件等其他类型。

5. 个人认为get和post在实质上没有区别，它们本质都是tcp连接，区分它们作用的是当前的规范和后台响应请求的具体实现方式。

8. http返回码

1. 1XX系列 表示信息提示，继续处理请求
   1. 100 Continue 示意客户端继续发送请求
   2. 101 Switching Protocol 示意切换传输协议，多为对Upgrade请求头的回应
2. 2XX系列 表明正确处理请求
   1. 200 Success 表明请求已处理完毕
   2. 204 No Content 表明请求已处理完毕，但没有返回请求实体
   3. 206 Partial Content 表明请求已处理完毕，返回要求范围内的资源
3. 3XX系列 表示重定向
   1. 301 永久性重定向 表明请求的资源已经永久性的移动到另一个位置
   2. 302 Found 暂时性重定向 表明请求的资源暂时被移动到另一个位置
   3. 303 暂时性重定向 表明请求的资源暂时被移动到另一个位置，且应该使用get重新发送请求
   4. 304 Not Modified 对条件请求的回应，多用来表明请求的资源没有发生变动
4. 4XX系列 表示请求发生错误，且错误原因在客户端
   1. 400 Bad Request 表明请求有语法错误
   2. 401 Unauthorized 表明请求需要进行身份认证
   3. 403 Forbidden 禁止访问资源，可能是因为没有通过身份验证
   4. 404 Not Found 表明请求的资源不存在
5. 5XX系列 表示请求发生错误，且错误原因在服务器端
   1. 501 Internal Error 表明服务器在处理请求时内部发生错误
   2. 503 Service Unavailable 表明服务器暂时不可用
   3. 504 Gateway Timeout 表明服务器从上游服务器请求资源超时

二、编程题

1. CSS实现箭头三角形

<div class="arrow">div>

.arrow {
    border: 10px solid;
    border-color: transparent transparent transparent black;
}

2. CSS实现单行文本溢出显示省略号

<p class="text">腾讯是一家以互联网为基础的平台公司， 通过技术丰富互联网用户的生活，助力企业数字化升级。 我们的使命是“用户为本 科技向善”。p>

.text {
  text-overflow: ellipsis;
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
}

3. 输出值

console.log(true === 1)        // false
console.log(true == 1)         // true
console.log(1+2+'3')           // '33'

foo() // 1
var foo
function foo() {
    console.log( 1 )
}
foo = function() {
    console.log( 2 )
}

4. JS获取当前页面URL连接

console.log(window.location.href)

5. JS输出今天的日期

let today = new Date()
let year = today.getFullYear()
let month = today.getMonth() + 1
let day = today.getDate()

month = ('0' + month).slice(-2)
day = ('0' + day).slice(-2)

console.log(year + '-' + month + '-' + day)

6. 字符串转化为数组的方法

function toArray(str) {
    return str.split('')
}

function toArray(str) {
    let result = []
    for (let i = 0; i < str.length; i++) {
        result.push(str.charAt(i))
    }
    return result
}

function toArray(str) {
    let result = []
    for (let c of str) {
        result.push(c)
    }
    return result
}

7. 括号匹配判断(大中小)

var isValid = function(s) {
    let sm = 0, md = 0, lg = 0
    let arr = s.split('')
    
    for (let i = 0; i < arr.length; i++) {
        switch (arr[i]) {
            case '(':
                sm++
                break
            case ')':
                if (sm === 0) return false
                sm--
                break
            case '[':
                if (sm !== 0) return false
                md++
                break
            case ']':
                if (md === 0) return false
                md--
                break
            case '{':
                if (sm !== 0 || md !== 0) return false
                lg++
                break
            case '}':
                if (lg === 0) return false
                lg--
                break
        }
    }
    
    return sm === 0 && md === 0 && lg === 0
}

8. 求和最大的连续子数组

/**
 * @param {number[]} nums
 * @return {number}
 */
var maxSubArray = function(nums) {
    let maxSum
    let curSum = 0

    for (let num of nums) {
        curSum = curSum < 0 ? num : curSum + num
        maxSum = maxSum === undefined ? curSum : Math.max(maxSum, curSum)
    }

    return maxSum
}

面试部分

1. 解释一下机试里的一些题
2. vue组件间的数据传递
3. v-if/v-show的区别
4. 了解vuex吗 (不了解…)
5. 平时如何学习/今后学习前端的计划
6. 为什么选择前端
7. …

形式大概是先给一个word文档，一个小时的时间做一下，然后交流一些项目问题、学习计划之类的。面试官会根据面试者的具体情况来问问题，很赞。