1.px、em、rem、%、vw、vh、vm这些单位的区别
传统的项目开发中，我们只会用到px、%、em这几个单位，从css3开始，浏览器对逻辑单位的支持又提升到了另外一个境界，增加了rem、vh、vw、vm等一些新的长度单位，我们可以利用这些新的单位开发出比较良好的响应式页面，随之覆盖多种不同分辨率的终端，包括移动设备等。
2. 移动端布局有哪些？
固定布局；流体布局；flex布局（www.jianshu.com/p/a1ba5a050…）；
栅格布局；
flex 布局
dispaly：flex
flex-direction: row/column/row-reverse/column-recerse
justify-content: center/flex-start……
……
3. 说说移动端和PC端的区别
第一： PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是android手机还是ios手机，一般浏览器使用的都是webkit内核，所以说做移动端开发，更多考虑的应该是手机分辨率的适配，和不同操作系统的略微差异化。
第二： 在部分事件的处理上，移动端多出来的事件是触屏事件，而缺少的是hover事件。 另外包括移动端弹出的手机键盘的处理，这样的问题在PC端都是遇不到的
第三：在移动端有很多网页是可以横屏看也可以竖屏看，并且很多屏幕的饿分辨率都是不一样的，所以只要牵涉到移动端都要考虑用响应式布局
第四： 在动画处理上，PC端由于要考虑IE的兼容性，所以通常使用JS做动画的通用性会更好一些，但是CSS3做了很大的牺牲， 而在手机端，如果要做一些动画、特效等，第一选择是CSS3， 既简单、效率又高。
第五：Pc端的交互是鼠标，键盘的交互而移动端变成了触摸，手势的交互
4. 说一下ES6，promise和async的区别
promise：所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果
常用的异步编程模式：
- 回调函数
即f1,f2两个函数，f2要等待f1执行结果后执行，即 f1(f2) - 事件驱动的方式
f1.on('done', f2); （JQ写法，f1完成时，trigger("done")则执行f2） - 发布-订阅 模式
- Promise对象实现
es6.ruanyifeng.com/#docs/promi…
async：
www.ruanyifeng.com/blog/2015/0…
5. 浏览器缓存都有哪些？
对于一个数据请求来说，可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求，或者发起了请求但后端存储的数据和前端一致，那么就没有必要再将数据回传回来，这样就减少了响应数据。
6. 组件化开发思想
7. dom 中绑定事件和自定义事件
8，判断一个字符串中出现次数最多的字符，统计这个次数。
<script type="text/javascript">
// 找出字符串中 出现最多的 字符
// 方法： 将字符串，转换成一个对象，对象的属性就是字符，属性值就是该字符出现的次数
var str = 'wlxeraadfddwerqqqijijiiiiowoiiii1237669'
var obj = {};
// 每个字符出现次数
for (let i = 0; i < str.length; i++) {
var key = str[i];
typeof obj[key] === 'undefined' ? obj[key] = 1 : obj[key]++
}
var max = -1;
var max_key = key;
// 排序
for (let key in obj) {
if (max < obj[key]) {
max = obj[key];
max_key = key;
}
}
document.write("字符:" + max_key + ",出现次数最多为:" + max + "次")
</script>
9.请编写一个JavaScript函数parseQueryString，他的用途是把URL 参数 解析为一个对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
function parseQueryString(url) {
var result = {};
var arr = url.split("?"); // split将字符串分割成字符串数组
console.log(arr);
if (arr.length <= 1) {
return result;
} else {
arr = arr[1].split("&");
arr.forEach(item => {
let a = item.split('=')
result[a[0]] = a[1]
})
return result;
}
}
var url = "http://witmax.cn/index.php?name=zjl&sex='男'&key2=2";
var ps = parseQueryString(url);
console.log(ps)
</script>
</body>
</html>
10. 请写一个JS使用固定在页面的右下角。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.tit {
position: absolute;
width: 100px;
height: 100px;
background: orange;
}
</style>
</head>
<body>
<div id="box" class="tit"></div>
<script>
window.onscroll = window.onresize = window.onload = () => {
var getDiv = document.getElementById('box');
//document.documentElement.scrollTop 滚动条的位置
// document.body.scrollTop 表示被卷去的高
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
// 屏幕（浏览器）的 宽度 减去 div本身的宽度
getDiv.style.left = document.documentElement.clientWidth - getDiv.offsetWidth + 'px';
// ……
getDiv.style.top = document.documentElement.clientHeight - getDiv.offsetHeight + scrollTop + 'px';
}
</script>
</body>
</html>
11. [操作所有标签] 例：请实现，鼠标移到页面中的任意标签，显示出这个标签的基本矩形轮廓。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.tit {
display: block;
width: 100px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div id="box" class="tit">div</div>
<p class="tit">p</p>
<a class="tit" href="www.baidu.com" alt="www.baidu.com">a</a>
<div id="" class="tit">
</div>
<script>
function mouseBorder(t) {
var c = t.childNodes
for (let i = 0; i < c.length; i++) {
var d = c[i];
if (d.nodeType == 1) { // 如果d是元素
d.onmouseover = function () {
this.style.border = '1px solid red'
}
d.onmouseout = function () {
this.style.border = ''
}
}
else{
mouseBorder(d);
}
}
}
mouseBorder(document.body);
</script>
</body>
</html>
12. 跨域 和 前端跨域解决方案
跨域解决方案
1、 通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域资源共享（CORS）
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域
13. 异步加载 js
默认情况javascript是同步加载的，也就是javascript的加载时阻塞的，后面的元素要等待javascript加载完毕后才能进行再加载，对于一些意义不是很大的javascript，如果放在页头会导致加载很慢的话，是会严重影响用户体验的。
1\. defer，只支持IE
defer属性的定义和用法（我摘自w3school网站）
defer 属性规定是否对脚本执行进行延迟，直到页面加载为止。
有的 javascript 脚本 document.write 方法来创建当前的文档内容，其他脚本就不一定是了。
如果您的脚本不会改变文档的内容，可将 defer 属性加入到
2\. async：
async的定义和用法(是HTML5的属性)
async 属性规定一旦脚本可用，则会异步执行。
示例：
复制代码 代码如下:
注释：async 属性仅适用于外部脚本（只有在使用 src 属性时）。
注释：有多种执行外部脚本的方法：
•如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）
•如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行
•如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本
3\. 创建script，插入到DOM中，加载完毕后callBack，见代码：
复制代码 代码如下:
function loadScript(url, callback){
var script = document.createElement_x("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others: Firefox, Safari, Chrome, and Opera
script.onload = function(){
callback();
};
}
script.src = url;
document.body.appendChild(script);
}
