前端面试整理

2019-08-13  本文已影响0人  小雨雪smile

基础html+CSS

  p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
  p:last-of-type
  p:only-of-type
  p:only-child  
  p:nth-child(2)
  :enabled、:disabled 控制表单控件的禁用状态。
  :checked，单选框或复选框被选中。

（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

简单
使用 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()

全局范围：指向window（严格模式下不存在全局变量，指向undefined）;
普通函数调用：指向window;
构造函数调用：指向new出来的对象；
对象方法调用：指向最后调用它的对象；
显示设置this：call，apply方法显示将this指向第一个参数指明的对象

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
进阶
闭包就是能够读取其他函数内部变量的函数。
要理解闭包，首先必须理解Javascript特殊的变量作用域。
闭包的用途:
1、可以读取函数内部的变量
2、让这些变量的值始终保持在内存中

使用闭包的注意点：
1、由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
2、闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。


1、原型链继承
核心： 将父类的实例作为子类的原型
缺点：  父类新增原型方法/原型属性，子类都能访问到，父类一变其它的都变了

2、构造继承
核心：使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类（没用到原型）
缺点： 方法都在构造函数中定义， 只能继承父类的实例属性和方法，不能继承原型属性/方法，无法实现函数复用，每个子类都有父类实例函数的副本，影响性能

3、组合继承
核心：通过调用父类构造，继承父类的属性并保留传参的优点，然后再通过将父类实例作为子类原型，实现函数复用
缺点：调用了两次父类构造函数，生成了两份实例（子类实例将子类原型上的那份屏蔽了）

4、寄生组合继承

核心：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点
缺点：堪称完美，但实现较为复杂

同步：由于js单线程，同步任务都在主线程上排队执行，前面任务没执行完成，后面的任务会一直等待；
异步：不进入主线程，进入任务队列，等待主线程任务执行完成，开始执行。最基础的异步操作setTimeout和setInterval，等待主线程任务执行完，在开始执行里面的函数；

call 和apply 都是为了解决改变this的指向。作用都是相同的，只是传参的方式不同。
除了第一个参数外，call 可以接收一个参数列表，apply只接受一个参数数组。
bind和其他两个方法作用也是一致的，只是该方法会返回一个函数。并且我们可以通过bind实现柯里化。

框架、项目构建、插件、库

beforeCreate、created（此时需说明可以在created中首次拿到data中定义的数据）、beforeMount、mounted（此时需说明dom树渲染结束，可访问dom结构）、beforeUpdate、updated、beforeDestroy、destroyed

computed： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；
watch： 更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；
运用场景：

  • 当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；
  • 当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

vue-router 有 3 种路由模式：hash、history、abstract
hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器；
history : 依赖 HTML5 History API 和服务器配置。具体可以查看 HTML5 History 模式；
abstract : 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式.

onLaunch：小程序加载完成之后调用,全局只触发一次
onShow： 小程序启动，或者从后台到前台会触发一次
onHide：小程序从前台到后台会触发一次

团队协同、环境搭建、部署、git/svn/github/postman/抓包工具、补充

鉴权是指验证用户访问系统的权力
常用的鉴权有四种：
1.HTTP Basic Authentication
2. session-cookie
3.Token 验证
4.OAuth(开放授权)

数据结构&算法

简单

进阶

function mul(x) {
    const result = (y) => mul(x * y); 
    result.valueOf = () => x;
    return result;
}
console.log(mul(3)(2)(4))
-> 24

项目优化、安全

  • 网络方面
    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数据格式进行交互
    - 部分常用数据的缓存
    - 数据埋点和统计

计算机网络

  1. 主要特点
  2. URI和URL的区别
  3. 请求消息Request组成部分（请求行、请求头部、空行、请求数据也叫主体）
  4. 响应消息Response组成部分(状态行、消息报头、空行和响应正文。)
  5. HTTP之状态码
    1xx：指示信息--表示请求已接收，继续处理
    2xx：成功--表示请求已被成功接收、理解、接受
    3xx：重定向--要完成请求必须进行更进一步的操作
    4xx：客户端错误--请求有语法错误或请求无法实现
    5xx：服务器端错误--服务器未能实现合法的请求
  6. HTTP请求方法( GET, POST 和 HEAD,OPTIONS, PUT, DELETE, TRACE 和CONNECT方法),有什么区别？

学习习惯

上一篇 下一篇

猜你喜欢

热点阅读