问题导航
- HTML5 部分
- CSS 部分
- JS 部分
- HTTP部分
- Vue 部分
- 其它
- 1. 哪些性能优化方法？
- 2. export 和 export default 的区别
- 3. 英文 字母和汉字组成的字符串，用正则给英文单词前后加上空格
- 4. session 和 cookie 的区别
- 5. ES6 的新特性
- 6. 列举浏览器对象模型BOM里最常用至少4个对象，并列举Window对象的常用方法至少5个
- 7. 简述列举文档对象模型DOM里document的常用查找访问节点的方法并做简单说明
- 8. 补充按钮事件函数，确认用户是否退出当前页面，确认之后关闭页面
- 9. 常见的浏览器端的存储技术有哪些
- 10.jquery ajax 中支持哪些数据类型
- 11. 给JS对象添加属性和方法有哪些？
- 12. 描述一下脚本< script> 放在< head>和放在< body>的区别
- 写在最后
HTML5 部分
1. HTML5 的文档类型和字符集是？
HTML5 文档类型很简单
<!DOCTYPE html>
使用UTF-8 编码
<meta charset="UTF-8">
2. HTML5 Canvas元素有什么用？
Canvas 元素用于在网页上绘制图形，该元素标签的强大之处在于可以直接在HTML上进行图形操作
<canvas id="canvas" width="300" height="100"></canvas>
具体使用教程： 菜鸟教程
3. HTML5 如何嵌入视频？
使用< video >元素标签
<video width="300" height="200" controls>
<source src="movice.mp4" type="video/mp4">
<source src="moviec.ogg" type="video/ogg">
</video>
4. HTML5 如何嵌入音频？
<audio controls>
<source src="url"></source>
</audio>
5. HTML5 存储类型有什么区别？
HTML5 提供了下面两种本地存储方案
****localStorage 用于持久化的本地存储， 数据永远不会过期，关闭浏览器也不会丢失
*****sessionStorage 同一个会话的页面才能访问并且当会话结束后数据也会随之销毁，因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储
6. HTML5 新增的表单元素
- datalist
datalist 元素定义输入框的选项列表，选项列表是通过该元素内option元素进行创建的
要把这个datalist元素定义的选项列表绑定到输入框，将input元素的list属性的值设置为datalist元素的id属性值
<datalist id="uselist" name="uselist">
<option>BMW</option>
<option>Ford</option>
<option>Volvo</option>
</datalist>
<input type="text" list="uselist">
- output
output 元素用于不同类型的输出，例如，计算结果或者脚本的其他结果
output元素必须写在表单内部，或者说为其添加form属性
output元素的值一般由js来控制
<form action="">
<div >
你的身高：
<input class="tall" type="text">
</div>
<div>
你的体重：
<input class="weight" type="text" name="" id="">
</div>
<input class="test" type="button" value="点击测试">
<output id="result"></output>
</form>
————————————————
版权声明：本文为CSDN博主「crazy的蓝色梦想」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_41257129/article/details/89151059
- keygen
用于表单的密钥生成器字段，作用是提供一种验证用户的可靠方法
7. link 和 @import 的区别
- link 是XHTML标签，除了加载CSS外，还可以定义RSS等其它事务；@import属于CSS范畴，只能加载CSS
- 加载顺序不同： link 引用CSS时，在页面载入时同时加载；@import 需要页面网页完全载入时加载
- link是XHTML标签，无兼容问题；@import 是在CSS2.1 提出的，低版本的浏览器不支持
- link 支持使用Javascript 控制DOM 去改变样式；而@import 不支持
CSS 部分
1. px rem em vh vw 之间有啥区别？
px： px是像素值，是一个固定的长度
rem : rem的值是px的倍数
默认情况下 font-size = 16px， 那么1rem = 16px
em ： em 的值是px 的倍数
默认情况下font-size = 16px,那么1em = 16px
rem 和 em 的区别：
rem是根据根节点(html标签) font-size 决定rem的等于多少px
em 可以根据父节点 或者 自身的font-size 决定 em 的大小
vh vw ：
vh 和 vw 就是根据窗口的宽高，分成100等份， 100vh就表示满高， 50vh就标识一半高
vh 和 vw 与 百分比的区别是什么？
百分比是基于父元素的设置而言，如果父元素为100px，那么子元素100%也就是100px，而vh和vw始终是针对窗口的宽高
2. CSS垂直、水平居中的写法
水平居中：
行内元素： text-align： center
块级元素： margin： 0 auto
display: flex + justify-content: center
垂直居中：
设置 line-height 等于 height
display: flex + align-items: center
3. 画一条0.5px 的直线
考查的是 CSS3 的 transform
height： 1px;
transform： scale(0.5);
4. CSS优先级
- ID选择器： 如#id{}
- 类选择器： 如.class {}
- 属性选择器： 如 a[href="www.baidu.com]{}
- 伪类选择器： 如 :hover{}
- 伪元素选择器： 如::before {}
- 标签选择器： 如 span{}
- 统配选择器： 如 *{}
内联样式 > id选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
5. 列举CSS中可继承和不可继承元素
参考文章
不可继承：
- 盒子模型元素： width、height、margin、padding、border…
- 背景元素： background、backgroud-color、backgroud-images…
- 定位属性元素： float、position、z-index…
可继承
- 字体系列属性： font-size、font-weight、font-family…
- 光标属性： cursor
- 文本系列属性： text-align、line-height…
6. sass 和 less 什么区别
- 编译环境不一样
Sass的安装需要Ruby编译环境；而less需要引入less.js来处理 - 变量符不一样
less是@，而sass是$；作用域不一样，less是块级作用域 - sass支持条件语句，如if{}else{}，for{}循环等，但是less不行
7. css清除浮动以及BFC
- 一般是一个盒子里使用了CSS float 浮动属性，导致父级对象不能被撑开
<div class="box">
<div class="div-right"></div>
<div class="div-left"></div>
<div class="clear"></div> 方法二
</div>
.box {
//height： 204px; //方法一
border: 1px solid red;
}
.div-right {
width: 200px;
height: 200px;
float: right;
border: 1px solid black;
}
.div-left {
width: 200px;
height: 200px;
float: left;
border: 1px solid black;
}
/* .clear {
clear: both;
} */ 方法二
- 清除浮动的方法：
方法1： 设置父元素高度
方法2：
在父元素中增加空子元素，并设置其clear 属性为both
取值：
none： 不做任何清除浮动的操作
right： 清除前面元素左浮动带来的影响
left： 清除前面元素右浮动带来的影响
both： 清除前面元素所有浮动带来的影响
方法3： 为父元素设置overflow属性
8. 画一个宽度为父元素一半的正方形
padding-bottom
| 值 | 描述 |
|---|---|
| length | 规定以具体单位计的固定的下内边距值，比如像素、厘米等。默认值是 0px。 |
| % | 定义基于父元素宽度的百分比下内边距。 |
| inherit | 规定应该从父元素继承下内边距。 |
<div class="box">
<div class="inner-box"></div>
</div>
<style>
.box {
width: 400px;
height: 600px;
border: 2px solid red;
}
.inner-box {
width: 50%;
padding-bottom: 50%;
border: 2px solid black
}
</style>
JS 部分
1. JS的基本数据类型
- Number
- String
- Boolean
- Null
- Undefined
- Symbol (ES6 新增数据类型)
引用数据类型统称Object类型，具体可细分为：
* Array
* Object
* Function
基本数据类型的数据直接存储在栈中；而引用数据类型数据存储在堆中， 在栈中保存数据的引用地址
2. 遍历A节点的父节点下的所有子节点
<script>
var b = document.getElementById("a").parentNode.children;
</script>
3. 利用JS实现冒泡排序
function bubbleSort(arr){
var len = arr.length;
for(var i = 0;i < len - 1;i++){
for(var j = 0;j < len - 1 - i;j++){
if(arr[j] > arr[j+1]){
var tmp = arr[j];
arr[j+1] = arr[j];
arr[j] = tmp;
}
}
}
return arr
}
4. JS数组去重方法
- 使用filter 和 indexof 方法进行数组去重
var Arr = [1,3,null,7,4,3,null,{},{},NaN,NaN]
var newArr = Arr.filter((value,index,arr) => arr.indexOf(value) === index));
console.log(newArr) // [1,3,null,7,4,{},{}]
- 双层for循环数组去重
var Arr = [1,3,null,7,4,3,null,{},{},NaN,NaN]
function unlink(arr) {
for(let i=0;i<arr.length;i++){
for(let j=i+1;j<arr.length;j++){
if(arr[i]=arr[j]){
arr.splice(j,1);
j--;
}
}
}
return arr
}
console.log(unlink(arr)) //[1,3,null,7,4,{},{},NaN,NaN]
该方法不能对 {}空对象和NaN 进行去重
- 利用ES6新特性Set()
let arr = [1,2,3,1,2]
let newArr = [...new Set(arr)]
5. 什么是原型和原型链？
- 原型
① 所有引用类型都有一个__proto__(隐式原型）属性，属性值是一个普通的对象
② 所有函数都有一个prototype(原型)属性，属性值是一个普通的对象
③ 所有引用类型的__proto__属性指向它的构造函数的prototype
var a = [1,2,3];
console.log(a.__proto__)
console.log(Array.prototype)
a.__proto__ === Array.prototype; // true
- 原型链
当访问一个对象的某个属性时，会先在这个对象本身属性上查找；如果没有找到则会去它的__proto__隐式原型上查找，即查找它的构造函数的prototype；如果还没找到则会再在构造函数的prototype 的 __proto__中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链
6. 深拷贝和浅拷贝
7. 判断数据类型有几种方法
- typeof
- 缺点： typeof null 的值为Object，无法分辨是null还是Object
- instanceof
- 缺点： 只能判断对象是否存在目标对象的原型链上
- constructor
- Object.prototype.toString.call()
- 缺点：不能细分为谁谁的实例
为什么typeof null 是object？
000 对象
1 整型
010 双精度类型
100 字符串
110 布尔类型
- 缺点：不能细分为谁谁的实例
8. 什么是JS闭包
参考文章：彻底理解js闭包
作用：
- 保护
- 避免命名冲突
- 保存
- 解决循环绑定引发的索引问题
- 变量不会销毁
- 可以使用函数内部的变量，使变量不会被垃圾回收机制回收
HTTP部分
1. 常见的HTTP状态码
2开头 (请求成功) 表示成功处理了请求的状态代码
– 200(成功) 服务器已成功处理了请求
– 201(已创建) 请求成功并且服务器创建了新的资源
– 202 （已接受） 服务器已接受请求，但尚未处理
– 203 （非授权信息） 服务器已成功处理了请求，但返回的信息可能来自另一来源
– 204 （无内容） 服务器成功处理了请求，但没有返回任何内容。
– 205 （重置内容） 服务器成功处理了请求，但没有返回任何内容。
– 206 （部分内容） 服务器成功处理了部分 GET 请求。
3开头 (请求被重定向) 表示要完成请求，需要进一步操作。通常这些状态代码用来重定向
300 （多种选择） 针对请求，服务器可执行多种操作。 服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择。
301 （永久移动） 请求的网页已永久移动到新位置。 服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。
302 （临时移动） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
303 （查看其他位置） 请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。
304 （未修改） 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。
305 （使用代理） 请求者只能使用代理访问请求的网页。 如果服务器返回此响应，还表示请求者应使用代理。
307 （临时重定向） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
4开头(请求错误) 这些状态代码表示请求可能出错，妨碍了服务器的处理
400 (错误请求) 服务器不理解请求的语法
401 (未授权) 请求要求身份验证，对于需要登录的网页，服务器可能返回此响应
403 (禁止) 服务器拒绝请求
404 (未找到) 服务器找不到请求的网页
405 (方法禁用) 禁用请求中指定的方法
406 （不接受） 无法使用请求的内容特性响应请求的网页。
407 （需要代理授权） 此状态代码与 401（未授权）类似，但指定请求者应当授权使用代理。
408 (请求超时) 服务器等候请求时发生超时
409 （冲突） 服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。
410 （已删除） 如果请求的资源已永久删除，服务器就会返回此响应。
411 （需要有效长度） 服务器不接受不含有效内容长度标头字段的请求。
412 （未满足前提条件） 服务器未满足请求者在请求中设置的其中一个前提条件。
413 （请求实体过大） 服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。
414 （请求的 URI 过长） 请求的 URI（通常为网址）过长，服务器无法处理。
415 （不支持的媒体类型） 请求的格式不受请求页面的支持。
416 （请求范围不符合要求） 如果页面无法提供请求的范围，则服务器会返回此状态代码。
417 （未满足期望值） 服务器未满足"期望"请求标头字段的要求。
5开头 （服务器错误） 这些状态代码表示服务器在尝试请求时发生错误 这些错误可能是服务器本身的错误，而不是请求出错
500 (服务器内部错误) 服务器遇到错误，无法完成请求
501 （尚未实施） 服务器不具备完成请求的功能。 例如，服务器无法识别请求方法时可能会返回此代码。
502 （错误网关） 服务器作为网关或代理，从上游服务器收到无效响应。
503 ( 服务不可用 ) 服务器目前无法使用（由于超载或停机维护），通常， 这只是暂时状态
504 （网关超时） 服务器作为网关或代理，但是没有及时从上游服务器收到请求。
505 （HTTP 版本不受支持） 服务器不支持请求中所用的 HTTP 协议版本。
2. POST GET 请求的区别
- get 传参方式是通过地址栏url 传递；post将参数存放在HTTP 的包体内
- get 传递参数有数据长度限制，最大数据长度为2048个字符；post没有长度限制
- get 请求只支持URL编码，post请求支持多种编码方式
- get 后退不会产生影响，post后退会重新进行提交
- get 只支持ASCII 字符，post 支持多种编码方式
3. HTTP 和 HTTPS 的区别
- HTTP 是超文本传输协议，信息是明文传输；HTTPS则是更具安全性的SSL加密传输协议
4. url 输入后的过程
- 读取缓存：
搜索自身的DNS缓存 - DNS解析： 将域名解析成IP地址
- TCP连接： 三次握手协议，简述三次握手协议
- 发送HTTP请求
- 服务器处理并请求返回HTTP报文
- 浏览器解析渲染页面
- 断开连接： TCP四次挥手
5. 三次握手和四次挥手协议
三次握手
（1）首先客户端向服务端发送一端TCP报文
- 标记位为SYN，表示"请求建立新的连接"
- 随后客户端进入SYN-SENT阶段
（2）服务端接收到客户端TCP报文后，返回一段TCP报文 - 标志位为SYN + ACK，表示"接受到了SYN数据包，并且确认建立新连接”
- 随后服务器端进入SYN-RCVD阶段
（3）客户端接受来自服务器端的确认收到数据的TCP报文后，明确从客户端到服务器端的数据传输是正常的，结束SYN-SENT阶段，并最后返回一段TCP报文 - 标志位为ACK，表示"确认接受到服务器端同意连接的信号”
- 随后客户端进入ESTABLISHED阶段
Vue 部分
1. 什么是mvvm mvc是什么区别 原理
(1) MVC (Model-View-Controller)
MVC 是比较直观的架构模式, 用户操作 --> View(负责接收用户的输入操作) --> Controller(业务逻辑处理) --> Model(数据持久化) -->
View(将结果反馈给View)
(2) MVVM (Model-View-ViewModel)
如果说MVP是对MVC的进一步改进，那么MVVM则是思想的完全变革。它是将“数据模型数据双向绑定”的思想作为核心，因此在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应view。
2. Vue的生命周期
参考文章： https://www.cnblogs.com/lgt-hello-world/p/12620073.html
生命周期分为四个过程：
- 创建过程：
1.1 beforeCreate：
当前生命周期el与data尚未初始化还不能访问data、computed、watch、methods 上的方法和数据
1.2 created:
当前生命周期data初始化完成，可以访问到data、computed、watch、methods上的方法和数据，el初始化还没完成所以还不能访问 - 挂载过程：
2.1 beforeMount
当前生命周期在挂载开始之前被调用
2.2 mounted
当前生命周期el已经挂载到文档里 - 更新过程
3.1 beforeUpdate
当前生命周期在数据更新的时候就会执行
3.2 updated
当前生命周期更新的数据与模板结合完毕 - 销毁过程
4.1 beforeDestory
实例销毁之前调用。
4.2 destoryed
当前生命周期数据与视图之间的关系将会断开。
3. 简单说一下Vuex
Vuex是一个专门为vue.js 应用程序开发的状态管理模式，集中管理所有组件状态，并且通过相应的规则保证状态以一种可预测方式发生改变
- State
- Getters
- Mutations
- Actions
- Modules
4. v-model 等价写法
<input :v-model="message"></input>
<!-- <input :value="message" @input="changeValue"></input> -->
methods: {
changeValue(event){
this.message = event.target.value;
}
}
5. 谈谈对于MVVM模式的看法
MVVM模式分为Model，View 和 ViewModel
Model： 代表数据模型，数据和业务逻辑都在Model层中定义；
View： 代表UI视图层，用于页面 数据的展示
ViewModel： 负责监听Model 数据的改变并且控制视图层View 的更新，处理用户的交互操作
Model 和 View 之间并无直接关联，而是通过ViewModel进行联系的
这种模式实现了Model 和 View 数据自动同步，不需要开发者去操作dom
6. Vue 中data为什么是函数而不是一个对象
如果两个实例引用同一个对象，当其中实例数据发生改变时，另一个实例数据也会发生改变；只有当两个实例都有自己的作用域时，才不会相互影响，方便Vue 组件的复用
其它
1. 哪些性能优化方法？
- 减少http请求次数： CSS Sprites，JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存，图片服务器
- 用innerHTML 代替DOM操作，减少DOM操作次数，优化javascript性能
- 当需要设置样式很多时设置className而不是直接操作style
- 图片进行预加载，将css 放在 head 中，将script 放在 body 底部（因为JS文件执行会阻碍渲染）
- 懒执行（将某些逻辑延迟到使用时再计算） 懒加载（将不关键的资源延后加载）
2. export 和 export default 的区别
定义上的区别：
export 可以直接导出 也可以先定义后导出
export default 是模块对外默认导出接口，只能有一个，只能先定义后导出
使用上的区别：
export default XXX
import XXX from ‘./’
-------
export XXX
import {XXX} from ‘./’
3. 英文 字母和汉字组成的字符串，用正则给英文单词前后加上空格
let str = "this一个，题库test"
let reg = /\b[a-z]+\b/ig
let str2 = str.replace(reg,value=> {
return ' ' + value + ' '
)}.trim()
console.log(str2) //this 一个，题库 test
4. session 和 cookie 的区别
（1） cookie 数据存放在浏览器上，session存放在服务器
（2）session 相对于 cookie 安全性高一点
5. ES6 的新特性
- 箭头函数
- 不一样的变量声明： const 和 let
- 模板字符串 反引号（ ` ）
- 对象和数组的解构
//对象
const student = {
name: "张三",
age: 17,
sex: "男"
}
//数组
const student = ['Sam', 17, '男']
// ES5；
const name = student.name;
const age = student.age;
const sex = student.sex;
console.log(name + ' --- ' + age + ' --- ' + sex);
// ES6
const {name,age,sex} = student //对象
const [name,age,sex] = student //数组
console.log(name + age + sex)
- for…in 和 for…of
6. 列举浏览器对象模型BOM里最常用至少4个对象，并列举Window对象的常用方法至少5个
- Window 对象： 表示浏览器中打开的窗口
如果文档包含框架（ 或 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象
常用方法：alert（）、confirm（）、close（）、setTimeout（）、print（）
- Location对象： 包含有关当前URL的信息
Location对象是window对象的一部分，可通过window.Location属性对其进行访问 - History 对象： 包含用户（在浏览器窗口中）访问的URL
History对象是Window对象的一部分，可通过window.history 属性对其进行访问 - Screen 对象： 包含有关客户端显示屏幕的信息
- Navigator 对象：Navigator 包含有关浏览器的信息
7. 简述列举文档对象模型DOM里document的常用查找访问节点的方法并做简单说明
// 通过id查找
document.getElementById()
// 通过class 属性获取(若有多个相同class的元素返回它们的合集）
document.getElementsByClassName()
// 通过元素标签名直接获取（多个返回合集）
document.getElementsByTagName()
// 通过name获取
document.getElementsByName()
8. 补充按钮事件函数，确认用户是否退出当前页面，确认之后关闭页面
function closeWin() {
if(confirm("确认退出页面？")){
window.close();
}
}
9. 常见的浏览器端的存储技术有哪些
- cookie
- Flash ShareObject
- Google Gear
Google开发出的一种本地存储技术。
缺点：需要安装Gear组件 - userData
IE浏览器可以使用userData来存储数据，容量可达640k
缺点：它仅在IE下有效 - sessionStorage
- localStorage
- globalStorage
使用于Firefox2+的火狐浏览器，类似于IE的userData
10.jquery ajax 中支持哪些数据类型
xml html script json jsonp text
11. 给JS对象添加属性和方法有哪些？
方式一，在定义对象时，直接添加属性和方法
function Person(name,age) {
this.name = name;
this.age = age;
this.say = function() {
alert(name + ':::' + age);
}
}
var person = new Person('张三', 24);
person.say();
方式二，通过“对象.属性名”的方式添加
function Person() {}
var person = new Person();
person.name = '张三';
person.say = function() {alert(this.name)};
person.say();
方式三，通过对象prototype（原型）属性添加
function Person() {}
var person = new Person();
Person.prototype.name = '张三';
Person.prototype.say = function() {alert(this.name)};
person.say();
12. 描述一下脚本< script> 放在< head>和放在< body>的区别
放中的情况：脚本会优先加载，但加载过程中，还没加载完，会使脚本访问不到中的元素。
放底部：脚本在加载后加载，能够保证脚本有效地访问的元素
写在最后
什么？意犹未尽？注意一大波楼主觉得很淦(zan)的面试题文章来袭
272
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
