2019面试总结

2019-10-24  本文已影响0人  哈哈哈哈哈啊啊啊

一、 this指向问题

闭包

闭包指的是：能够访问另一个函数作用域的变量的函数（函数的嵌套）
优点：防止全局变量污染
缺点：造成内存泄漏

继承

http和https

Http与Https的区别
1、https协议需要到CA申请证书，一般免费证书较少，因而需要一定费用。(原来网易官网是http，而网易邮箱是https。)
2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
4、http的连接很简单，是无状态的。Https协议是由SSL+Http协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。(无状态的意思是其数据包的发送、传输和接收都是相互独立的。无连接的意思是指通信双方都不长久的维持对方的任何信息。)
可拓展，https的对称加密和非对称加密过程

子网掩码

dns

域名系统是互联网的一项服务，他作为将域名和ip地址相互映射的一个分布式数据库，能够使人更方便的访问互联网

mysql

创建表
create table tab_new like tab_old

混合开发遇到的问题

卡顿，版本控制

git 提交忽略文件

.gitignore

webpack打包工具

Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。
Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
Plugin：扩展插件，在 Webpack 构建流程中的特定时机会广播出对应的事件，插件可以监听这些事件的发生，在特定时机做对应的事情。

职业规划

event 有什么属性，可以用来干什么

svn

开发流程

计算机组成原理

线程和进程

！！！！以下有问题

generator * yield，生成器

iterator遍历器

遍历器（Iterator）是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。
2、Iterator的作用有三个：一是为各种数据结构，提供一个统一的、简便的访问接口；二是使得数据结构的成员能够按某种次序排列；三是ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of消费。
3、在ES6中，有些数据结构原生具备Iterator接口（比如数组），即不用任何处理，就可以被for...of循环遍历，有些就不行（比如对象）。原因在于，这些数据结构原生部署了Symbol.iterator属性（详见下文），另外一些数据结构没有。凡是部署了Symbol.iterator属性的数据结构，就称为部署了遍历器接口。调用这个接口，就会返回一个遍历器对象。

原型链

浏览器打开一个网站登录了，再打开另外一个窗口也能登录吗，为什么

vue 路由的实现原理

hash，history实现原理，手动修改路由，页面会不会变

mvvm

生命周期函数，各生命周期代表了什么意思，分别会进行什么操作

路由导航，前端验证token

image.png

什么时候用原生端开发比较好，什么时候用h5 开发比较好

APP原生和H5页面如何分辨

get和post 区别

慕课网：

observer 如何添加set和get方法，需要的添加

php.cn/js-tutorial-396048.html

虚拟dom原理

https://www.jianshu.com/p/af0b398602bc

tcp三次握手，四次牵手

https://blog.csdn.net/qq_38950316/article/details/81087809

0.1+0.2>0.3原因

js中的数字都是用浮点数表示的，并规定使用IEEE 754 标准的双精度浮点数表示。
IEEE 754 规定了两种基本浮点格式：单精度和双精度。

IEEE单精度格式具有24 位有效数字精度(包含符号号)，并总共占用32 位。

IEEE双精度格式具有53 位有效数字精度(包含符号号)，并总共占用64 位。

函数提升和变量提升， 域

https://www.cnblogs.com/oxiaojiano/p/7918967.html
由此可见函数提升要比变量提升的优先级要高一些，且不会被变量声明覆盖，但是会被变量赋值之后覆盖。

宏任务微任务

宏任务：setTimeout，setInterval，script，setImmediate，requestAnimationFrame
微任务：process.nextTick，Promise.then catch finally，MutationObserver

lodash的get方法

https://segmentfault.com/a/1190000015605531

职业规划

多学习前端方面的技术，拓展深度和广度，期望是学习到原理层面

做过什么是印象深刻的，最有成就感的

pk对战项目，开发时间只有1周，性能要求较高，复杂度也较高

平时都看什么书，有关技术的

大学什么科目比较好，说3个

cookie中都有什么

好未来都三个优点和缺点

什么比较好，原生js，vue

性能优化

https://www.cnblogs.com/qcloud1001/p/7561498.html
https://www.cnblogs.com/lanxiansen/p/10972802.html

http 协议

http 协议的特点：简单，灵活，无连接，无状态

http报文的组成部分

http方法

http状态码

持久连接

http有普通模式和keep-alive模式
普通模式：每个请求／应答，客户端和服务器都要新建一个连接，完成之后立即断开连接
持久连接模式：使客户端到服务器端的连接持续有效，当出现对服务器的后续请求时，keep-alive功能避免了建立或者重新建立连接1.1支持

管线化

请求1-》请求2-》请求3-》响应1-》响应2-》响应3
把请求打包，响应打包

outline,shadow

css实现三角形

https://www.cnblogs.com/linsinan/p/6928734.html
border-width
不需要的边设置成透明
.box
{
width:0px;
height:0px;
border-top:50px solid rgba(0,0,0,0);
border-right:50px solid rgba(0,0,0,0);
border-bottom:50px solid green;
border-left:50px solid rgba(0,0,0,0);
}

css如何开启硬件加速

.cube {
-webkit-transform: translate3d(250px,250px,250px)
rotate3d(250px,250px,250px,-120deg)
scale3d(0.5, 0.5, 0.5);
}
.cube {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
/* Other transform properties here */
}
https://www.jb51.net/css/572687.html

盒模型

https://www.cnblogs.com/chengzp/p/cssbox.html
IE盒模型 width= content+ padding+ border
标准盒模型 width= content+ padding+ border

设置两种盒模型

box-sizing:content-box; width就是content
box-sizing：border-box， width

js 获取宽高

bfc解决的问题

