✅前端题整理...
第1题
DOM中，给父节点添加子节点的正确方法为
- A.appendChild(parentNode,newNode)
- B.append(parentNode,newNode)
- C.parentNode.append(newNode)
- D.parentNode.appendChild(newNode)
答案：D
解析：append方法是jquery中的，原生js中没有这个方法的，故在DOM中选D选项更好。 jQuery中append() 方法指在被选元素的结尾（仍然在内部）插入指定内容。在js中，是appendChild() 方法，追加新元素作为父的最后一个子，还可以使用 insertBefore() 方法。（出自w3school）
第2题
<style type="text/css">
.area {
height:100px;
}
.box{
transition:height 1s
background:#000
}
</style>
<div class="area">
<div class="box"></div>
</div>
<script>
document.querySelector('.area').addEventListener('click',()=>{
document.querySelector('.box').style.height='100px'
})
</script>
点击area，box高度的表现是？
- A.高度保持100不变
- B.高度保持0不变
- C.高度从0渐变为100
- D.高度从0瞬变为100
答案：D
解析：因为box原来没有高度，所以transition的过渡效果并不生效，故选D。transition的过渡效果生效的必然是有初始值和结束值。
第3题
下列哪项不属于DOM查找节点的属性
- A.parentObj.firstChild
- B.parentObj.children
- C.neborNode.previousSibling
- D.neborNode.siblings
答案：D
解析：A选项是获取parentObj的第一个子节点；B选项是返回所有子节点，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点；C选项是得到neborNode的上一个兄弟节点；D是返回兄弟姐妹节点，不分前后。jQuery的siblings()方法，表示返回被选元素的所有同级元素。同级元素是共享相同父元素的元素。该方法沿着 DOM 元素的同级元素向前和向后遍历，若需要确定向前或向后的范围，可以用prev() 或 next()。
第4题（多选）
随着web应用程序规模的增长，一个React应用的状态模型会逐渐变得复杂，这时候通常我们会引入一些状态管理工具（如redux）来解决这个问题，关于状态管理工具描述正确的有哪些？
- A.解决了React应用组件之间的状态共享问题
- B.事件旅行让应用状态的变化可追溯
- C.Redux中所有的状态都是只读的，每一个action只会产生新的状态
- D.事件总线（EventBus）能代替Redux的所有功能
答案：ABC
解析：EventBus可以代替Android传统的Intent,Handler,Broadcast或接口函数,在Fragment,Activity,Service线程之间传递数据，执行方法，但是并非代替Redux 的所有功能
第5题
关于<input type="text" />change事件和input事件描述准确的是？
- A.用户输入内容改变时，会触发input，change事件
- B.用户输入内容改变时，会触发change事件
- C.用户输入内容改变时，触发input事件，且在当标签失焦后，触发change事件
- D.用户输入内容改变时，触发change事件，且在当标签失焦后，触发input事件
答案：C
解析：change事件在input失去焦点才会考虑触发，它的缺点是无法实时响应，故选C。 input事件： 在输入框输入的时候会实时响应并触发；change事件：在输入框失去焦点，并且输入框的值发生变化的时候才会触发。
第6题
执行以下代码，正确的输出结果是：
let obj1={
a:1,
foo:()=>{
console.log(this.a)
}
}
//log1
obj1.foo()
const obj2 = obj1.foo
//log2
obj2()
- A.log1:undefinedlog2:undefined
- B.log1:log2:undefined
- C.log1:log2:1
- D.log1:undefinedlog2:1
答案：A
解析：箭头函数没有this 则箭头函数里的上下为obj的上下文 则是windows 所以输出为undefine，故选A。 箭头函数的this指向问题，本身没有，会向外面一层找，是windows。
第7题
下面对于服务端渲染和客户端渲染描述正确的是
- A.通过vue-cli，create-react-app等工具创建的项目是服务端渲染的
- B.服务端渲染的用户体验一定优于客户端渲染
- C.服务端渲染对SEO更加友好，而且首屏渲染通常更快一些
- D.SPA是客户端渲染的
答案：CD
解析：server-side-render就是让服务器渲染页面。1️⃣优点是：与传统的SPA（单页应用程序）相比，服务器渲染（SSR）的优势主要在于：1️-更好的SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。2️-更快的内容到达时间，特别是对于缓慢的网络情况或运行缓慢的设备，首屏响应时间变短。2️⃣缺点：开发条件所限。浏览器特定的代码，只能在某些生命周期钩子函数中使用，一些外部扩展库（external library）可能需要特殊处理，才能在服务器渲染应用程序中运行。涉及构建设施和部署的更多需求。与可以部署在任何静态文件服务器上的完全静态文件的server更加大量占用CPU资源（CPU-intensive-CPU密集），因此如果你预料在高流量环境（high traffic）下使用，请准备相应的服务器负载，并明确地采用缓存策略。 通过vue-cli，create-react-app等工具创建的项目是客户端渲染。Vue.js是一个构建客户端应用的框架。
客户端渲染：页面的渲染工作由浏览器生成，服务器提供数据；=>可以快速给用户展示内容，可以按需展示。
服务端渲染：页面渲染工作和数据由服务器完成，浏览器直接展示整个页面。=>直接展示一整个页面，若数据太大还可能会有暂时的空白。
第8题（多选）
Vue是目前最流行的mvvm框架之一，关于其组件化的描述，正确的有哪些?
-
A.在 created 函数里面可以获取到父组件的 dom 实例
-
B.使用 props 可以实现父子组件通讯，通过事件可实现子父组件通讯
-
C.组件注册可以全局注册和局部注册
-
D.组合 props 和 input 事件可实现 v-model 的双向绑定
答案：BCD
解析：vue的created钩子函数不能获取到dom元素可以在mounted里面进行获取dom元素如果要用created的话，需要匹配使用nextTick或setTimout，详情见此。
第9题（多选）
带有target="_ blank " 的a标签被认为是有安全风险的，因为点击它后打开的新标签页面可以通过window.opener.location=来将来源页面跳转到钓鱼页面，不过给该a标签增加下面哪些属性就能阻止这一行为？
- A.rel="nofollow"
- B.rel="noopener"
- C.rel="noreferrer"
- D.rel="opener"
答案：BC
解析：a 标签常用rel属性：
rel='external'
此属性的意思是告诉搜索引擎，这个链接不是本站链接，其实作用相当于target='_ blank'。
为什么要这样写呢？因为有些网站因为是采用严格的DOCTYPE声名的，如果你在网页源码中的第一行看到：在这种情况下target="_ blank"会失效，因此采用rel='external'这个参数来替代。
rel='nofllow' 它是告诉搜索引擎，不要将该链接计入权重。因此多数情况下，我们可以将一些不想传递权重的链接进行nofllow处理；例如一些非本站的链接，不想传递权重，但是又需要加在页面中的像 统计代码、备案号链接、供用户查询的链接等等。
rel="noopener noreferrer"
在新打开的页面（baidu）中可以通过 window.opener获取到源页面的部分控制权， 即使新打开的页面是跨域的也照样可以（例如 location 就不存在跨域问题）
在chrome 49+，Opera 36+，打开添加了rel=noopener的链接， window.opener 会为null。在老的浏览器中，可以使用 rel=noreferrer 禁用HTTP头部的Referer属性，使用下面JavaScript代替target='_ blank' 的解决此问题
