HTML篇
1.项目部署到发布的一个过程
答：开发阶段->打包阶段->测试阶段->预发阶段>上线阶段
2.前端性能优化有哪些方法
- 1.降低请求量：合并资源，减少HTTP请求数，minify/gzip压缩，webP，lazyload
- 2.加快请求速度：预解析DNS，减少域名数，并行加载，CDN分发
- 3.缓存：HTTP协议缓存请求，离线缓存manifest，离线数据缓存localStorage
- 4.渲染：JS/CSS优化，加载顺序，服务端渲染，pipeline
3.TCP三次握手，一句话概括
答：客户端（client）和服务端（server）都需要直到各自可收发，因此需要三次握手。
可以简化为：客户端发起请求连接，服务端确认而且也发起连接确认
- 第一次握手：服务端只可以确认，自己可以接受客户端发送的报文段
- 第二次握手：客户端可以确认服务端收到了自己发送的报文段，并且自己可以确认，自己可以接受服务端发送的报文段
- 第三次握手：服务端可以确认客户端收到了自己发送的报文段
4.Http请求方式
答：GET,HEAD,POST等
- 1、GET 请求指定的页面信息，并返回实体主体。
- 2、HEAD 类似于 get 请求，只不过返回的响应中没有具体的内容，用于获取报头
- 3、POST 向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被
包含在请求体中。POST 请求可能会导致新的资源的建立和/或已有资源的修改。
5.Web Quality（无障碍）
答：能够被残障人士使用的网站才能称得上一个易用的网站。
- 使用alt属性
<img src ="person.jgp" alt="this is a person"/>
- 有时候浏览器会无法显示图像。具体的原因有：用户关闭了图像显示，浏览器不支持图形显示的迷你浏览器，浏览器是语音浏览器（供盲人和弱视人群使用），如果您使用了alt属性，那么浏览器至少可以显示或者独处有关图像的描述。
6.补充400 401 和403状态码
- （1）400状态码：请求无效。产生原因：前端提交数据的字段名称和字段类型与后台的实体没有保持一致。前端提交到后台的数据应该是json字符串类型，但是前端没有将对象JSON.stringify转化为字符串。解决方法：对照字段的名称，保持一致性。将obj对象通过JSON.stringify实现序列化。
- （2）401状态码：当前请求需要用户验证
- （3）403状态码：服务器已经得到请求，但是拒绝执行
7.iframe是什么？有什么缺点？
定义：iframe元素会创建包含另一个文档的内联框架
- 提示：可以将提示文字放在’ '之间,iframe标签内的内容可以做为浏览器不支持iframe标签时显示
- 1.优点：重载页面时不需要重载整个页面，只需要重载页面中的一个框架页（减少数据的传输，减少网页的加载时间）；
2.技术简单，使用方便，主要应用于不需要搜索引擎来搜索的页面；
3.方便开发，减少代码的重复率（比如页面的header，footer）； - 缺点：1.会产生很多的页面，不易于管理；2.不易打印；3.多框架的页面会增加服务气得http请求；
4.浏览器的后退按钮无效等；
8.Cookie如何防范XSS攻击
答：XSS（跨站脚本攻击）是指攻击者在返回的HTML中嵌入JavaScript脚本，为了减轻这些攻击，需要在HTTP头部配上，set-cookie：httponly-这个属性可以防止XSS，它会禁止JavaScript脚本来访问cookie
secure-这个属性告诉浏览器仅在请求为https的时候发送cookie。
结果应该是这样的：Set-Cookie=<‘cookie-value’>…
9.强缓存与协商缓存
答：缓存分为两种：强缓存和协商缓存，根据响应的header内容来决定。
-
强缓存：从缓存取，状态码200，不发送请求到服务器，直接从缓存取
强缓存相关字段有expires，cache-control。如果同时存在的话，后者优先级高 -
协商缓存：从缓存取，状态码304，发送请求到服务器，通过服务器来告知缓存是否可用
协商缓存相关字段有Last-Modified/If-Modified-Since，Etag/If-None-Match
10.HTML5与CSS3新增的元素
HTML5：
- 1.为了更好的实现语义化，增加了header，footer，nav，aside，section等语义化标签。
- 2.在表单方面，为了增强表单，为input增加了color，email，data，range等类型。
- 3.在存储方面，提供了sessionStorage，localStorage和离线存储，通过这些存储方式方便数据在客户端的存储和获取。
- 4.在多媒体方面规定了音频和视频元素audio和vedio
- 5.另外还有地理定位，canvas画布，拖放，多线程编程的web worker和websocket协议。
CSS3:
- 边框：如border-radius，box-shadow等
- 背景：如background-size，background-origin等
- 2D,3D转换如：transform等
- 动画：animation
11.HTTP2.0的特性
- 二进制分帧
- 多路复用
- 首部压缩
- 流量控制
- 请求优先级
- 服务器推送
12.输入URL到页面加载显示完成发生了什么
答：DNS解析->TCP连接->发送http请求->服务器处理请求并返回HTTP报文->浏览器解析渲染页面->连接结束
CSS篇
1.CSS盒子模型
答：包括IE盒子模型和标准的W3C盒子模型。
- box-sizing：border-box，padding-box，content-box
标准盒子模型：width= content的宽度
IE盒子模型：width=content+padding+border - 在css3中引入了box-sizing属性，box-sizing：content-box表示标准的盒子模型，box-sizing：border-box表示的是IE的盒子模型
2.link标签与import标签的区别
答：link属于html标签，而@import是css提供的
- 1.页面被加载时，link会被同时加载，而@import引用的css会等到页面加载结束后加载
- 2.link是html标签，因此没有兼容性，而@import只有IE5以上才能识别
- 3.link方式样式的权重是高于@Import的
3.如何画一条0.5px的线
参考：如何画一条0.5px的线
4.transition与animation的区别
答：大部分属性是相同的，都是随时间改变元素的属性值，主要区别是：
- transition需要触发一个时间才能改变属性，而animation不需要触发任何事件的情况下才会随时间改变属性值，并且transition为2帧，而animation可以一帧一帧的。
5.BFC(块级格式化上下文，用于清除浮动，防止margin重叠等）
答：是一个独立的渲染区域，并且有一定的布局规则，不会与float box 重叠，子元素不会影响到外面，计算BFC高度的时候，浮动元素也会参与计算。
- 哪些元素会生成BFC:
- 根元素
- float不为none的元素
- position为fixed和absolute的元素
- display为inline-block，table-cell，table-captiob，flex，inline-flex的元素
- overflow不为visible的元素
6.垂直居中的方法
- margin：auto法
- margin负值法
- table-cell（未脱离文档流的）[设置父元素的display：table-cell，并且vertical-align：middle]
- 利用flex（父元素设置为display：flex，并且设置align-items：center；justify-content：center）
7.多行元素的文本省略号
display: -webkit-box
-webkit-box-orient: vertical
-webkit-line-clamp: 3
overflow: hidden
8.双边距重叠问题（外边距折叠）
答：多个相邻（兄弟/父子关系）普通流的块元素垂直方向margin会重叠
- 结果为：
- 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值
- 两个相邻的外边距都是负数时，折叠结果是它们两者绝对值的较大值
- 两个相邻的外边距一正一负时，折叠结果是它们两者的和
9.position属性比较
- 1.fixed：相对于浏览器窗口定位的，不会随着滚动条滚动而滚动
- 2.relative：相对于原始位置定位
- 3.absolute：相对于最近的定位属性（非static）祖先标签的内边距边界定位
- 4.sticky：元素先按照普通文档流定位，然后相对于该元素在流中的flow root（BFC）和containing block（最近的块级祖先元素）定位，而后，元素定位表现为在跨越特定阈值前为relative，之后为fixed定位
- 5.static：static没有定位，是默认值
- 6.inherit
10.浮动清除
- 1.使用带clear熟悉的空元素（在浮动元素后使用一个空元素）
.clear{
clear：both;
}
<div class="clear"`></div>
- 2.使用css的overflow属性
给浮动元素的容器添加overflow：hidden；或者overflow：auto；可以清楚浮动，另外IE6中还需要触发hasLayout，例如为父元素设置容器宽高或设置zoom：1 - 3.给浮动元素的容器添加浮动（一浮全浮）
但是这样会使其整体浮动，影响布局，不推荐使用 - 4.使用邻接元素处理
什么都不做，给浮动元素后面的元素添加clear属性 - 5使用css的：after伪元素
注意：after伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和IEhack，可以完美兼容当前主流的各大浏览器，这里的IEhack指的是触发hasLayout。给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个：after伪元素实现元素末尾添加一个看不见的块元素（Block element）清除浮动
11.CSS选择器有哪些，优先级如何
- 1.id选择器（#），class选择器（.），标签选择器，伪元素选择器（:），伪类选择器（::）
- 2.同一元素引用了多个样式时，排在后面的样式属性的优先级高
- 样式选择器的类型不同时，优先级为：id选择器>class选择器>标签选择器
- 标签之间存在层级包含关系时，后代元素会继承祖先元素的样式。如果后代元素定义了与祖先元素相同的样式，则祖先元素的相同的样式属性会被覆盖。
- 继承的样式的优先级比较低，至少比标签选择器的优先级低
- 带有！important标记的样式属性的优先级最高
- 样式表的来源不同时，优先级顺序是：内联样式>内部样式>外部样式>浏览器用户自定义样式>浏览器默认样式
12.怎么让一个元素消失
答：1.display:none 2.visibility:hidden; 3.opacity:0 4.position移到外部 5.z-index图层遮盖等等
13.css预处理器有什么
答：less，sass等
Javacscript篇
1.补充get和post请求在缓存方面的区别
- 1.get请求类似于查找的过程，用户获取数据，可以不用每次都与数据库连接，所以可以使用缓存
- 2.post不同，post做的一般是修改和删除的工作，所以必须与数据库交互，所以不能使用缓存，因此get请求适合于请求缓存
2.说一下闭包
答：一句话可以概括：闭包就是能够读取其他函数内部变量的函数，或者子函数在外调用，子函数所在的父函数的作用域不会被释放。
3.说一下 类的创建与继承
答：
- 1.类的创建（es5）：new一个function，在这个function的prototype里面增加属性和方法
下面来创建一个Animal类：
//定义一个动物类
function Animal(name) {
//属性
this.name = name || 'Animal';
//实例方法
this.sleep = function(){
console.log(this.name+'正在睡觉');
}
//原型方法
Animal.prototype.eat = function(food){
console.log(this.name+'正在吃: '+food);
};
这样就生成了一个Animal类，实例化生成对象后，有方法和属性
- 2.类的继承--------原型链继承
- 原型链继承
function Cat(){
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';
//Test code
var cat = new Cat();
console.log(cat.name);
console.log(cat.eat('fish));
console.log(cat.sleep());
console.log(cat instanceof Animal); //true
console.log(cat instanceof Cat); //true
}
介绍：在这里我们可以看到new了一个空对象，这个空对象指向Animal并且Cat.prototype指向了这个空对象，这种就是基于原型链的继承。
特点；基于原型链，既是父类的实例，也是子类的实例
缺点：无法实现多继承
- 3.构造继承：使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类（没用到原型）
function Cat(name){
Animal.call(this);
this.name = name ||'Tom';
}
//Test code
var cat =new Cat();
console.log(cat.name);
console.log(cat.sleep);
console.log(cat instanceof Animal); //false
console.log(cat instanceof Cat); //true
特点：可以实现多继承
缺点：只能继承父类实例的属性和方法，不能继承原型上的属性和方法
- 4.实例继承和拷贝继承
- 实例继承：为父类实例添加新特性，作为子类实例返回
- 拷贝继承：拷贝父类元素上的属性和方法
上述两个实用性不强，不一一举例
- 5组合继承：相当于构造继承和原型链继承的组合体。通过调用父类构造，继承父类的属性并保留传参的有点，然后通过将父类实例作为子类原型，实现函数复用
function Cat(name){
Animal.call(this);
this.name = name ||'Tom';
}
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;
//Test code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep);
console.log(cat instanceof Animal); //true
console.log(cat instanceof Cat); //true
特点：可以继承实例属性/方法，也可以继承原型属性/方法
缺点：调用了两次父类构造函数，生成了两份实例
- 6寄生组合继承：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性
function Cat(name){
Animal.call(this);
this.name = name ||'Tom';
}
(function(){
//创建一个没有实例方法的类
var Super = function(){};
Super.prototype =Animal.prototype;
//将实例作为子类的原型
Cat.prototype = new Super();
})();
//Test code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep);
console.log(cat instanceof Animal); //true
console.log(cat instanceof Cat); //true
较为推荐
4.如何解决异步回调地狱
答：promise generator async/await
5.如何让事件冒泡后捕获（一般正常是先捕获后冒泡）
答：对于同一个事件，监听捕获和冒泡，分别对应相应的处理函数，监听到捕获事件，先暂缓执行，直到冒泡事件被执行后再执行捕获
6.说一下事件委托
答：不在事件的发生地（直接dom）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判断事件发生元素DOM的类型，来做出不同的响应。
举例：最经典的就是ul和li标签的事件监听，比如我们在添加事件时候，采用事件委托机制，不会在li标签上直接添加，而是在ul父元素上添加。
- 好处：比较适合动态元素的绑定，新添加的子元素也会有监听函数，也可以有事件触发机制
7.说一下图片的懒加载和预加载
- 预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染
- 懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。
- 两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。
懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。
8.mouseover和mousrenter的区别
- 1.mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发冒泡的过程。对应的移除事件是mouseout
- 2.mouseenter：当鼠标移除元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是mouseleave
9.JS的new操作符做了哪些事情
答：new操作符新建了一个空对象，这个对象原型指向构造函数的prototype，执行构造函数后返回这个对象。
10.改变函数内部this指针的指向函数（bind，apply，call的区别）
答：通过apply和call改变函数的this指向，他们两个函数的第一个参数都是一样的表示要改变指向的那个对象，第二个参数，apply是数组，而call而是arg1，arg2…这种形式。通过bind改变this作用域会返回一个新的函数，这个函数不会马上执行。
11.JS的各种位置，比如clientHeight，scrollHeight，offsetHeight，以及scrollTop，offsetTop，clientTop的区别
- 1.clientHeight：表示的是可视区域的高度，不包含border和滚动条
- 2.offsetHeight：表示的是可视区域的高度，包含border和滚动条
- 3.scrollHeight：表示了所有区域的高度，包含了因为滚动被隐藏的部分。
- 4.clientTop：表示边框border的厚度，在未指定的情况下一般为0
- 5.scrollTop：滚动后被隐藏的高度，获取对象相对于由offsetParent属性指定的父坐标（css定位的元素或body元素）距离顶端的高度
12.异步加载JS的方法
- 1.defer：只支持IE如果您的脚本不会改变文档的内容，可将defer属性加入到<script.>标签中，以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本，它将推迟对脚本的解释，直到文档已经显示给用户为止。
- 2.async：HTML5属性仅适用于外部脚本，并且如果在IE中，同时存在defer和async，那么defer的优先级比较高，脚本将在页面完成时执行。创建script标签，插入到DOM中
13.对象深度克隆的简单实现
function deepClone(obj){
var newObj = obj instanceof Array ? [] : {};
for(var item in obj){
var temple = typeof obj[item] == 'object' ? deepClone(obj[item] : obj[item];
newObj[item] = temple;
}
return newObj;
}
ES5的常用的对象克隆的一种方式。注意数组是对象，但是跟对象又有一定区别，所以我们一开始判断了一些类型，决定newObj是对象还是数组。
14.将原生的ajax封装成promise
var myNewAjax = function(url){
return new Promise(function(resolve,reject){
var xhr = new XMLHttpRequest();
xhr.open('get',url);
xhr.send(data);
xhr.onreadystatechange=function(){
if(xhr.status==200 && readyState==4){
var json = JSON.parse(xhr.responseText);
resolve(json);
}
else if(xhr.readyState==4 && xhr.status!=200){
reject('error');
}
}
})
}
5764
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
