字节跳动前端实习面经

前景知识

viewport是什么

viewport 是用户网页的可视区域。
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

HTTPS是什么

HTTPS即加密的HTTP，HTTPS并不是一个新协议，而是HTTP+SSL（TLS）。原本HTTP先和TCP（假定传输层是TCP协议）直接通信，而加了SSL后，就变成HTTP先和SSL通信，再由SSL和TCP通信，相当于SSL被嵌在了HTTP和TCP之间

共享密钥加密（对称密钥加密）

加密和解密同用一个密钥。加密时就必须将密钥传送给对方。

公开密钥加密（非对称密钥加密）

公开密钥加密使用一对非对称的密钥。一把叫做私有密钥，一把叫做公开密钥。私有密钥不能让其他任何人知道，而公开密钥则可以随意发布，任何人都可以获得。使用此加密方式，发送密文的一方使用公开密钥进行加密处理，对方收到被加密的信息后，再使用自己的私有密钥进行解密。利用这种方式，不需要发送用来解密的私有密钥，也不必担心密钥被攻击者窃听盗走。

同步和异步

同步：在一定程度上可以看做是单线程，这个线程请求一个方法后就待这个方法给他回复，否则他不往下执行
异步：在一定程度上可以看做是多线程的，请求一个方法后，就不管了，继续执行其他的方法

DNS

即域名系统，万维网上作为域名和IP地址相互映射的一个分布式数据库，能够使用户用户更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。

问题汇总

html/css基础部分

viewport各个属性值的意义
width：控制 viewport 的宽度
height：控制 viewport 的高度
initial-scale：初始缩放比例
maximum-scale：允许用户缩放到的最大比例
minimum-scale：允许用户缩放到的最小比例
user-scalable：用户是否可以手动缩放
设计弹出层的具体过程
基础css水平居中

(1) 将元素display为内联元素，利用 text-align: center; 实现将其在块级元素内部居中
(2) 若块级元素为固定宽度，则可以通过 margin: 0 auto; 使其水平居中
(3) 利用弹性布局，display: flex; 实现水平居中，其中 justify-content: center;

基础css垂直居中

(1) 单行内容的垂直居中
给容器设置相等的height和line-height
(2) 多行内容的垂直居中，且容器高度可变
设置上下的padding值相同
(3) 把容器当作表格单元
display: table-cell;
vertical-align: middle;

// 块级元素垂直居中
.parent{position: relative;
}.child{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);
}// flex布局垂直居中
.parent{display: flex;justify-content: center;align-items: center;
}

透明度问题
五星好评点几颗星亮几颗，用css
position 有哪些属性及其区别
文本溢出的时候显示省略号
CSS有哪些选择器

标签选择器
类选择器
ID选择器
全局选择器
组合选择器
继承选择器
伪类选择器

兼容性问题总结

