前端小本本

livaha
237 阅读5分钟

CSS

你是怎么理解HTML5的？

  • 语义标签类
  • 音视频处理
  • canvas/webGL
  • history API
  • requestAnimationFrame
  • 地理位置
  • web socket

CSS3

  • 常规
  • 动画
  • 盒子模型 -　响应式布局

JavaScript

-　ES 3/5/6/7/8/9

  • DOM
  • BOM
  • 设计模式
  • 底层原理
    • 堆栈内存
    • 闭包作用域AO/VO/GO/EC/ECSTACK
    • 面向对象OOP
    • THIS
    • EventLoop
    • 浏览器渲染原理
    • 回流重绘

网络通信层

  • AJAX/Fetch/axios
  • HTTP1.0/2.0
  • TCP
  • 跨域处理方案
  • 性能优化

React

  • 基础知识
  • 核心原理
  • react-router-dom
  • redux
  • react-redux
  • dva
  • umi
  • mobix
  • antd
  • antd pro
  • SSR
  • 优化

CSS经典面试题

1 盒子水平垂直居中的五大方案

blog.csdn.net/weixin_4302…

看看display:grid是否可以

2 CSS中的盒模型

blog.csdn.net/qq_42720683…

blog.csdn.net/m0_37585915…

  • 标准盒模型 box-sizing:content-box
  • IE盒模型 box-sizing:border-box （喜欢这个）
  • FLEX盒模型
  • 多列布局

3 掌握几大经典布局方案

左右固定，中间自适应

CSS里面尽可能少写表达式

segmentfault.com/a/119000001…

4 移动端响应式布局开发的方案

  • @media 媒体查询 (一套项目)
  • rem(2套项目，PC固定大小，移动端用rem) 大众
  • flex (实现某些效果)
  • vh/vw (% 百分比布局) 小众
课后作业

1 使用CSS,让一个div消失在视野中，发挥想象力

2 请说明z-index的工作原理，适用范围

3 谈谈你对HTML5的理解

4 如何使一个div里面的文字垂直居中，且该文字的大小根据屏幕大小自适应

5 不考虑其它因素，下面哪种的渲染性能比较高

.box a{...}
a{...}  //这种

JS

JS经典面试题

堆栈内存

1 BAT笔试题中几道关于堆栈内存和闭包作用域的题

//example 1
let a={}, b='0', c=0;
a[b] = '成功';
a[c] = '失败';
console.log(a[b]);
/*答案解析：失败
要理解几点：数组和对象是存储在内存地址里的；对象的属性是字符串，也可以是Symbol值，bool值，null，undefined;属性数字和引用类型会转为字符串。
    '0'和0作为属性值是一样的，它的值都存在同一个地址中。
堆：存储引用类型值的空间
栈：存储基本类型值和指定代码的环境
*/

==>对象与数组的区别

//example 2
let a={}, b=Symbol('1'), c=Symbol('1');
a[b] = '成功';
a[c] = '失败';
console.log(a[b])
/*答案解析：成功
Symbol实例值都是唯一的。ES6中key可以用Symbol值。
所以a[b],a[c]是两个地址
*/

==>自己实现Symbol

//example 3
let a={}, b={n:'1'}, c={n:'2'};
a[b] = '成功';
a[c] = '失败';
console.log(a[b])
/*答案解析：失败
引用值转为字符串b,c转为字符串都是"[object Object]",
所以a[b],a[c]是两个地址
*/

==>Object.prototype.toString方法在项目中的应用，怎么检查出数据类型的

==> valueOf和toString的区别

闭包

var test = (function(i){
    return function(){
        alert(i*2);
    }
})(2);
test(5);
/*答案：'4'
alert出来的结果会转化为字符串00
*/

var a=0,b=0;
function A(a){
    A = function(b){
        alert(a+b++);
    };
    alert(a++);
}
A(1);
A(2);
/*答案：'1','4' */

面向对象和函数闭包的考察

function Foo(){
    getName = function(){
        console.log(1);
    }
    return this;
}
Foo.getName = function(){
    console.log(2);
}
Foo.prototype.getName = function(){
    console.log(3);
}
var getName = function(){
    console.log(4);
}
function getName(){
    console.log(5);
}
Foo.getName();//2
getName();//4
Foo().getName();//1
getName();//1
new Foo.getName();//2
new Foo().getName();//3
new new Foo().getName();3

/*
变量提升
*/

