整理下我在面试的时候所遇到的一些问题,想到哪里就更新到哪里.(ps:不定期更新~)
Q1.请说出css选择器ul>li+li表示的含义,并写出选择前5个li
表示选择除了第一个li的所有li
ul>li:not(:nth-of-type(n+5))
Q2.请说出html5的常用标签,分别应用于什么情景
header(页眉),footer(页尾),nav(导航),article(独立的文章内容),section(章节,对页面的内容进行分块,模块),aside(侧边栏,广告),hgroup(标题或标语的组合),address(地址),menu(菜单)
Q3. 请说下CSS3里transitions, transforms和animation的区别
Transitions作用:平滑的改变CSS的值.无论是点击事件，焦点事件，还是鼠标hover，只要值改变了，就是平滑的，就是动画 eg: transition: background-color 0.3s ease;
transitions属性: transition-property ://指定过渡的性质，比如transition-property:backgrond 就是指backgound参与这个过渡 transition-duration://指定这个过渡的持续时间
transition-delay: //延迟过渡时间
transition-timing-function:*//指定过渡类型，有ease(越来越慢) | linear(匀速运动) | ease-in(先慢后快) | ease-out (先快后慢)| ease-in-out(先慢后快再慢) | cubic-bezier(贝塞尔曲线)
transform 变换，使用过photoshop的人应该知道里面的Ctrl+T自由变换。transform就是指的这个东西，拉伸(skew deg)，压缩(scale %)，旋转(rotate deg)，偏移(translate px) eg:.trans_skew { transform: skew(35deg); }
animation 动画 @keyframes name{不同时间段样式规则 0-100%} ,animation:名字, 播放时间,效果,开始时间
Q4. 行内元素,块状元素,都有哪些?
行内元素:a,abbr,b,br,em,font,i,img,input,s,select,span,strong,sub,sup,tr,u,textarea
块状元素:address,div,center,dl,form,h1-h6,hr,menu,ol,p,pre,table,ul
Q5. 说下div的盒模型
标准盒子所占位置：border+padding+margin+width
IE盒子的大小：border+padding+width
IE盒子所占位置：margin+width
标准盒子的大小 ：width
改变盒模型用 box-sizing:border-box/content-box/padding-box
border-box border+padding+width
content-box: width
padding-box:padding+width
Q6. img的格式有哪些,
gif格式 : 支持256种颜色，支持文件背景透明，支持动画 ；一般文件小下载快
jpg格式 : 不支持文件透明，不支持动画效果，有损压缩格式，但图像颜色品质高（精度高），一般用于数码相片。位图（由一个一个像素像素点组成）；一般文件大、下载快
png格式：无损压缩格式.矢量图，支持文件背景透明（png8 - 256色,适合单一颜色的logo icon. png24 - 颜色更丰富,色彩更鲜艳）
gif, svg,webp(谷歌开发的一种旨在加快图片加载速度的图片格式,体积只有jpeg的2/3)
Q7. 垂直居中都有哪些办法
- 利用position 和 负边距(transform:translateY(-50%) )
- display:tabel-cell; vertaical-align:middle
- display:flex; justify-content:center; aligin-items:center
- line-height ,height
Q8, 用css写出: 2个div并列并且全屏,已知左侧固定宽度,右边自适应宽度,有几种解决办法
- 父级display:flex, 子级:flex:200px;flex:1
- 第一个div左侧定位,第二个div padding-left:200px;
- float:left; 第二个div float:left; width:calc(100%-200px)
- 最外层div display:table.border-collapse:separate(边框独立) 中间层div display: table-row, 最里面的div display:table-cell (让div以单元格显示)
Q9. xhtml html 和 xml 的区别
HTML，超文本标记语言，是语法较为松散的、不严格的Web语言；
XML，可扩展标记语言，主要用于存储数据和结构，可扩展；
XHTML，可扩展超文本标记语言，基于XML，作用与HTML类似，但语法更严格。
Q10.谈下你对表现与数据分离的看法
注意标签的使用,多用语义化的标签,结构清晰,表现应该由CSS来控制，结构应该由html来控制,javascript控制数据填充 . 数据的获取与数据的显示分离
Q11.谈谈你是如何对css 和 js 进行优化的
- 减少http请求, 把多个JS请求合并为一个JS请求，把多个CSS请求合并为一个CSS请求。从而减少从客户端向服务器端的请求数。
- 压缩组件,不使用@import,会影响文件加载速度
- 将样式表放在顶部 ,将脚本放在底部,
- 移除重复脚本与css,正确使用css样式
- 遵守盒模型规则
Q12. href 和 src 的区别
href 表示超文本引用,在link 和 a等元素上使用,是引用.
src 表示 来源地址,在 img,script,iframe 等元素上使用,是引入,
Q13.css都有哪些选择器?
基础: (通用选择器) E(标签选择器) .(class) #(id)
组合: E,F //同时匹配 , E F //后代选择器 , E>F //匹配所有E的子元素F , E+F //匹配所有紧随E元素之后的同级元素F , E~F //匹配任何在E元素之后的同级F元素
属性选择器 :
E[att] //匹配所有具有att属性的E元素
E[att="val"] //匹配所有具有val属性的E元素
E[att~="val"] //匹配所有att属性具有多个空格分隔的值,其中一个值等于val
E[att|="val"] //匹配所有att属性具有多个连字号分隔符的值,其中一个值以val 开头的E元素
E[attr^="val"] //以val开头的元素
E[att$="val"] //以val 结尾的元素
E[att="val"] //包含val的元素
伪类 E:first-child //第一个子元素 , E:focus //获取当前焦点 , E:lang(c) //匹配属性等于c的
伪元素: E:first-line //第一行 , E:first-letter //第一个字母 , E:before //之前生成的 , E:after //之后生成的
与用户界面相关的伪类E:enabled //匹配表单中激活的元素 , E:disabled //匹配禁用的元素 , E:checked //被选中的元素 , E:selection //当前选中的元素
结构伪类 E:root //匹配文档的根元素 , E:nth-child(n) //第n个 , E:nth-last-child(n) //匹配倒数第n个 , E:nth-of-type(n) //同类标签 , E:only-child //仅有的一个子元素 , E:empty //不包含任何子元素的元素 , E:only-of-type //使用同一个标签的唯一一个子元素 , E:not(s) //匹配不符合当前选择器的任何元素 , E:target //匹配文档中特定id点击后的效果
Q14. display:none与visibility:hidden的区别是什么？
display : 隐藏对应的元素但不挤占该元素原来的空间。HTML元素（对象）的宽度、高度等各种属性值都将“丢失”
visibility: 隐藏对应的元素并且挤占该元素原来的空间。HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。
Q15. sass.less 的区别
动态的样式语言，是CSS预处理器,CSS上的一种抽象层。他们是一种特殊的语法/语言而编译成CSS。
变量符不一样，less是@，而Sass是$;
Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持;
Sass是基于Ruby的，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出Css到浏览器
Q16. js操作数组有哪些方法
方法: 转换方法: toLocaleString(),toString(),valueOf()
添加 ,arr.push(val) // 将val 追加到数组的最后一项,length自动加1 ,
arr.join(',') //将数组中的各项以逗号拼接成一个字符串返回
arr.unshift(val) // 个或多个新元素添加到数组的开始,数组中的元素自动后移
删除 : arr.pop() //删除数组中的最后一项,length自动减1. arr.shift() //移除最前一个元素,病返回该元素的值,
操作数组 arr.concat(ar1,ar2,...arn) //将arr1数组与arr数组合并成一个新的数组返回,原数组不变
位置.indexOf() //从数组的开头向后查找, lastIndexOf() 从数组的末尾开始向前查找
arr.slice() //基于当前数组中的一或多个项创建的一个新数组(一个参数时,返回从该参数指定位置开始到当前数组末尾的所有项,2个参数时,返回起始和结束位置之间的项,但不包括结束位置的项)
arr.splice() //a 删除,可以删除任意数量的项,需指定两个参数,即(要删除的第一项的位置,要删除的项数) b 插入,(起始位置,要删除的个数,要插入的项) c 替换 (起始位置,要删除的个数,要插入的数量)
Q17.数组去重怎么写
var arr=[3,3,3,4,4,true,false,'3', '22'];
function noRepeat(arr){
var resArr = [] ;
var obj = {};
for(var i=0; i< arr.length; i++){
if(!(obj[arr] ){
resArr.push(arr[i]);
obj[ arr[i] + typeof arr[i] ] =1;
}
}
return resArr;
}
var res = noRepeat(arr);
Q18.字符串去掉前后空格怎么写?
string.prototype.trim = function(){
var reg = /^\s + |\s+S/g;
return this.replace(reg,'');
}
Q19. 一个数组如{abcdefg} 如何变成 {ab_cd_efg}
var str= str+'';
for(var i=1; i<re(str).length,i++){
tmp += re(res)[i-1];
if(i%2 ==0 && i!re(str).length)
{ tmp+='_'}
}
Q20.ajax是什么? ajax的交互模型?
ajax全称是asychronous javascript and xml，可以说是已有技术的组合，主要用来实现客户端与服务器端的异步通信效果，实现页面的局部刷新.
基于web标准（standards-basedpresentation）XHTML+CSS的表示；
使用 DOM（DocumentObject Model）进行动态显示及交互；
使用 XML 和 XSLT 进行数据交换及相关操作；
使用 XMLHttpRequest 进行异步数据查询、检索；
使用 JavaScript将所有的东西绑定在一起。
ajax的交互模型: 同步 阻塞的 浏览器向服务器请求数据，服务器比较忙，浏览器一直等着（页面白屏），直到服务器返回数据，浏览器才能显示 (整个页面都刷新)
异步 非阻塞的 浏览器向服务器请求数据，服务器比较忙，浏览器可以自如的干原来的事情（显示页面），服务器返回数据的时候通知浏览器一声，浏览器把返回的数据再渲染到页面，只刷新ajax部分
Q21. ajax跨域的方法
Q23. json 和 jsonp的区别
json 是一种轻量级的数据交互格式,可读性强
jsonp 是用来解决跨域获取数据的一种解决方案ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。
Q24. 什么是闭包,什么是作用域
function(){} 和 fn(), fn函数在执行的时候会产生一个封闭的作用域, 这个封闭的作用域就是闭包.能够读取其他函数内部变量的函数。
;(function(){})(); 是闭包的一种应用.好处是避免变量冲突,
缺点:如果闭包中有引用类型的数据被占用,那么闭包无法释放,占用内存.
作用域:指对某一变量和方法具有访问权限的代码空间
Q25.cookie的机制有哪两种
1关闭浏览器消失,2,定时
Q26.session 和 cookie的区别
cookie机制采用的是在客户端保持状态的方案， 数据存放在客户的浏览器上, 单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。其他信息如果需要保留，可以放在COOKIE中
session机制采用的是在服务器端保持状态的方案。数据存放在服务器上, 更安全些,将登陆信息等重要信息存放为SESSION
Q27. 希望获取到页面中所有的checkbox,用js怎么实现?
var oput = document.getElementsByTagName('input');
var len = oput.length;
var checkBoxList =[];
for(var i=0; i<len; i++){
if(oput[i].type == 'checkbox'){
checkBoxList.push(oput[i]);
}
}
alert(checkBoxList.length);
Q28. 将字符串"<tr><td>{$id}</td><td>{$name}</td></tr>" 中的{$id}体会成10,{$name}替换成tony,(请使用正则表达式)
'<tr><td>{$id}</td><td>{$name}</td></tr>'.replace(/{$id}/g,'10').replace(/{$name}/g,'tony');
Q29. 原声js的window.onload 和 jquery的$(document).ready(function(){}) 有什么不同?
window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
Q30. innerHTML 和 innerText 的区别
ans: innerHTML 设置或获取位于对象起始和结束标签内的 HTML
outerHTML 设置或获取对象及其内容的 HTML 形式
innerText 设置或获取位于对象起始和结束标签内的文本
outerText 设置(包括标签)或获取(不包括标签)对象的文本
Q31.输出今天的日期，以YYYY-MM-DD的方式
function convertDate(date, formate) {
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const hour = date.getHours();
const minute = date.getMinutes();
const second = date.getSeconds();
return formate
.replace(/Y+/, year)
.replace(/M+/, month)
.replace(/D+/, day)
.replace(/h+/, hour)
.replace(/m+/, minute)
.replace(/s+/, second);
}
调用：convertDate(this.state.time,'yyyy-mm-did')
Q32. 给你一个数组，找出最大值和最小值的位置
Math.max.apply(null,str)
Math.min.apply(null,str)
Q33. js中typeof返回的类型有哪些？
string,null,undefined,object,Boolean, number
Q34. 事件绑定和普通绑定的区别？
普通绑定的方法不支持添加多个事件，最下面的事件会覆盖上面的，而事件绑定（addEventListener）方式添加事件可以添加多个。
Q35. 列举3种强制类型转换和2种隐式类型转换
强制类型转换 : toString() , Number() , JSON.parse() , parseInt()
隐式类型转换 !!abc , +ture
Q36. 如何阻止事件冒泡和默认事件
e.stopPropagation();
e.preventDefault();
e.nativeEvent.stopImmediatePropagation();
Q37. 添加 删除 替换 插入节点的方法
添加: appendChild 删除: removeChild 替换:replaceChild 插入:insertBefore
Q38. IE和DOM事件流的区别
IE是冒泡流，DOM事件流是捕获流,
Q39. ajax请求的时候post和get的区别
1.get请求需注意缓存问题,post请求不需担心这个问题
2.post请求必须设置Content-Type值为application/x-form-www-urlencoded
3.发送请求时,因为get请求的参数都在url里,所以send函数发送的参数为null,而post请求在使用send方法时,却需赋予其参数
Q40.如何添加html元素的事件,有几种方法?
通过HTML元素属性, 通过对象属性, 通过W3C监听方式（标准方式）或者IE专属的中间模型添加事件
Q41. 写一个获取非行间样式的函数
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
};
};
Q42. js 斐波那契数列实现
function fib(n){
if(n==1||n==2){
return 1;
}
return fbnq(n-1)+fbnq(n-2);
}
Q43. js如何实现面向对象中的继承实现?
Q44. split（）和join（）的区别
join 将数组中所有原有元素按照某个字符连接成一个字符串。把数组拼接为字符串。
split 将一个字符串按照某个字符拆分为数组。将字符串按某个字符或者其他分割。返回数组
Q45. 解释jsonp的原理，以及为什么不是真正的ajax
动态创建script标签,回调函数
ajax是页面无刷新请求数据操作
Q46. ajax请求时，如何解释json数据
使用eval parse鉴于安全性考虑,使用parse更靠谱
Q47. prototype 和_proto_的关系
对象有属性_proto_ , 指向该对象的构造函数的原型对象。 创建这个对象的函数 隐式原型
prototype指向该方法的原型对象。显式原型
Q48. setTimeout()和setInterval()方法的区别
setTimeout(表达式,延时时间)在执行时,是在载入后延迟指定时间后,去执行一次表达式,记住,次数是一次
setInterval(表达式,交互时间)则不一样,它从载入后,每隔指定的时间就执行一次表达式
Q49.call和apply的区别
obj.call(this,obj1,obj2,obj3)
obj.apply(this,arguments)
Q50. "==" 和"==="的区别
== 会自动转换类型, === 不会,恒等
Q51.清除浮动的几种方式
1.使用空标签清除浮动,clear:both (能清除任何标签,增加无意义的标签)
- 使用after伪元素,(用于非ie)
杂七杂八的问题
Q1.谈谈你对node.js 的理解
node 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理器 npm，是全球最大的开源库生态系统
Q2.谈谈你对vue.js 的理解
vue 渐进式JavaScript框架,易用,灵活(简单小巧的核心,渐进式技术栈,),高效(16kbmin+gzip的运行大小,超快虚拟DOM,最省心的优化)
Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Q3. 谈谈你对SEO的理解
Meta标签优化 主要包括主题（Title)，网站描述(Description)，和关键词（Keywords）
Q4.http常见的状态码有那些？分别代表是什么意思？
200 - 请求成功
301 - 资源（网页等）被永久转移到其它URL
400 - 客户端请求有语法错误
403 - 服务器收到请求,但是拒绝提供服务
404 - 请求的资源（网页等）不存在
500 - 内部服务器发生不可预期的错误
503 - 服务器当前不能处理客户端请求
Q5. 模块开发怎么做?
ans: 模块化开发模式：浏览器端requirejs，seajs；服务器端nodejs；ES6模块化；fis、webpack等前端整体模块化解决方案；grunt、gulp等前端工作流的使用