(1) HTML对象获取问题
FireFox：document.getElementById("idName")
ie:document.idname或者document.getElementById("idName")
解决办法：统一使用document.getElementById("idName")
(2) const问题
Firefox下,可以使用const关键字或var关键字来定义常量
IE下,只能使用var关键字来定义常量
解决方法：统一使用var关键字来定义常量
(3) event.x与event.y问题
IE下,event对象有x,y属性,但是没有pageX,pageY属性
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性
解决方法：使用mX(mX  =   event.x   ?   event.x  :   event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX

js 部分

如何实现不用viewport控制用户不能缩放
用js监听屏幕宽度，让页面宽度和屏幕宽度保证一个恒定的比例。
为什么会有点透现象
js 实现查询字符串中出现最多次数的字符

var str = "zhaochucichu";
var o = {};
// 用对象的属性来统计每一字符的频数
for (var i = 0, length = str.length; i < length; i++) {// charAt() 方法可返回指定位置的字符var char = str.charAt(i);if (o[char]) {o[char]++;} else {o[char] = 1;}
}
console.log(o);
// 找到频数最高的值
var max = 0;
for (var key in o) {if (max < o[key]) {max = o[key];}
}
// 找到频数最高值对应的字符及其频数
for (var key in o) {if (o[key] == max) {console.log("最多的字符是" + key);console.log("出现的次数是" + max);}
}

关于js请求需要时间的问题
闭包问题
对象深拷贝

function copy (obj) {var newobj = {};for (var i in obj) {if (typeof obj[i] == "object") {newobj[i] = copy(obj[i]);} else {newobj[i] = obj[i];}}return newobj;
}

事件循环机制
http://www.cnblogs.com/yqx0605xi/p/9267827.html
https://www.cnblogs.com/cangqinglang/p/8967268.html
什么是web worker
Web Workers 使得一个Web应用程序可以在与主执行线程分离的后台线程中运行一个脚本操作。这样做的好处是可以在一个单独的线程中执行费时的处理任务，从而允许主（通常是UI）线程运行而不被阻塞/放慢。
浏览器中JS和UI公用一个线程，JS计算过程中，不能响应UI；如果遇到计算量比较大的任务，如操作图像像素时，会造成用户行为得不到响应。Web Worker 是为了解决 JavaScript 在浏览器环境中没有多线程的问题。
正则表达式的使用

var  reg=new RegExp('abc','gi');
// 或者 var  reg=/abc/gi;
// 第一个参数是正则的内容，第二个参数是修饰符，修饰符通常有三种 i,g,m
// i表示忽略大小写进行匹配
// g表示全局匹配，匹配到第一个后不停止匹配
// m表示多行匹配，遇到换行不停止匹配
// 一些常用的方法，test方法，测试是否与正则匹配

跨域的方法
只要协议、域名、端口有任何一个不同，都被当作是不同的域
js跨域是指通过js在不同的域之间进行数据传输或通信

1. 通过jsonp跨域
jsonp在页面上引入不同域上的js脚本文件实现请求不同域上的数据
(1) 通过script标签引入一个js文件
(2) js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入
注：需要服务器端的页面进行相应的配合
2. 通过修改document.domain来跨子域
3. 使用window.name来进行跨域
window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。

详细讲解：https://www.cnblogs.com/2050/p/3191744.html

ajax请求
jquery的ajax写法
https://www.cnblogs.com/GarfieldTom/p/4277708.html
原生js的ajax写法
https://www.cnblogs.com/cythia/p/6978323.html
分别介绍ES6的Class与ES5的对象继承以及它们的区别
数组去重

Array.prototype.unique = function() {var newArray = [];var obj = {};for (var i = 0; i < this.length; i++) {if (!obj[this[i]]) {newArray.push(this[i]);obj[this[i]] = 1;}}return newArray;
}ES6实现
let newArray = [...new Set(arr)];

不声明任何额外变量实现Array的map
介绍Promise和AsyncFunction
Promise 对象用于表示一个异步操作的最终状态（完成或失败），以及其返回的值。

// Promise
var promise1 = new Promise(function(resolve, reject) {setTimeout(function() {resolve('foo');}, 300);
});promise1.then(function(value) {console.log(value);// expected output: "foo"
});

AsyncFunction 构造函数用来创建新的异步函数对象，JavaScript 中每个异步函数都是 AsyncFunction 的对象。
异步函数是指通过事件循环异步执行的函数，它会通过一个隐式的 Promise 返回其结果。

==的比较规则
字符串数组的倒序

var reverseString = function(s) {var start = 0, end = s.length - 1;// 先转化为数组再进行反转var ret = s.split('');while (start < end) {var tmp = ret[start];ret[start++] = ret[end];ret[end--] = tmp;}return ret.join('');
};

js中，this的指向是什么？
定义：this的指向是包含它的函数作为方法被调用时所属的对象。
如何修改this的指向

(1)使用局部变量来代替this指针
(2)使用call或apply方法
call 普通传参
function say(arg1,arg2){console.log(this.name,arg1,arg2);
};
var obj = {name : 'tom',say : function(){console.log(this.name);}
}
say.call(obj,'one','two');//tom one twoapply 以数组的形式传参
function say(arg1,arg2){console.log(this.name,arg1,arg2);
};
var obj = {name : 'tom',say : function(){console.log(this.name);}
}
say.apply(obj,['one','two']);//tom one two

实现简易的模板函数

//简易模版函数
function template(tmpl, data) {var result = tmpl;for(var key in data){//console.log(`key ${key} data${data[key]}`)result = result.replace(new RegExp(key, 'g'), data[key]);}console.log(result);
}
template('我的名字是(name)，我的工作是(work)', {name: 'xxx',work: 'yy'
});