Event Loop

async function async1(){
    console.log('async1 start')
    await async2();
    console.log('async1 end')
}
async function async2(){
    console.log('async2')
}
console.log('script start')
setTimeout(function(){
    console.log('setTimeout')
},0)
async1();
new Promise(function(resolve){
    console.log('promise1')
    resolve()
}).then(function(){
    console.log('promise2')
})
console.log('script end')
/*
宏任务：定时器,事件绑定，ajax
微任务：promise async await
await会阻塞后面的代码
答案 ：
script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout
*/

微信截图_20210408113352.png

课后作业

function A(){
    alert(1)
}
function Func(){
    A=function(){
        alert(2)
    }
    return this;
}
Func.A=A
Func.prototype={
    A:()=>{
        alert(3)
    }
}
A();//1
Func.A();1
Func().A();2
new Func.A(); 1
new Func().A();3
new new Func().A();// 报错，箭头函数不能被new，因为箭头函数没有原型链


var x=2;
var y={
    x:3,
    z:(function(x){
        this.x*=x;
        x+=2;
        return function(n){
            this.x*=n;
            x+=3;
            console.log(x);
        }
    })(x)
}
var m=y.z;
m(4);
y.z(5);
console.log(x,y.x);

==号的判断

==和=== 的区别： ==数据类型可以不一样，但===必须一样

对象==字符串 对象.toString()变为字符串

null == undefined 相等，但是和其它值比较就不再相等了

NaN == NaN 不相等，NaN与任何值都不相等

剩下的都是转换为数字

题：
var a = ? //a是多少时，下面的条件成立
if(a == 1 && a == 2 && a == 3){
    console.log('条件成立')
}

方法1

//对象比较时，会先转为字符串
var a={
    i:0,
    toString(){ //valueOf也可以
        return ++this.i;
    }
}
if(a==1 && a==2 && a==3){
    console.log('条件成立')
}

方法2

var a = [1,2,3]
a.toString = a.shift;
if(a == 1 && a == 2 && a == 3){
    console.log('条件成立')
}

方法3

//数据劫持实现
var i = 0;
Object.defineProperty(window,'a',{
    get(){
        return ++i;
    }
})
if(a==1 && a==2 && a==3){
    console.log('条件成立')
}

写出下面代码输出的结果

var x = 0, y = 1;
function fn(){
    x += 2;
    fn = function(y){
        console.log(y + (--x))
    }
    console.log(x,y)
}
fn(3);
fn(4);
console.log(x,y)

写出下面代码输出的结果

setTimeout(()=>{
    console.log(1)
},20);
console.log(2);
setTimeout(()=>{
    console.log(3)
},10)
console.log(4);
console.time('AA')
for(let i = 0; i < 90000000; i++){
    //do something
}
console.timeEnd('AA');
console.log(5)
setTimeout(()=>{
    console.log(6)
},8)
console.log(7);
setTimout(()=>{
    console.log(8)
},15)
console.log(9)

react

  • create-react-app
    • 配置
    • 优化
  • react 基础
    • JSX语法（虚拟DOM）
    • 状态
    • 属性
    • ref
    • 组件
    • 生命周期
    • PureComponent
    • Hooks
    • ...
  • react-router-dom
  • redux
    • redux
    • react-redux
    • 中间件
    • ...
  • dva
  • umi
  • typescript
  • UI组件
  • SSR服务器渲染next.js

未整理

MCV 和MVVM的区别

跨域问题的解决方案和实现原理

JSONP跨域解决方案的底层原理

CROS跨域资源共享

基于HTTP Proxy实现跨域请求

nginx反向代理

组件间的通信

vue

  • 属性传递
  • 发布订阅：$on/$emit
  • Provide/inject
  • slot
  • $parent/$children
  • vuex

react

  • 属性
  • 发布订阅
  • React.createContext
  • redux/react-redux/mobix/dva
服务器设置session 服务器返回给客户端的信息，在响应头中带着set-cookie='connect.sid'
客户端会把信息种植到本地的cookie中httponly
客户端再次身服务器发送请求的时候，会默认在请求头中cookies把connect.sid传递发给服务器

算法

数组去重和排序的多种实现算法

let arr = [12,23,12,15,25,23,25,14,16];
arr.sort((a,b) => a-b);
let str = arr.join('@')+'@';
let reg = /(\d+@)\l*/g;
arr = [];
avatar
文章
阅读
粉丝