https://www.cnblogs.com/chengzp/p/cssbox.html

怎么取创建bfc

应用场景

垂直居中

vue两大特点

v-if v-show

v-show只是在修改元素的css样式，也就是display的属性值，元素始终在Dom树上
v-if是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点

H5调试

vue实现复用

数组中有对象如何实现快速去重

有什么要问他

git stash，获取暂存内容

git reset和git revert

https://blog.csdn.net/yxlshk/article/details/79944535

改变this指向问题

https://www.cnblogs.com/web-chuan/p/9096356.html

防抖，节流

防止抖动和防止节流

应用场景，控制用户点击次数
滚动时，进行复杂数据处理或者样式变化

// 防止节流，每隔wait时间内执行一次（将多次执行变成每隔一段时间执行）
      function text(){
          console.log(111)
      }
      function throttle(fn,wait,immediate){
        var timer=null;
        return function(){
            var args = arguments
            if(immediate) {
                fn.apply(this, args);
                immediate = false;
            }
            if(!timer) {
                timer = setTimeout(() => {
                    fn.apply(this, args);
                    timer = null;
                }, wait);
            }
        }
      }    
      $("#throttle").click(throttle(text,2000,true))

      // 防止抖动,将多次执行变成最后一次执行
      function demo(){
          console.log(222)
      }
      function debounce(fn, wait, immediate){
          var timer = null;
          return function(){
            var args = arguments
            if(immediate) {
                fn.apply(this, args);
                immediate = false
            }
            clearTimeout(timer)
            timer = setTimeout(function(){
                fn.apply(this, args);
            },wait)
          }
      }
      $("#debounce").click(debounce(demo,2000,true))

控制500ms 内scroll 只触发一次，触发时计算当前滚的位置，修改active样式

<template>
    <div>
        <Header></Header>
        <div class="content container">
            <keep-alive>
                <router-view v-if="$route.meta.keepAlive"/>
            </keep-alive>
            <router-view v-if="!$route.meta.keepAlive" />
        </div>
        <div class="mask" v-if="maskShow"></div>
        <phone-preview v-if="phonePreviewData.isShow" :urlData="phonePreviewData"></phone-preview>
    </div>
</template>

<script>
    import Header from './header'
    import ucenter from '../../ucenter/config'
    import phonePreview from '../personalShow/phonePreview.vue'
    export default {
        components: {
            Header,
            phonePreview,
        },
        data() {
            return {
                // isCollapse: false, // 控制左侧菜单折叠
                maskShow:false,
                phonePreviewData:{},

            };
        },
        mounted(){
            let box = document.getElementsByClassName('container')[0];
            box.addEventListener('scroll', this.scrollThrottle(this.onScrollHandler, 5000, true));
            this.$bus.$on("maskShow",(data)=>{
                this.maskShow = data;
            })
            this.$bus.$on("phonePreview",(data)=>{
                this.phonePreviewData = data;
            })
        },
        methods:{
            onScrollHandler(e) {
                console.log('ceshiyixia')
                // resize节流 500ms内只能触发一次
                var modules = document.getElementsByClassName('module-box');
                let curModules = [];
                for(let i = 0; i < modules.length; i++) {
                    let curModule = document.getElementsByClassName(modules[i].id)[0];
                        console.log(curModule,'curModule')
                        curModule.classList.remove("active");
                    if(e.target.scrollTop > modules[i].offsetTop - 50 && e.target.scrollTop < (modules[i].offsetTop + modules[i].offsetHeight)) {
                        curModules.push(curModule)
                        curModule.classList.add("active");
                    } else if(e.target.scrollTop === 0) {       // 滚动至顶部
                        modules[0].classList.add("active");
                    } else if(e.target.scrollTop + e.target.offsetHeight === e.target.scrollHeight) {   // 滚动至底部
                    }
                    if(curModules.length > 1) {
                        curModules.forEach((item, index, arr) => {
                            if(index !== arr.length - 1) {
                                item.classList.remove("active");
                            }
                        })
                    }
                }
            },
            scrollThrottle(fn, wait, immediate) {
                let timer = null;
                return function() {
                    let args = arguments;
                    if (immediate) {
                        fn.apply(this, args);
                        immediate = false;
                    }
                    if (!timer) {
                        timer = setTimeout(() => {
                            fn.apply(this, args);
                            timer = null;
                        }, wait);
                    }
                }
            },
        }
    };
</script>

git rebase

指令

promise的原理

https://www.jianshu.com/p/b4f0425b22a1

原地排序,不占用其他的内存空间

fn.sleep(10).eat()

await属于宏任务还是微任务

await后边的放到微任务中，相当于promise.then
https://www.cnblogs.com/wangxi01/p/11190608.html

console问题，作用域问题

箭头函数问题

node多线程

原生实现bind方法

cookie可以跨子域吗，cookie中 有什么

在地址栏输入url按回车键，都进行了什么操作

如何解决跨域，后端如何设置‘

data的数据结构

如何提高用户体验和性能优化

事件流 冒泡，事件委托live.dekegete.on. 原理是冒泡

es6，set,map

用的vue版本，3.0的了解

首屏优化

js实现判断两个二叉树是否完全相同

js实现bind

js实现reduce

js实现map

vue相关，双向绑定原理，虚拟DOM远离，为什么要用key，data为什么是个方法

js实现深拷贝

js实现二分查找

vuex

new操作符具体干了什么呢?其实很简单，就干了三件事情。

var obj = {};
obj.proto = Base.prototype;
Base.call(obj);

promise

set，Map

  1. 可以遍历，方法有add, delete,has

上一篇下一篇

猜你喜欢

热点阅读