一、HTML5新特性
本地存储 webStorage websocket webworkers
新增地理位置等API
对css3的支持
canvas
多媒体标签
新增表单元素类型
结构标签:header nav article aside footer
表单标签:email url range date
媒体标签:video audio
……
二、CSS3新特性
圆角:border-radius
阴影:box-shadow
背景渐变:https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_gradients
弹性盒布局:https://www.jianshu.com/p/5856c4ae91f2
过渡
动画
2D/3D转换
新增的属性和选择器
……
三、webstorage和cookie的区别
1、容量:cookie 4k,webStorage 5M。
2、存储时长:localStorage 长期存储,sessionStorage 基于单次会话存储,cookie 必须设定存储时长。
3、和服务器交互:cookie信息会在和服务器做交互时 默认发送到服务端;webStorage 只会存储在本地。
四、实现响应式布局几种方式
布局的几种方式:静态布局、自适应布局、流式布局、响应式布局、弹性布局。
响应式布局原生代码,媒体查询:https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries,说明bootstrap等框架的应用。
五、jsonp原理
允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。
参考:《彻底弄懂jsonp原理及实现方法》https://www.cnblogs.com/soyxiaobi/p/9616011.html
六、闭包
一个可以访问另一个函数中的变量的函数。当一个函数的返回值是另外一个函数,而返回的那个函数如果调用了其父函数内部的变量,且返回的这个函数在外部被执行就产生了闭包。
参考:
1、闭包 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures
2、彻底搞懂JS闭包各种坑 https://www.jianshu.com/p/26c81fde22fb
七、js的垃圾回收机制
基本的垃圾回收算法称为“标记-清除”,定期执行以下“垃圾回收”步骤:
1、垃圾回收器获取根并“标记”(记住)它们。
2、然后它访问并“标记”所有来自它们的引用。
3、然后它访问标记的对象并标记它们的引用。所有被访问的对象都被记住,以便以后不再访问同一个对象两次。
4、以此类推,直到有未访问的引用(可以从根访问)为止。
5、除标记的对象外,所有对象都被删除。
参考:https://segmentfault.com/a/1190000018605776
八、浏览器缓存机制
在 Header 内的字段用于控制缓存机制 老方法 Expires,记录的绝对值 新方法 Cache-Control 多了一堆选项,记录的时间是相对值 获取缓存检测缓存是否过期,如果没过期取缓存,优先从内存,其次硬盘,如果过期,则与服务器协商缓存是否仍然可用,如果不可用则获取,可用取缓存。
参考:https://juejin.im/entry/5ad86c16f265da505a77dca4
九、js 本地对象、内置对象和宿主对象
本地对象包括如下内容:Object、Function、String、Array、Boolean、Number。
内置对象:Math。
宿主对象:BOM/DOM对象。
十、http 请求流程
参考满分回答:https://blog.csdn.net/wolf_love666/article/details/93600904
十一、vue与react区别,优缺点
参考:https://segmentfault.com/a/1190000016344599
十二、vue双向绑定原理
已经了解到vue是通过数据劫持的方式来做数据绑定的,其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持,达到监听数据变动的目的,无疑这个方法是本文中最重要、最基础的内容之一,要实现mvvm的双向绑定,就必须要实现以下几点:
- 实现一个数据监听器Observer,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者。
- 实现一个指令解析器Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数。
- 实现一个Watcher,作为连接Observer和Compile的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图。
- mvvm入口函数,整合以上三者。
defineProperty参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
十三、http常见状态码
状态码 | 含义 |
1** | 信息,服务器收到请求,需要请求者继续执行操作 |
2** | 成功,操作被成功接收并处理 |
3** | 重定向,需要进一步的操作以完成请求 |
4** | 客户端错误,请求包含语法错误或无法完成请求 |
5** | 服务器错误,服务器在处理请求的过程中发生了错误 |
十四、js继承类的方式
原型链继承、借助构造函数继承、原型式继承、经典继承、寄生式继承等等。
十五、this有哪几种指向
this的4种指向:
1、全局环境:window
2、对象环境:对象
3、构造函数环境:实例对象
4.、事件对象:调用者
总结:谁调用指向谁。
两种改变指向的方式:
1、call/apply 方式
2、定义局部变量的方式:var that = this;
十六、es6有哪些新特性
let,const,箭头函数,展开符,解构赋值,对象语法糖,字符串模板
十七、webpack相关配置属性
入口出口文件:
entry: {
index: __dirname + '/src/main.js', // __dirname表示当前项目的根路径。
goods: __dirname + '/src/goods.js'
},
output: {
path: __dirname + '/dist',
filename: '[name].js'
},
http代理:
devServer: {
contentBase: __dirname + '/dist',
port: 3000,
inline: true,
// 每当我们访问/a地址的时候,就把请求转发给target地址的服务器。
proxy: {
'/a': {
target: 'http://xushanxiang.com:3000',
secure: false,
changeOrigin: true
}
}
}
资源地图:devtool: ‘source-map’
本地web服务配置:
npm i webpack-dev-server@2.9.7 -g
// 安装的webpack-dev-server模块配置信息
devServer: {
contentBase: __dirname + '/dist', // 指定本地web服务器根路径
port: 3000,
inline: true // 当源文件改变后,自动在浏览器页面刷新
}
提取css 文件:
npm i extract-text-webpack-plugin -D
// webpack.config.js
let Ext = require('extract-text-webpack-plugin');
module: {
rules: [
{ test: /\.css$/, loader: Ext.extract('css-loader') },
{ test: /\.less$/, loader: Ext.extract('css-loader!less-loader') }
]
},
plugins: [
new Ext('index.css')
],
webpack配置别名
resolve:{
//配置别名,在项目中可缩减引用路径
alias: {
vue$: 'vue/dist/vue.esm.js',
'@': resolve('src'),
'&': resolve('src/components'),
'api': resolve('src/api'),
'assets': resolve('src/assets')
}
}
十八、模块化
nodejs使用的是commonjs规范
注意: nodejs虽然原生支持es6 但它并不支持 es6的import规范
导入:
let xx = require("xxx")
导出:
//一个文件内只能使用一次
module.exports = Object | Function | Array | String | Number | Boolean
//一个文件可以使用多次
exports.xxx = Object | Function | Array | String | Number | Boolean
下列写法不被允许 它会改变exports对象的引用导致程序运行出错
exports = {
xxx : "text"
}
es6的import规范
方式1
导入:
import XXX from "xxx"
导出:
export default xxx
该种方式一个文件内只能使用一次
方式2
导入:
import {XXX} from "xxx"
import {XXX as YYY} from "xxx" //将模块XXX给个别名为YYY
导出:
export let | const | var | function | class | interface XXX = ....
或者
let(可以是其他声明符) XXX = ....
export {XXX}
上述导出方式可以在同一个文件内使用多次
还有AMD规范和CMD规范
十九、什么是观察者模式
也称:发布订阅模式。
当对象间存在一对多关系时,这个对象的状态发生改变,则会自动通知它的依赖对象,进行广播通知。
比如:vue中子组件向父组件传值,子组件使用$emit自定义一个事件名称,父组件接收这个事件即可。还有中央事件总线 emit on。
二十、什么是mvc mvp mvvm
M 为数据层,V 视图层,C 逻辑层。
MVP(Model-View-Presenter)是MVC的改良模式,由IBM的子公司Taligent提出。和MVC的相同之处在于:Controller/Presenter负责业务逻辑,Model管理数据,View负责显示只不过是将 Controller 改名为 Presenter,同时改变了通信方向。
在MVP中,View并不直接使用Model,它们之间的通信是通过Presenter (MVC中的Controller)来进行的,所有的交互都发生在Presenter内部。
MVVM = MVP + 新特性(bind等)
二十一、怎么解决浏览器兼容问题
1、默认padding,margin不同
解决:自定义初始化css
2、在一个div中放一个img,但是img的下方和div之间有3px的间隔。
这是浏览器的解析问题,不同的浏览器间隔的还不同。
foxfire是5px,chrome是3px。
解决:/*方式一*/
div {font-size: 0;}
/*方式二*/
img{display: block;}
/*方式三*/
img{vertical-align: top;}
3、几个img标签放在一起的时候,有些浏览器会有默认的间距
解决:使用float属性为img布局
4、解决 ie9 以下浏览器对 html5 新增标签不识别的问题。
引入html5shiv.js文件
5、针对IE属性 css hack
6、-ms- -o- -webkit- -moz-
7、清除浮动 clearfix
8、边距重叠
解决:加一个父元素,父元素使用overflow: hidden;
9、IE9不能使用opacity
opacity: 0.5;
filter: alpha(opacity = 50);
filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);
二十二、如何进行性能优化,缩短页面加载时间
1、减少http请求
2、使用cdn加速
3、添加Expires头
4、将样式css放在头部,脚本script放在底部
5、使用外部的JavaScript和CSS
……
二十三、实现原生ajax的步骤
let xhr = new XMLHTTPRequest();
xhr.open('get', 'xxx.php?id=1',true);
xhr.send()
xhr.onreadystatechange = function() {
if(this.readyState == 4 && this.status == 200) {
console.log(this.response)
}
}
比较jQuery ajax、fetch、axios
二十四、Vue
- 如何创建全局组件和局部组件
- 如何定义props
- 如何对props进行类型验证
- 什么是计算属性
- 数据监听(watch)
- 常用指令 v-if v-show 循环迭代
- 定义过滤器 (局部 全局)
- 进行组件间通信的方式
- slot 内容插槽
- v-for的key作用
- vue-router
- vuex
- ……
二十五、函数的节流和防抖
类型 | 概念 | 应用 |
---|---|---|
节流 | 事件触发后每隔一段时间触发一次(可触发多次) | scroll,resize事件一段时间触发多次 |
防抖 | 事件触发动作完后,过一段时间触发一次 | scroll,resize事件触发完后一段时间触发 |
节流
// html 部分
<style>
*{padding:0;margin:0;}
.scroll-box{
width : 100%;
height : 500px;
background:blue;
overflow : auto;
}
.scroll-item{
height:1000px;
width:100%;
}
</style>
<body>
<div class="scroll-box">
<div class="scroll-item"></div>
</div>
</body>
// js 部分
let throttle = function (func, delay) {
let timer = null;
return function(){
if (!timer) {
timer = setTimeout(() => {
func.apply(this, arguments);
// 或者直接 func()
timer = null;
}, delay);
}
};
};
// 处理函数
function handle() {
console.log(arguments)
console.log(Math.random());
}
// 测试用例
document.getElementsByClassName('scroll-box')[0].addEventListener("scroll", debounce(handle,3000));
防抖
// html 部分同上
// js 部分
let debounce = function (fn, wait) {
let timeout = null;
return function () {
if (timeout !== null) clearTimeout(timeout);//如果多次触发将上次记录延迟清除掉
timeout = setTimeout(() => {
fn.apply(this, arguments);
// 或者直接 fn()
timeout = null;
}, wait);
};
}
// 处理函数
function handle() {
console.log(arguments)
console.log(Math.random());
}
// 测试用例
document.getElementsByClassName('scroll-box')[0].addEventListener("scroll", debounce(handle, 3000));
您还可参考阅读下面这些文章:
1、《JS 原生面经从初级到高级【近1.5W字】》https://segmentfault.com/a/1190000020759924
2、《前端开发面试知识点大纲》https://www.cnblogs.com/jill1231/p/jill1231_web_qianduankaifa.html
3、《前端面试知识点整理(附答案)》https://www.jianshu.com/p/0b2861bd2068
4、《中高级前端面试知识点汇总》https://www.jianshu.com/p/fd742b49a25c
5、《前端面试知识点》https://www.cnblogs.com/lvonve/p/11936026.html
发表回复