HTML/HTML5
说说你理解的语义化
像html5的新的标签header,footer,section等就是语义化
语义化的好处：
一方面，语义化就是让计算机能够快读的读懂内容，高效的处理信息，可以对搜索引擎更友好
另一方面，便于与他人的协作，他人通过读代码就可以理解你网页标签的意义
去掉或者丢失样式的时候能够让页面呈现出清晰的结构
HTML5的新特性
新的DOCTYPE声明
完全支持css3
video和audio
本地存储localstorage和sessionstorage
语义化标签
canvas
新事件如 ondrag onresize
如何解决ajax无法后退的问题
html5里引入了新的API，即：history.pushState,history.replaceState
可以通过pushState和replaceSate接口浏览器历史，并且改变当前页面的URL，onpopstate监听后退
CSS
盒子模型：content-box和border-box
content-box是W3C的标准盒模型 元素宽度+padding+border
border-box 是ie的怪异盒模型，他的元素宽度等于内容宽度 内容宽度包含了padding和border
有时候在元素基础上添加内边距padding或border会将布局撑破 但是使用border-box就可以轻松完成
实现三个DIV等分排在一行
1.设置border-box width 33.33%
2.设置display：flex flex:1
怎么实现一个DIV左上角到右下角的移动，有哪些方法？怎么实现
jquery的animate方法
css3的transition
不知宽高的元素水平垂直居中
方法1：通过定位和transform属性来实现
.parent{
width:100%;
height:400px;
background:#666;
position:relative;
}
.children{
position:absolute;
top:50%;
left:50%;
background:red;
transform:translate(-50%,-50%);
}
方法2：通过利用flex布局
.parent{
width:100%;
height:400px;
background:#666;
display:flex;
align-items:center;
justify-content:center;
}
.children{
background:red;
}
方法3：通过table属性
.parent{
display:table;
width:100%;
height:400px;
background:#666;
}
.children{
display:table-cell;
vertical-align:middle;
text-align:center;
background:red;
}
rem 和 em，px的区别
1、px是相对长度单位，它是相对于显示器屏幕分辨率而言的。
优缺点：比较稳定和精确，但在浏览器中放大或缩放浏览页面时会出现页面混乱的情况。
2、em是相对长度单位，EM是相对于父元素来设计字体大小的。如果当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
优缺点：em的值并不是固定的，它会继承父级元素的字体大小。
3、rem是CSS3新增的一个相对单位，REM是相对单位，是相对HTML根元素。
这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应
清除浮动
方法一：利用clear属性进行清理
父容器结尾插入空标签
利用css伪元素：
.clearfix:after {
content: ".";
height: 0;
visibility: hidden;
display: block;
clear: both;
}
方法二：将父容器形成BFC
position的值， relative和absolute分别是相对于谁进行定位的
relative:相对定位，相对于自己本身在正常文档流中的位置进行定位。
absolute:生成绝对定位，相对于最近一级定位不为static的父元素进行定位。
fixed: (老版本IE不支持)生成绝对定位，相对于浏览器窗口或者frame进行定位。
static:默认值，没有定位，元素出现在正常的文档流中。
sticky:生成粘性定位的元素，容器的位置根据正常文档流计算得出
CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？
选择器：
id选择器(#myId)
类选择器(.myClassName)
标签选择器(div,p,h1)
相邻选择器(h1 + p)
子选择器(ul > li)
后代选择器(li a)
通配符选择器(*)
属性选择器(button[disabled="true"])
伪类选择器(a:hover,li:nth-child)
优先级：
!important > 行内样式(比重1000) > id(比重100) > class/属性(比重10) > tag / 伪类(比重1);
介绍sass
定义变量css嵌套，允许在代码中使用算式，支持if判断for循环
display:none和visibility:hidden的区别
display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。
visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间
CSS中link 和@import的区别
link属于HTML标签，而@import是CSS提供的;
页面被加载的时，link会同时被加载，而@import被引用的CSS会等到引用它的CSS文件被加载完再加载;
import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
link方式的样式的权重 高于@import的权重
对BFC规范的理解
BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向(和布局方向有关系)的margin会发生折叠
JavaScript
介绍一下闭包和闭包常用场景
使用闭包主要为了设计私有的方法和变量，闭包的有点事可以避免变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。在js中，函数即闭包，只有函数才会产生作用域的概念。
闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包常见方式，就是在一个函数的内部创建另一个函数
闭包有三个特性：
函数嵌套函数
函数内部可以引用外部的参数和变量
参数和变量不会被垃圾回收机制回收
闭包这种东西解决了什么问题
受javascript链式作用域链的影响，父级变量中无法访问到子级的变量值
作用域链，作用域链的尽头是什么
每一个函数都有一个作用域，比如创建了一个函数，函数里面又包含了一个函数，那么现在有三个作用域，这样就形成了一个作用域链
作用域的特点就是，先在自己的变量范围中查找，如果找不到，就会沿着作用域链往上找，尽头是object。
ajax的过程是怎样的，主要用到哪些状态码
创建XMLHttpRequest对象，也就是创建一个异步调用对象
创建一个新的HTTP请求，并指定该HTTP请求的方法、URL及验证信息
设置响应HTTP请求状态变化函数
发送HTTP请求
获取异步调用返回的数据
使用javascript和DOM实现局部刷新
var xmlHttp = new XMLHttpRequest();
xmlHttp.open('GET','demo.php','true');
xmlHttp.send()
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState === 4 & xmlHttp.status === 200){
}
}
常用状态码status
404没找到页面
403禁止访问
500内部服务器出错
200正常
304被又被修改(not modified)(服务器返回304状态，表示源文件没有被修改)
使用promise封装ajax
function getJSON(url){
return new Promise(function(resolve, reject){
var XHR = new XMLHttpRequest();
XHR.open('GET', url，true);
XHR.send();
XHR.onreadystatechange = function() {
if(XHR.readerSate == 4){
if(XHR.status == 200){
try {
var response = JSON.parse(XHR.responseText);
resilve(response);
} cath(e) {
reject(e);
}
}else{
reject(new Error(XHR.statusText));
}
}
}
})
}
getJSON(url).then(res => console.log(res));
事件委托
利用冒泡原理，把时间加到父级上，触发执行效果,可以大量节省内存占用，减少事件注册
var ul = document.querySelector('ul');
var list = document.querySelectorAll('ul li');
ul.addEventListener('click', function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElemnt;
for(var i = 0, len = list.length; i < len; i++){
if(list[i] == target){
alert(i + "----" + target.innerHTML);
}
}
});
函数防抖和函数节流
函数防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次
函数防抖的要点，也是要一个setTImeout来辅助实现。延迟执行需要跑的代码
如果方法多次触发，则要把上次记录的延迟执行代码用clearTimeout清掉，重新开始
如果计时完毕，没有方法进来访问触发，则执行代码
var tiemr = false;
document.getElementById(‘debounce’,onScrll = function(){
clearTimeout(timer);
timer = setTimeout(function(){
console.log('111')
}, 300);
}
判断数组有哪些方法
a instanceof Array
a.constructor == Array
Object.protype.toString.call(a) == [Object Array]
图片懒加载
当页面滚动的时间被触发->执行加载图片操作->判断图片是否在可视区域内->在，则动态将data-src的值赋予该图片
标签：面试题,元素,函数,作用域,前端,常见,XHR,var,选择器
来源： https://www.cnblogs.com/shemingxin/p/12073027.html
1585
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
