今天十道笔试，一个小时，然后面试五题。
1.CSS中可以继承的属性。
- font-size、font-family、color、cursor、list-style。
2.画两条直角边距均为16px，背景色为#dadada的直角三角形。（可参考技术，HTML，css,svg）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>画直角三角形</title> <style> .triangle { width: 0px; height: 0px; border-width: 16px; border-style: solid; border-color: transparent #dadada #dadada transparent; } </style> </head> <body> <div class="triangle"> </div> </body> </html>
3.如何实现元素的垂直居中？（请尽可能写出多种方法）
- 单行文本垂直居中，设置line-height的值等于height的值
.way1 { 100%; height: 300px; line-height: 300px; background-color: aquamarine;//方便观察效果 }
2.已知块级子元素高度，使用绝对定位和top实现垂直居中（生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位）
.container { 100%; height: 300px; position: relative; background-color:blueviolet; } .way2 { height: 150px; position: absolute; top: 50%; /* 父元素高度的50% */ margin-top: -75px; /* 自身高度的一半 */ background-color: aquamarine; }
3.未知高度的块级父子元素居中，模拟表格布局
- 缺点：IE67不兼容，父级 overflow：hidden 失效
.fatherBox {
display: table;
height: 200px;
background-color: brown;
}
.way3 {
display: table-cell;
vertical-align: middle;
background-color: chocolate;
}
4.新增 inline-block 兄弟元素，设置 vertical-align
- 缺点：需要增加额外标签，IE67不兼容
-
.container { height: 100%;/*定义父级高度，作为参考*/ } .extra .vertical{ display: inline-block; /*行内块显示*/ vertical-align: middle; /*垂直居中*/ } .extra { height: 100%; /*设置新增元素高度为100%*/ }5.绝对定位配合CSS3位移
-
.div1 {
height: 300px;
position: relative;
background-color: darkgoldenrod;
}
.way5 {
position: absolute;
height: 100px;
top: 50%;/* 父元素的50% */
transform: translateY(-50%);
background-color: crimson;
}
6.CSS弹性盒模型
.coontainer {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background-color: darkgray;
}
4.css中三种隐藏元素的方式：visibility:hidden,display:none和opacity:0的区别？
5.下列代码输出结果是什么？
function node() { this.element = document.createElement('div'); this.textContent = 'content'; this.element.innerHTML = 'innerHTML'; this.element.addEventListener('click',this.func, true); this.element.onelick = this.func.bind(this.element); this.element.addEventListener('click',this.func.call(this)); } node.prototype.render = function () { document.body.appendChild(this.element); } node.prototype.func = function () { console.log(this.textContent); } var obj = new node(); obj.render(); obj.func(); obj.element.click();
6.下列代码控制台的最终输出结果是多少？
var length = 'ih5互动'; var obj = { length:'H5游戏营销领导者', exec: function () { return(function (length) { return function () { console.log(this.length); console.log(length); } })(this.length) } } var exec = obj.exec(); console.log(exec.length); console.log(exec());
7.下列代码控制台的最终输出结果是多少？
try{ oh(); wow(); console.log(oh); console.log(wow); }catch (e){ setTimeout(function () { console.log(wow); console.log(oh); }); } function oh() { console.log('更好玩的H5'); } var wow = function () { console.log('更酷的H5'); } var oh = '疯狂的H5传单'; var wow = '微传单';
8.实现一个函数clone，可以对javascript中的5种主要函数类型（包括Number、String、Object、Array、Boolean）进行值复制。
9.请按提示编写代码，要求代码尽量考虑容错性和安全性。
（1）请实现一个函数，获取当前网页URL，并将其中的查询参数解析成字典对象，比如房钱URL为：http://www.baidu.com/helpCenter.html?a=1&b&c=&d=百度&e=<script>alert(0)</scritp>,则按形式拼成对象{a：“1”，b："", c：“”，d=“百度”,e："<script>alert(0)</script>"}
（2）在实际开发中，列举几个常见的XSS攻击例子并且给出防御方案。
10.请按提示编写代码，要求代码尽量考虑性能。
（1）请实现一个函数，对字符串数组进行去重，尽量使用多种方法，并按性能排序，比如 [‘JS’，‘H5’，‘css’，‘JQ’，‘ES6’，‘JS’]去重为[‘JS’，‘H5’，‘css’，‘JQ’，‘ES6’]。
（2）请实现一个函数，对元素数据类型不确定的数组进行去重，比如[1，2，2，3，[1,2]，[1,2]，[1,3]，[a，1]，{a:1,b:1}，{a:1,b:1}]去重为[1，2，3，[1,2]，[1,3]，[a，1]，{a:1,b:1}]
11.请谈谈你对position的了解。
12.谈谈你对变量提升的理解。
13.给你一个动态生成的无序列表，要实现对列表中的某一对象进行操作绑定，你会使用什么办法？
14.谈谈this对象的理解。
15.描述 cookies、sessionStorage 和 localStorage 的区别？
- 与服务器交互：
- cookie是网站为了标示用户身份而存储在用户本地终端上的数据（通常经过加密）；
- cookie始终会在同源http中携带（即使不需要），在浏览器和服务器之间来回传递；
- sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
- 存储大小：
- cookie数据根据不同浏览器限制，大小一般不超过4K；
- sessionStorage和localStorage虽然也有存储大小限制，但是比cookie大得多，可以达到5M或者更大。
- 有期时间：
- localStorage存储持久数据，浏览器关闭后数据不丢失，除非主动删除；
- sessionStorage在当前浏览器窗口关闭后数据自动删除。
- cookie设置的cookie过期时间前一直有效，与浏览器关闭无关。
4.2
1、请说出三种减少页面加载时间的方法。（加载时间指感知的时间或者实际加载时间）
- 尽量减少重复的http请求数量；
- 压缩javascript、css代码；
- Ajax采用缓存调用；
其他参考：https://blog.csdn.net/gongzhuxiaoxin/article/details/52454213；
2、iframe有那些缺点？如何解决跨域问题？
- 会产生很多页面，不容易管理；
- 不容易打印；
- 浏览器的后退按钮无效；
- 代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化；
- 多数小型的移动设备（PDA 手机）无法完全显示框架，设备兼容性差；
- 多框架的页面会增加服务器的http请求，对于大型网站是不可取的；
解决跨域问题：
- 同一个 origin 下，父页面可以通过 iframe.contentWindow 直接访问 iframe 的全局变量、DOM 树等，iframe 可以也通过 parent/top 对父页面做同样的事情。
- 不同 origin 下，标准的方法是通过 .postMessage() 互相通信，不标准的方法是利用 location.hash 等奇技淫巧。
3、事件是什么？IE与火狐的事件机制有什么区别？ 如何阻止冒泡？
- 事件是指用户在网页中的某些操作；
- IE是事件冒泡，火狐是事件捕获；
- e.stopPropagation阻止冒泡；
4、谈谈This对象的理解。
5、翻转一个字符串 let a =’hello word’
先用split()将字符串转换为字符数组，然后用reverse()颠倒数组中数组,然后使用jion(),将数组字符转换为字符串；
let a = 'hello world'; let b = a.split(""); console.log(b.reverse().join(""));
6、请解释CSS动画和JavaScript动画的优缺点。requestAnimationFrame是什么？ *
7、移动端rem布局 line-height在Android机中渲染相差几px解决办法
8、font，background 简写规则，举例说明