基础html+CSS
- 行内元素有哪些?块级元素有哪些?CSS的盒模型?
- 说一说html5和css有哪些新特性，如何区分HTML 和 HTML5？
- HTML5存储类型有什么区别，你知道的页面存储方式？
- meta viewport原理是什么？
- 什么是CSS 预处理器？
- 常用的布局方式有哪些？
- CSS 有个content 属性？有什么作用？
CSS 的 content 应用在 before/after 伪元素上，用来插入生成的内容。最常见是利用伪元素清除浮动 防止高度塌陷问题。 设置父元素overflow:hidden/auto; .clearfix::after{ content:" ", display:block; clear:both } - 为什么要清除浮动，清除浮动的几种方式，各自的优缺点
- CSS3新增伪类有那些
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type
p:only-of-type
p:only-child
p:nth-child(2)
:enabled、:disabled 控制表单控件的禁用状态。
:checked，单选框或复选框被选中。
- rem布局字体太大怎么处理?
- 如何让根目录字体大小随屏幕大小变化而适配，基准值设置为多少？
- 如何让一个div上下左右居中？
（1）position:absolute;left:50%;top:50%; transform:translate(-50%,-50%);
（2）position:absolute;left:0;top:0;bottom:0;right:0; margin:auto;
（3）width:200px;height:200px;border: 1px solid red;background:#99f;
position:absolute;left:50%;top:50%; margin-left:-100px;margin- top:-100px;
必备技能js
简单
- js 数据类型有啊些，类型值的区别
基本类型null 布尔 undefined string number symbol存储在栈中
引用类型object存储在堆中
*null和undefined的区别？
null是一个表示"无"的对象，转为数值时为0；
undefined是一个表示"无"的原始值，转为数值时为NaN。
undefined：
（1）变量被声明了，但没有赋值时，就等于undefined。
（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
（3）对象没有赋值的属性，该属性的值为undefined。
（4）函数没有返回值时，默认返回undefined。
null：
（1） 作为函数的参数，表示该函数的参数不是对象。
（2） 作为对象原型链的终点。
*==和===有什么区别？
===不需要进行类型转换，只有类型相同并且值相等时，才返回 true.
==如果两者类型不同，首先需要进行类型转换 - if条件里面返回
false的几种情况
false，null，0，“”，undefined，NaN - 如何判断一个变量是不是数组
使用 Array.isArray 判断，如果返回 true, 说明是数组
使用 instanceof Array 判断，如果返回true, 说明是数组
使用 Object.prototype.toString.call 判断，如果值是 [object Array], 说明是数组
通过 constructor 来判断，如果是数组，那么 arr.constructor === Array. (不准确，因为我们可以指定 obj.constructor = Array)
处。
- 数组常用方法
改变原数组：
尾部删除pop()，尾部添加push()，头部删除shift()，头部添加unshift()
排序sort()，颠倒数组元素reverse()，删除或插入元素splice();
不会改变元素组：
合并数组concat()，拼接数组元素join()，截取元素slice()
indexOf() , lastIndexOf()，toString()
- 解释一下作用域链
-
this的指向
全局范围：指向window（严格模式下不存在全局变量，指向undefined）;
普通函数调用：指向window;
构造函数调用：指向new出来的对象；
对象方法调用：指向最后调用它的对象；
显示设置this：call，apply方法显示将this指向第一个参数指明的对象
-
forEach、for…in和for…of
forEach，得到的是元素
var array = [1,2,3,4,5,6,7];
array.forEach(function(e){
console.log(e);
});
// 结果: 1,2,3,4,5,6,7
for…in 用for in的方遍历数组，得到的是索引;也可以对enumerable对象操作,得到的是索引。
var array = [1,2,3,4,5,6,7];
for(let index in array) {
console.log(index,array[index]);
};
// 结果: 0 1,1 2,2 3,3 4, 4 5, 5 6 ,6 7
var table = {
a : 10,
b : true,
c : "haha"
};
for(let index in table) {
console.log(index, table[index]);
}
//结果: a 10 ,b true,c haha
for…of（ES6中新增加的语法）for of不能对象用, 用于遍历一个迭代器，如数组,得到的是元素：
let letter = ['a', 'b', 'c'];
letter.size = 3;
for (let letter of letters) {
console.log(letter);
}
// 结果: a, b, c
进阶
- 谈一下你对js
面向对象的理解（开放问题，可以从封装、继承、多态，能够解释到有多少种实现方式、优缺点是什么。能说出近几年流行的解决方案是什么，这就是加分。再介绍下 extends 或者 mixin 的实现甚至可以衍生到JavaScript 的模块化发展甚至到为什么现在 TS 如此流行，那么可以说到这一环节解答的就非常棒了。） - javascript 面向对象实现
继承的几种方式？ - prototype和 __ proto__ 的关系是什么（原型链）？
- 什么闭包，解释一下为什么会产生闭包（谈到作用域、作用域链）
闭包可以解决什么问题
闭包就是能够读取其他函数内部变量的函数。
要理解闭包，首先必须理解Javascript特殊的变量作用域。
闭包的用途:
1、可以读取函数内部的变量
2、让这些变量的值始终保持在内存中
使用闭包的注意点：
1、由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
2、闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
1、原型链继承
核心： 将父类的实例作为子类的原型
缺点： 父类新增原型方法/原型属性，子类都能访问到，父类一变其它的都变了
2、构造继承
核心：使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类（没用到原型）
缺点： 方法都在构造函数中定义， 只能继承父类的实例属性和方法，不能继承原型属性/方法，无法实现函数复用，每个子类都有父类实例函数的副本，影响性能
3、组合继承
核心：通过调用父类构造，继承父类的属性并保留传参的优点，然后再通过将父类实例作为子类原型，实现函数复用
缺点：调用了两次父类构造函数，生成了两份实例（子类实例将子类原型上的那份屏蔽了）
4、寄生组合继承
核心：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点
缺点：堪称完美，但实现较为复杂
- 同步和异步（简要阐述）
同步：由于js单线程，同步任务都在主线程上排队执行，前面任务没执行完成，后面的任务会一直等待；
异步：不进入主线程，进入任务队列，等待主线程任务执行完成，开始执行。最基础的异步操作setTimeout和setInterval，等待主线程任务执行完，在开始执行里面的函数；
- 如何实现一个
promise，promise的原理，以及它的两个参数是什么？
Promise的几种状态、如何实现的、什么情况下catch不到错误？ -
map和set有没有用过，如何实现一个数组去重，map数据结构有什么优点？ - 实现一个深克隆
-
call, apply, bind区别
call和apply都是为了解决改变this的指向。作用都是相同的，只是传参的方式不同。
除了第一个参数外，call可以接收一个参数列表，apply只接受一个参数数组。
bind和其他两个方法作用也是一致的，只是该方法会返回一个函数。并且我们可以通过bind实现柯里化。
框架、项目构建、插件、库
- 简单阐述一下vue的生命周期
beforeCreate、created（此时需说明可以在created中首次拿到data中定义的数据）、beforeMount、mounted（此时需说明dom树渲染结束，可访问dom结构）、beforeUpdate、updated、beforeDestroy、destroyed
-
父子组件如何通信的？
-
vue slot是做用与使用?
-
有没有封装过axios？
-
如何在axios中添加登陆验证？
-
vue-router如何做历史返回提示？
-
computed 和 watch 的区别和运用的场景？
computed： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；
watch： 更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；
运用场景：
- 当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；
- 当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
- vue-router 路由模式有几种？
vue-router 有 3 种路由模式：
hash、history、abstract
hash:使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器；
history :依赖 HTML5 History API 和服务器配置。具体可以查看 HTML5 History 模式；
abstract :支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式.
- 小程序的App()生命周期中三个事件可以监听:onLaunch，onShow，onHide。
onLaunch：小程序加载完成之后调用,全局只触发一次
onShow： 小程序启动，或者从后台到前台会触发一次
onHide：小程序从前台到后台会触发一次
-
vue与react的对比,如何选型？从性能，生态圈，数据量，数据的传递上，作比较
-
vuex有哪几种属性？
有五种，分别是 State、 Getter、Mutation 、Action、 Module -
jq中事件冒泡、事件捕获是什么
-
jquery的 jquery.extend() 、jquery.fn和 jquery.fn.extend()分别是做什么的？
团队协同、环境搭建、部署、git/svn/github/postman/抓包工具、补充
- 自己亲手构建的项目流程，用到哪些东西？
- 工程化怎么管理的?
- 常用git、svn命令，区别
- 常用的linux命令
- 项目上线流程是怎样的
- 怎么处理跨域，具体怎么做？
- 用过Nginx吗？都用过哪些？
- 多页面入口打包， webpack如何抽离公共部分
- 简述Node.js的适用场景？
- Node.js单线程、其应用场景，如何实现高并发，讲讲异步I/O、事件循环以及其优先级
- 是否了解公钥加密和私钥加密。
- 前后端常见的几种鉴权方式。
鉴权是指验证用户访问系统的权力
常用的鉴权有四种：
1.HTTP Basic Authentication
2. session-cookie
3.Token 验证
4.OAuth(开放授权)
数据结构&算法
简单
- 写出你知道的所有数组去重的方法：
const arr = ['a','b','22','a',undefined,'bc','haha','22',true,undefined]; - ["1", "2", "3"].map(parseInt) 答案是多少
[1, NaN, NaN]
进阶
- 写一个函数mulify, 使得mul(2)(3)(4) === 24
function mul(x) {
const result = (y) => mul(x * y);
result.valueOf = () => x;
return result;
}
console.log(mul(3)(2)(4))
-> 24
项目优化、安全
-
不想让别人盗用你的图片，访问你的服务器资源该怎么处理？
-
网络、数据、渲染和DOM操作方面优化项目
- 网络方面
1.减少http请求(合并js、css文件、使用雪碧图、使用base64表示简单的图片)
2.减小资源体积(gzip压缩，js混淆，css、img压缩，)
3.缓存(DNS缓存、CDN部署与缓存、http缓存)
4.移动端优化
- 使用长cache，减少重定向
- 首屏优化，保证首屏加载数据小于14kb
- 不滥用web字体
- 渲染和DOM操作方面
1.优化网页渲染
- css的文件放在头部
- js文件放在尾部或者异步
- 尽量避免內联样式
2.DOM操作优化
- 避免在document上直接进行频繁的DOM操作
- 使用classname代替大量的内联样式修改
- 尽量使用css动画
- 适当使用canvas
- 尽量减少css表达式的使用
- 使用事件代理
3.操作细节注意
- 正确的css前缀的使用
- 缩短css选择器，多使用伪元素等帮助定位
4.移动端优化
- 长列表滚动优化
- 函数防抖和函数节流
- 使用touchstart、touchend代替click
- HTML的viewport设置
- 开启GPU渲染加速
- 数据方面
1.图片加载处理：
- 图片预加载
- 图片懒加载
- 首屏加载时进度条的显示
2.异步请求的优化：
- 使用正常的json数据格式进行交互
- 部分常用数据的缓存
- 数据埋点和统计
计算机网络
- 为什么会有同源策略？
这里的同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。
指一段脚本只能读取来自同一来源的窗口和文档的属性。 - http、https、以及websocket的区别
- tcp建立连接、释放连接的过程
- 关于http协议
- 主要特点
- URI和URL的区别
- 请求消息Request组成部分（请求行、请求头部、空行、请求数据也叫主体）
- 响应消息Response组成部分(状态行、消息报头、空行和响应正文。)
- HTTP之状态码
1xx：指示信息--表示请求已接收，继续处理
2xx：成功--表示请求已被成功接收、理解、接受
3xx：重定向--要完成请求必须进行更进一步的操作
4xx：客户端错误--请求有语法错误或请求无法实现
5xx：服务器端错误--服务器未能实现合法的请求- HTTP请求方法( GET, POST 和 HEAD,OPTIONS, PUT, DELETE, TRACE 和CONNECT方法),有什么区别？
学习习惯
- 源码提交的网站，提交频率
- 写博客的习惯
- 说说最近最流行的一些东西，学习的网站
- 你认为作为一个优秀的前端开发，哪些方面的技术知识很重要
网友评论