美文网首页
2021面经不易懂笔记

2021面经不易懂笔记

作者: JLong | 来源:发表于2021-03-04 08:49 被阅读0次

    用TCP协议发送时,由于TCP是数据流协议,因此不存在包大小的限制(暂不考虑缓冲区的大小)


    HTTP/2 头压缩算法 —— HPACK

    它对header进行压缩,消除了多余的 header 字段,将漏洞限制到已知的安全攻击,并且在受限的环境中具有有限的内存需求


    vue 是单向数据流

    也就是数据总是从父组件传递到子组件中,子组件无权修改父组件中的数据。因为当父组件 可能存在多个子组件,假如子组件可以修改父组件的数据,那么会导致其他依赖父组件的子组件都会受到影响。


    div块中高度总是宽度的一半

    height: 0;12 padding: 25% 0;


    项目中为啥用vuex?什么场景下才用得到?有没有提前规划好哪些模块使用vuex?

    由于传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。这样通常会导致代码无法维护。所以我们需要把组件的共享状态抽取出来,以一个全局单例模式管理。在这种模式下,我们的组件树构成了一个巨大的“视图”,不管在树的哪个位置,任何组件都能获取状态或者触发行为!另外,通过定义和隔离状态管理中的各种概念并强制遵守一定的规则,我们的代码将会变得更结构化且易维护。

    由于传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。所以需要抽离出组件的共享状态,以全局单例模式存储起来,使项目状态集中式管理以及结构化和更易维护。

    1 + []   // '1'    1+ ['a'] // '1a'    1+ [1,2]  //  '11,2'

    复杂数据类型在隐式转换时会先转成String,然后再转成Number运算


    session落地方案

    1 基于nginx的ip_hash策略来进行负载均衡,那么相同ip的机子,每一次请求的时候,都会被请求到同一机子上。

    2 借助一些mysql,redis,mongodb这些数据库来进行集中式处理,将相应的session存入这些地方



    session储存在内存当中,如果有两台服务器,会出现什么问题,怎么解决

    session丢失 不一致问题,用redis达到一致或者改成用jwt,session只存在一个服务器,在负载均衡的作用下,用户会被随机打到A和B上,所以会出现有时登陆得了,有时登陆不了的情况。

    首屏加载

    dns预解析、使用缓存、使用cdn内容分发加载vue、vue-router等资源、外部导入js,css文件,css放在头部,js放在尾部,js预加载,图片懒加载,图片使用css sprite,通过background-img、background-repeat、background-position控制,js文件抽离公共代码,尽量减少重绘和重排,减少dom节点操作,减少http请求。


    for、forEach、map的性能区别

    for > forEach > map

    map 会返回一个等长数组,forEach 不会,所以 forEach 大于 map


    cookie怎么加入token

    js 创建 cookie 是用 document.cookie = 'token=221212fsfsfafas'

    这里有个更方便的方法,也是更安全的。

    让后端在接口的返回值 header 里添加 set-Cookie,这样的话浏览器会自动把 token 设置到 cookie 里。

    还有,如果接口的返回值 header 里有设,Http-Only: true 的话,js 里是不能直接修改 cookie 的,这样更安全点。


    vue-router

    两种模式: hash和history两种

    hash模式就是通过location.hash拿到值,调用onhashchange方法监听url变化

    history模式是利用interface在HTML5中新增的方法History 

    工作流程有如下几步

    1. url改变

    2. 触发监听事件

    3. 改变vue-router里面的current变量

    4. 监视current变量(变量的监视者)

    5. 获取对应的组件

    6. 调用vue实例render() 更新视图


    Vue性能优化

    分为四个:编码阶段/SEO/打包阶段/用户体验

    编码阶段

    尽量减少data中的数据,data中的数据都会增加getter和setter,会收集对应的watcher

    v-if和v-for不能连用

    如果需要使用v-for给每项元素绑定事件时使用事件代理

    SPA 页面采用keep-alive缓存组件

    在更多的情况下,使用v-if替代v-show

    key保证唯一

    使用路由懒加载、异步组件

    防抖、节流

    第三方模块按需导入

    长列表滚动到可视区域

    动态加载图片懒加载

    SEO优化

    预渲染

    服务端渲染SSR

    打包优化

    压缩代码

    Tree Shaking/Scope Hoisting

    使用cdn加载第三方模块

    多线程打包happypack

    splitChunks抽离公共文件

    sourceMap优化

    用户体验

    骨架屏PWA

    还可以使用缓存(客户端缓存、服务端缓存)优化、服务端开启gzip压缩等。


    SSR

    服务端渲染:

    将Vue在客户端把标签渲染成HTML的工作放在服务端完成,然后再把html直接返回给客户端。

    优点:

    SSR有着更好的SEO、并且首屏加载速度更快等优点。

    缺点:

    比如我们的开发条件会受到限制,服务器端渲染只支持beforeCreate和created两个钩子,当我们需要一些外部扩展库时需要特殊处理,服务端渲染应用程序也需要处于Node.js的运行环境。

    服务器需要有更大的负载需求


    Vue2.0组件通信:

    父子:prop/emit

    获取实例:$parent、$children

    z总线:Vue.prototype.$bus = new Vue

    跨组件:Vuex/$attrs、$listeners、Provide、inject



    Vue中组件生命周期调用顺序

    组件的创建到渲染顺序是:先父后子,渲染完成的顺序是:先子后父。

    组件的销毁操作是:先父后子,销毁完成的顺序是:先子后父。

    加载过程:

    父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount- >子mounted->父mounted

    子组件更新:

    父beforeUpdate->子beforeUpdate->子updated->父updated

    父组件更新:

    父 beforeUpdate -> 父 updated

    销毁:

    父beforeDestroy->子beforeDestroy->子destroyed->父destroyed


    keep-alive:

    实现组件缓存有两个方法:

    include: 参数可以是字符串或者正则表达式,符合匹配的组件会被缓存

    exclude:参数可以是字符串或者正则表达式,不符合匹配的组件会被缓存

    有两个钩子:activated,deactivated

    原理:最近最少使用算法(LRU),是一种常用的页面置换算法,选择最近最久未使用的页面予以淘汰

    注意点:

    页面第一次加载的时候会触发created和activated生命周期

    如果地址栏有改变相当于初始化,会触发created和activated生命周期

    如果地址栏没有变化,只会出发activated生命周期


    虚拟Dom以及key属性的作用

    虚拟Dom作用:抽象dom树

    由于在浏览器中操作DOM是很昂贵的。频繁的操作DOM,会产生一定的性能问题。这就是虚拟Dom的产生原因。Virtual DOM本质就是用一个原生的JS对象去描述一个DOM节点。是对真实DOM的一层抽象。

    key的作用是尽可能的复用 DOM 元素。

    key是diff算法对比新旧children的唯一标识,作用是减少没必要的diff算法的对比,尽可能复用dom节点元素。

    新旧 children 中的节点只有顺序是不同的时候,最佳的操作应该是通过移动元素的位置来达到更新的目的。

    需要在新旧 children 的节点中保存映射关系,以便能够在旧 children 的节点中找到可复用的节点。key也就是children中节点的唯一标识。


    Vue模板编译原理:

    将template转换成render,具体步骤为:生成AST然后进行优化,然后codegen,将ast树转换成可执行代码。


    Vue事件绑定

    原生事件:addEventListener(事件名,回调函数,冒泡还是捕获,默认为false冒泡)

    组件:$on @

    v-model的原理

    value + input方法的语法糖。可以通过model属性的prop和event属性来进行自定义


    Computed和Watch:

    Computed是vue定义的计算属性,有缓存,不支持异步,是一个具备缓存的订阅者watcher,属性改变更新视图,主要用于计算性能消耗大的场景,例如购物车。

    watch是vue定义的监听器,没缓存,支持异步,观察的作用比较多,一个数据影响多个数据,应用场景为需要异步的操作或者开销较大的操作,例如搜索框


    Vue2.0怎么监听数组的变化可以改变原数组的方法:

    push,pop,shift,unshift,sort,splice,reverse

    理解:vue对上面的方法进行重写,通过原型链指向了自己定义的数组原型方法,当调用api时,可以通知依赖更新,如果数组包括引用类型,则会对数组的引用类型再次监控。


    webpack plugin的执行顺序:

    从右到左,因为webpack选择了函数式编程的compose方式,也就是compose模式,如果选择pipe模式就从左到右

    函数式编程compose和pipe

    可以这么理解,例如有a,b两个函数,compose(a,b) => a调用了b,后面的返回值作为前面的参数,即从右到左;相反pipe(a,b) => b调用a, 前面的返回值作为后面的参数,即从左到右。


    MVVM

    Model-View-ViewModel缩写,也就是把MVC中的Controler变成viewmodel。Model数据模型,View代表UI组件,ViewModel是连接两者的桥梁,数据绑定到ViewModel之后渲染至页面,视图变化会通知ViewModel更改数据


    Vue双向绑定响应式原理

    观察者模式: 定义对象一对多的依赖关系,当对象状态变化,所有依赖它的对象也会收到通知,松偶关系,观察者和目标直接进行交互。

    发布-订阅者模式:定义对象间一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。完全解偶,订阅者和发布者互不干扰,中间通过调度中心联系。

    Observe 监听器  Watcher 订阅者  Compile 解析器 dep 发布订阅者的调度中心

    总结:

    1 监听器observer实现数据劫持,获取data,给每个data加上数据监听,绑定Object.definedProperty的getter和setter函数

    2 当属性改变时,会调用调度中心dep的notify()方法通知所有订阅者watcher

    3 订阅者watcher调用update方法进行更新视图操作,通知解析器compile进行编译

    4 解析器compile把 template 编译成一段 document fragment,对每个节点进行解析,如果nodeType==3就找到 (双大括号) 的文本插值,进行replace替换,更新视图view,并初始化watcher订阅者。

    事件循环  执行栈 + Event loop + web Apis

    浏览器:一个settimeout执行完才会执行下一个settimeout 

    node:所有settimeout都是一起的,执行所有红任务,再执行所有微任务


    TCP/IP拥塞控制

    原理:

    拥塞: 请求资源大于可用资源,网络资源供应不足,导致性能,吞吐量下降

    拥塞控制:防止过多资源注入网络,导致网络负荷过载,是一个全局性过程,涉及到所有的主机、路由器,以及与降低网络传输性能有关的所有因素。

    方法:慢开始( slow-start )、拥塞避免( congestion avoidance )、快重传( fast retransmit )和快恢复( fast recovery )。

    http简单请求和非简单请求

    浏览器发送跨域请求,如何判断?

    浏览器在发送跨域请求的时候,会先判断下是简单请求还是非简单请求,如果是简单请求,就先执行服务端程序,然后浏览器才会判断是否跨域

    简单请求:

    对于简单请求,浏览器直接发出CORS请求。具体来说,就是在头信息之中,增加一个Origin字段

    常见方法有:head、get、post

    非简单请求

    非简单请求是那种对服务器有特殊要求的请求

    请求方法:PUT或DELETE,或者Content-Type字段的类型是application/json。

    非简单请求的CORS请求,会在正式通信之前,增加一次HTTP查询请求,称为"预检"请求(preflight)。

    会检查: Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后

    浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest请求,否则就报错。

    js为啥单线程

    JavaScript的单线程,与它的用途有关。作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准


    map和foreach区别

    foreEach()方法:

    针对每一个元素执行提供的函数。

    map()方法:

    创建一个新的数组,其中每一个元素由调用数组中的每一个元素执行提供的函数得来。

    区别

    forEach()方法不会返回执行结果,而是undefined。也就是说,forEach()会修改原来的数组。而map()方法会得到一个新的数组并返回。


    解决非工程化项目初始化页面闪动问题

    vue页面在加载的时候闪烁花括号{}},v-cloak指令和css规则如[v-cloak]{display:none}一起用时,这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。


    vue中对象更改检测的注意事项

    对于已经创建的实例,Vue不能动态添加根级别的响应式属性,但是可以使用Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。


    vue更新数组时触发视图更新的方法

    这些方法如下:push() pop() shift() unshift() splice() sort() reverse()


    vue如何监听键盘事件中的按键

    <input v-on:keyup.13="submit">


    什么是vue生命周期?

     Vue 实例从创建到销毁的过程,就是生命周期。. 也就是从开始创建、初始化数据、编译模板、挂载DOM-渲染、更新-渲染、卸载等一系列的过程,我们称这是 Vue 的生命周期。

    Beforecreate、created、beforeMount、Mounted、beforeUpdate、Updated、BeforeDestroy、destroyed


    vue中如何编写可复用的组件

    重点体现高内聚低耦合,可复用

    组件由

    状态props,允许外部环境传递数据给组件

    事件Events,允许组件触发外部环境的副作用

    片断slots, 允许外部环境将额外的内容嵌套在组件中。


    <keep-alive></keep-alive>的作用是什么?

    keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。


    vue中子组件调用父组件的方法

    this.$parent.event可以调用父组件身上的方法,无需绑定在子组件身上。补充:有时候会失效,暂未发现触发点,不建议使用。

    $emit可以调用父组件在子组件身上自定义的事件,需要用@前缀。建议使用此种方式

    props可以调用父组件绑定在子组件身上的事件,需要:前缀。在router-view身上使用失效

    三种都可以实现子组件调用父组件的方法,但是效率有所不同,根据实际需求选择合适的方法,嗯,就酱~


    vue.$nextTick

    this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行,简单的理解就是,当你修改了data的值然后马上获取这个dom元素的值,是不能获取到更新后的值,你需要使用$nextTick这个回调,让修改后的data值渲染更新到dom元素之后在获取,才能成功。


    vue事件中如何使用event对象

    通过将一个特殊变量 $event 传入到回调中解决


    vue-cli工程升级vue版本

    手动package.json 里面修改vue的版本 同时修改 vue-template-compiler 为相同的版本.后者在devdepen....里面.然后npm install


    vue中 key 值的作用

    渲染列表时需要使用key来给每个节点做一个唯一标识,作用是减少没必要的diff算法的对比进而高效渲染虚拟DOM节点。


    vue常用的修饰符

    .stop 阻止冒泡

    .prevent 阻止行为

    .number 限制只输出number类型

    .trim 去空格

    .lazy 改变后再触发

    .native 监听原生事件


    Vue两个核心: 数据驱动(双向数据绑定)、组件系统


    数据驱动,也叫双向数据绑定。

    Vue.js数据观测原理在技术实现上,利用的是ES5Object.defineProperty和存储器属性: getter和setter(所以只兼容IE9及以上版本),可称为基于依赖收集的观测机制。核心是VM,即ViewModel,保证数据和视图的一致性。

    组件系统。

    .vue组件的核心选项:

    1、模板(template):模板声明了数据和最终展现给用户的DOM之间的映射关系。

    2、初始数据(data):一个组件的初始数据状态。对于可复用的组件来说,这通常是私有的状态。

    3、接受的外部参数(props):组件之间通过参数来进行数据的传递和共享。

    4、方法(methods):对数据的改动操作一般都在组件的方法内进行。

    5、生命周期钩子函数(lifecycle hooks):一个组件会触发多个生命周期钩子函数,最新2.0版本对于生命周期函数名称改动很大。

    6、私有资源(assets):Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。


    Vue的渐进式理解

    主张最少,没有多做职责之外的事,不像Angular,强主张,必须用它的模版机制和依赖。vue.js只提供了vue-cli生态中最核心的组件系统和双向数据绑定,其他东西需要什么引入什么,不会强制要求。

    每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式。


    package.json配置详解

    name:包名字

    version:包版本,x.x.x的格式,符合语义化版本规则

    description:一些描述信息

    main:入口文件,一般是index.js

    scripts:指定了运行脚本命令的npm命令行缩写,默认是空的test

    author:作者信息

    license:许可证,默认是ISC、有的默认是MIT

    请说出vue-cli工程中每个文件夹和文件的用处


    vue-cli常用命令

    1.  npm install:下载 node_modules 资源包的命令

    2. npm run dev: 启动 vue-cli 开发环境的 npm命令

    3.  npm run build: vue-cli 生成 生产环境部署资源 的 npm命令

    4. npm run build--report: 用于查看 vue-cli 生产环境部署资源文件大小的 npm命令

    用于构建vue的 vue-cli 工程都到了哪些技术,它们的作用分别是什么?

    1、vue.js:vue-cli工程的核心,主要特点是 双向数据绑定 和 组件系统。

    2、vue-router:vue官方推荐使用的路由框架。

    3、vuex:专为 Vue.js 应用项目开发的状态管理器,主要用于维护vue组件间共用的一些 变量 和 方法。

    4、axios( 或者 fetch 、ajax ):用于发起 GET 、或 POST 等 http请求,基于 Promise 设计。

    5、vux等:一个专为vue设计的移动端UI组件库。

    6、创建一个emit.js文件,用于vue事件机制的管理。

    7、webpack:模块加载和vue-cli工程打包器。


    说说mongoDB和MySQL的区别

    MongoDB 是一种非关系型数据库,将数据存储为一个JSON文档,属于文档型数据库,数据结构由键值(key=>value)对组成,使用MongoDB查询方式(类似JavaScript的函数),占用空间大,不支持join方法。Mysql是一种关系型数据库,不同引擎数据存储方式不同,使用SQL语句,占用空间小,支持join方法。


    说说网络分层里七层模型是哪七层

    1)  物理层:通过媒介传输比特,确定机械及电气规范(比特Bit)

    2)数据链路层:将比特组装成帧和点到点的传递(帧Frame)

    3)网络层:负责数据包从源到宿的传递和网际互连(包PackeT)

    4)传输层:提供端到端的可靠报文传递和错误恢复(段Segment)

    5)会话层:建立、管理和终止会话(会话协议数据单元SPDU)

    6)表示层:对数据进行翻译、加密和压缩(表示协议数据单元PPDU)

    7)应用层:允许访问OSI环境的手段(应用协议数据单元APDU)

    相关协议:

    应用层:应用层、表示层、会话层(从上往下)(HTTP、FTP、SMTP、DNS)

    传输层(TCP和UDP)

    网络层(IP)

    物理和数据链路层(以太网)


    attribute和property的区别是什么

    property是DOM中的属性,是JavaScript里的对象;

    attribute是HTML标签上的特性,它的值只能够是字符串;

    简单理解,Attribute就是dom节点自带的属性,例如html中常用的id、class、title、align等。

    而Property是这个DOM元素作为对象,其附加的内容,例如classname、clientHeight等。


    谈一下MVC和MVVM

    MVC,包含model数据模型、view视图、controller控制器,业务逻辑等

    View 传送指令到 Controller

    Controller 完成业务逻辑后,要求 Model 改变状态

    Model 将新的数据发送到 View,用户得到反馈

    所有的通信都是单向的。

    MVVM

    View:UI界面  

    ViewModel:它是View的抽象,负责View与Model之间信息转换,将View的Command传送到Model;  

    Model:数据访问层

    区别与MVC单向访问,viewModal与modal可以双向访问,view和viewModal也可以双向访问

    Git fetch和git pull的区别

    git fetch:相当于是从远程获取最新版本到本地,不会自动merge

    git pull:相当于是从远程获取最新版本到本地,自动merge

    优先选择git fetch,因为不建议自动合并,要考虑根据当时情况选择合并代码

    Document.write() 的用法

    Document.write() 方法将一个文本字符串写入一个由 document.open() 打开的文档流

    如果在页面加载完毕,文档流已经闭合,再使用document.write则会先执行document.open()创建一个新文档流,这个新文档流将会覆盖替换掉之前的文档流.


    简述对AMD、CMD、CommonJs的理解

    1、AMD/CMD/CommonJs是JS模块化开发的标准,目前对应的实现是RequireJs/SeaJs/nodeJs.

    2、CommonJs主要针对服务端,AMD/CMD主要针对浏览器端,所以最容易混淆的是AMD/CMD。

    (顺便提一下,针对服务器端和针对浏览器端有什么本质的区别呢?服务器端一般采用同步加载文件,浏览器端可以异步加载。

    也就是说需要某个模块,服务器端便停下来,等待它加载再执行。这里如果有其他后端语言,

    如java,经验的‘玩家’应该更容易理解。而浏览器端要保证效率,需要采用异步加载,

    这就需要一个预处理,提前将所需要的模块文件并行加载好。)

    3、 AMD/CMD区别,虽然都是并行加载js文件,但还是有所区别,

    AMD是预加载并行加载js文件的时候就会执行

    (因为还需要执行,所以在加载某个模块前,这个模块的依赖模块需要先加载完成);

    CMD是懒加载,虽然会一开始就并行加载js文件,但是不会执行,而是在需要的时候才执行

    4、AMD/CMD的优缺点.一个的优点就是另一个的缺点, 可以对照浏览。

           AMD优点:加载快速,尤其遇到多个大文件,因为并行解析,所以同一时间可以解析多个文件。

           AMD缺点:并行加载,异步处理,加载顺序不一定,可能会造成一些困扰,甚至为程序埋下大坑。

           CMD优点:因为只有在使用的时候才会解析执行js文件,因此,每个JS文件的执行顺序在代码中是有体现的,是可控的。

           CMD缺点:执行等待时间会叠加。因为每个文件执行时是同步执行(串行执行),因此时间是所有文件解析执行时间之和,

    尤其在文件较多较大时,这种缺点尤为明显。

    5、如何使用?CommonJs的话,因为nodeJs就是它的实现,所以使用node就行,也不用引入其他包。

    AMD则是通过<script>标签引入RequireJs。

    ————————————————


    如何设置cookie、修改cookie、删除cookie

    前两个可以通过document.cookie进行设置和修改,可以通过将时间提前,设置document.cookie的expires时间,来删除cookie


    说说严格模式的限制

    变量必须声明后再使用

    函数的参数不能有同名属性,否则报错

    不能使用with语句

    禁止this指向全局对象


    谈谈对架构师的理解

    1 了解项目的所有功能和构想,以及各功能点之间的关系和作用

    2 选择合适的项目开发模式

    3 主要技术难点,并提出技术解决方案

    4 选择适合项目的第三方框架

    5 项目开发的规范,比如统一的文件命名规范等

    6 产品的质量控制方案,比如安排代码审核、互相测试等等


    说说你对Promise的理解

    依照 Promise/A+ 的定义,Promise 有四种状态:

    pending: 初始状态, 非 fulfilled 或 rejected.

    fulfilled: 成功的操作.

    rejected: 失败的操作.

    settled: Promise已被fulfilled或rejected,且不是pending

    ————————————————

    promise是现在比较流行的异步解决方案,可以解决因回调函数解决异步所导致的回调地狱问题,但是他的缺点是一但开始,就无法取消,并且外部无法获取promise的错误,需要调用回调函数捕获。它状态有4种,pending初始状态,fulfilled成功状态,rejected失败状态,settled已成功或者已失败后的状态,常见方法有promise.all,promise.race, promise.then, promise.catch等

    谈谈你对重构的理解:

    在不改变UI的前提下,进行优化,可以由多个方面,例如网站重构,可以考虑HTML、CSS、JS、服务器、seo、webpack、vue等方面


    在低版本的IE浏览器里,ajax请求有严重的缓存问题。

    在请求地址不改变的情况下,只有第一次请求才会真正发送到服务器端,后续的请求都会从浏览器的缓存中获取结果,即使服务器端数据更新了,客户端拿到的还是旧的数据。

    解决方案:在请求地址后面加请求参数,保证每一次的请求参数的值的都不相同。

    ————————————————


    事件、IE与火狐的事件机制有什么区别?如何阻止冒泡?

    事件流描述的是从页面中接受事件的顺序,分为冒泡流和捕获流;

    2.事件冒泡是指事件从最具体的元素接收,然后逐级向上传播,直到不具体的节点(通常指文档节点);而事件捕获相反,它是从不具体的节点开始,逐步到最具体的节点;

    3.IE的事件流是冒泡流,而火狐同时支持冒泡流和捕获流;

    4.阻止事件冒泡:e.stopPropagation(),IE则是使用e.cancelBubble = true;


    GET和POST的区别

      (1)get是从服务器上获取数据,post是向服务器传送数据。

      (2)get是将参数数据加到URL中,用户可以看到。post是将内容放置在http请求信息体内传送,用户看不到这个过程。

      (3)对于get方法,服务器端是用Request.QueryString获取变量的值,对于post方法,服务器端用Request.Form获取提交的数据。

      (4)get传送的数据量较小,不能大于2kb。post传送的数据量较大,一般被默认为不受限制。但理论上,IIS4中最大量为80kb,IIS5中为100kb。

      (5)get安全性非常低,post安全性较高。但是执行效率却比post方法好。

    仅用于POST请求  在以下情况只能用POST请求(1.无法使用缓存文件;2.向服务器发送大量数据;3.发送包含未知字符的用户输入时,post比get更稳定也更可靠)

    建议使用get方法的情况:1、get方式的安全性较Post方式要差些,包含机密信息的话,建议用Post数据提交方式2、在做数据查询时,建议用Get方式;而在做数据添加、修改或删除时,建议用Post方式;


    Flash ajax对比

    Flash适合处理多媒体、矢量图形、访问机器;对CSS、处理文本上不足,不容易被搜索。

    Ajax对CSS、文本支持很好,支持搜索;多媒体、矢量图形、机器访问不足。

    共同点:与服务器的无刷新传递消息、用户离线和在线状态、操作DOM

    IE和Chrome可以并行下载多少个资源?

    IE6 : 2

    IE7: 4

    IE8+ 6

    FF 、Chrome: 6

    Web应用从服务器主动推送Data到客户端有那些方式?

    1 AJAX 轮询(long-polling)方式

    实现方法很简单,就是客户端通过Ajax每隔一段时间请求服务器,这种方法缺陷很大,很消耗性能

    注:它是Ajax轮询的升级版,客户端向服务器端发送请求,服务端接收到请求后,保持连接,检查数据是否有更新,有的话返回信息并断开连接;数据没有更新的话,就一直和客户端保持连接,不返回信息。等到了服务端设置的超时的时间之后,还是没有检查到数据更新,那么服务端就会返回超时消息。客户端这边,不管请求成功还是失败,或者请求超时,都会再次向服务端发送请求。这一过程,在这一页面在浏览器打开期间,都会循环不断。 

    2 comet方式:comet是一种用于web的推送技术,能够让服务器实时的将更新的信息传送到客户端,而不需要客户端发出请求。

    2.1 HTTP长轮询+JSONP长轮询

    2.2 XHR长轮询

    2.3 webSocket

    列举IE与其他浏览器不一样的特性?

    IE使用innerText,FireFox使用textContent;

    事件方面:IE:attachEvent:火狐是addEventListener;

    内核方面: IE:webkit    FF Gecko  Edge: EdgeHTML Safari: webkit2 Chrome Chromiun Opera: Chromiun


    JS垃圾回收机制方法

    标记清除法: 常见变量标记一次,去另一个环境也标记一次,然后JS垃圾回收机制根据变量标记来决定是否清除该变量

    引入计数法,不常见,就是变量被引入就加一,取消引入就-1,当变量计数变为0的时候,就会被清除

    JS延迟加载的几种方式

    defer HTML4.01 脚本会被延迟到整个页面都解析完毕之后再执行。

    async HTML5 脚本会被延迟到整个页面都解析完毕之后再执行,只适用于外部脚本

    动态创建DOM方式

    使用jQuery的getScript()方法

    使用setTimeout延迟方法

    让JS最后加载 把js外部引入的文件放到页面底部,来让js最后引入,从而加快页面加载速度


    什么是FOUC(无样式内容闪烁)?

    如果使用import方法对CSS进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC。

    原因大致为:

    1,使用import方法导入样式表。

    2,将样式表放在页面底部

    3,有几个样式表,放在html结构的不同位置。

    其实原理很清楚:当样式表晚于结构性html加载,当加载到此样式表时,页面将停止之前的渲染。此样式表被下载和解析后,将重新渲染页面,也就出现了短暂的花屏现象。

    解决方法:

    使用LINK标签将样式表放在文档HEAD中。

    ————————————————

    如何实现浏览器内多个标签页之间的通信?

    1 调用localStorage 

    2 cookie+setInterval


    html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

    HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。

    1、新特性:

    拖拽释放(Drag and drop) API

    语义化更好的内容标签(header,nav,footer,aside,article,section)

    音频、视频API(audio,video)

    画布(Canvas) API

    地理(Geolocation) API

    本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;

    sessionStorage 的数据在浏览器关闭后自动删除

    表单控件,calendar、date、time、email、url、search

    新的技术webworker, websocket, Geolocation

    2、移除的元素

    纯表现的元素:basefont,big,center,font, s,strike,tt,u;

    对可用性产生负面影响的元素:frame,frameset,noframes;

    3、如何处理

    支持HTML5新标签:

    IE8/IE7/IE6支持通过document.createElement方法产生的标签,

    可以利用这一特性让这些浏览器支持HTML5新标签,

    浏览器支持新标签后,还需要添加标签默认的样式;

    当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

      <!--[if lt IE 9]>

      <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

      <![endif]-->

    4、如何区分:

    DOCTYPE声明\新增的结构元素\功能元素


    常见的position定位方式如下:

    static 默认值。元素出现在正常的普通流中

    relative 生成相对定位的元素,相对于其在普通流中的位置进行偏移。

    fixed (老IE不支持)生成绝对定位的元素,通常相对于浏览器窗口或 iframe 进行定位。

    inherit 继承父元素的position属性,但需要注意的是IE8以及往前的版本都不支持inherit属性。

    absolute 生成绝对定位的元素, 相对于最近一级的 不是 static 的父元素来进行定位,如果没有找到的话,最终是根据body进行定位。

    注意:

    absolute定位的基准是相对于最近一级的不是默认值static的父元素(可以是absolute/relative/fixed等)来进行定位的,而不仅仅是相对于为position为relative的父级元素。父级元素还可以是absolute、fixed定位

    ————————————————


    1px问题

    原因:设备像素比dpr导致,ipone6默认dpr=2,即1个逻辑像素,在x轴和y轴方向,需要2个物理像素来显示,例如700rpx物理像素对应逻辑像素为375rpx,一般设计稿会用物理像素。

    解决方法:

    1 0.5px方案,利用媒体查询判断dpr设备像素比,将1px设置为0.5px

    2 利用viewport(可视区域)+rem, 设置meta initial-scale=0.5(初始缩放比例)


    快速 排序的思想并实现一个快排

    归并排序的思想并实现一个快排


    栈和堆的区别:

    栈区:由编辑器自动分配释放,存放函数的参数值,局部变量的值等(基本类型值)。

    堆区:由程序员分配释放,若程序员不释放,程序结束时可能有OS(操作系统)回收(引用类型值)。

    栈(数据结构):一种先进后出的数据结构,只允许表尾进行插入和删除。

    堆(数据结构):堆是一种特殊的完全二叉树,当且仅当满足所有节点的值总是不大于或不小于其父节点的值的完全二叉树被称之为堆。堆的这一特性称之为堆序性


    栈和队列的区别:

    栈是先进后出,队列是先进先出。
    栈的插入和删除操作都是在一端进行的,而队列的操作却是在两端进行的。栈只允许在表尾一端进行插入和删除,队列只允许在表尾一端进行插入,在表头一端进行删除。

    CSS3新特性:

    新增了伪类::first-of-type, :last-of-type, :only-child, :nth-child(), :enabled, :disabled:, :checked

    比较重要弹性布局:display: flex, 及其一些列的属性。。。

    还有媒体查询@media, 颜色rgba, 圆角border-radius, border-image, 阴影box-shadow, 盒子模型box-sizing等

    动画方面就:transfrom转换, transition过渡, animation动画

    CSS3新增伪类有那些?

    p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

    p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

    p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

    p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。

    p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。

    p:nth-of-type(odd) 获取其父元素的字元素奇数标签p

    nth-of-type(even) 获取其父元素的字元素偶数标签p

    :enabled  :disabled 控制表单控件的禁用状态。

    :checked        单选框或复选框被选中。

    优先级算法如何计算?

      ID选择器的优先级:1000

      类选择器的优先级:100

      标签选择器的优先级:10

      优先级可以累加

      如果是同级的选择器,那么,后面一个,则+1,再后面一个,则+2

      注意:再怎么累加,也不可能超越上限

      注意:优先级,只会影响到相同属性名的属性

     ID选择器 > 类选择器=后代选择器=子代选择器 > 标签选择器

      !important用于提升指定样式规则的应用优先权  优先级最高


    csss选择符有哪些?哪些属性可以继承?下面我们来看一下css的选择符与css中可以继承的属性有哪些。

    CSS选择符:

    id选择器 (#id)

    类选择器 (.warning)

    标签选择器 (div、h1、p)

    相邻选择器 (h1+p)

    子选择器 (ul>li)

    后代选择器 (li a)

    通配符选择器 (*)

    属性选择器 (class="fff")

    伪类选择器 (a:hover, a:active)

    css中可以继承的属性:

    1、

    字体系列属性

    font:组合字体

    font-family:规定元素的字体系列

    font-weight:设置字体的粗细

    font-size:设置字体的尺寸

    font-style:定义字体的风格

    font-variant:设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。

    font-stretch:允许你使文字变宽或变窄。所有主流浏览器都不支持。font-size-adjust:为某个元素规定一个 aspect 值,字体的小写字母 "x" 的高度与 "font-size" 高度之间的比率被称为一个字体的 aspect 值。这样就可以保持首选字体的 x-height。

    2、文本系列属性

    text-indent:文本缩进

    text-align:文本水平对齐

    line-height:行高

    word-spacing:增加或减少单词间的空白(即字间隔)

    letter-spacing:增加或减少字符间的空白(字符间距)

    text-transform:控制文本大小写

    direction:规定文本的书写方向

    color:文本颜色

    3、元素可见性:

    visibility

    4、表格布局属性:caption-side、border-collapse、border-spacing、empty-cells、table-layout5、列表属性:list-style-type、list-style-image、list-style-position、list-style6、生成内容属性:quotes7、光标属性:cursor8、页面样式属性:page、page-break-inside、windows、orphans9、声音样式属性:speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation。


    position:absolute和float属性的异同

    共同点的话,对内联元素设置float和absolute属性,可以让元素脱离文档流,并且可以设置其宽高。

    不同点的话,float仍会占据位置,absolute会覆盖文档流中的其他元素。

    cookie和session的区别

    存储位置

    cookie由浏览器向服务器请求,由服务器响应请求生成返回,存放在客户端

    session的数据信息存放服务端

    内存大小

    cookie一般<=4kb,浏览器限制最多cookie最多20个

    session理论上没有大小限制,但是考虑到性能问题,不会存放太多,服务器有session删除机制

    存储方法:

    cookie存储方式为ASCII编码字符串

    session可以任意形式,不局限于string,integer,list,map等。

    隐私策略不同

    cookie对客户端是可见的,别有用心的人可以分析存放在本地的cookie并进行cookie欺骗,所以它是不安全的。

    session存储在服务器上,对客户端是透明对,不存在敏感信息泄漏的风险、

    创建对象的方法

    1 new Object()

    2 字面量 var Person = {}

    3 工厂模式,原理还是new Object,声明一个函数,传入生产对象的参数,返回不同的对象

    function createPerson(name,age,job){

     var o = newObject();

     o.name = name;

     o.age = age;

     o.job = job;

     o.sayName = function(){

      alert(this.name);

     };

     returno;

    }

    var person1 = createPerson('Nike',29,'teacher');

    var person2 = createPerson('Arvin',20,'student');

    4 继承方法创建对象

    几种继承方法的优缺点:

    原型链继承

    核心: 将父类的实例作为子类的原型

    优点:简单方便容易操作,既可以继承原型身上的方法和属性,又能继承构造函数内的方法和属性

    缺点:无法实现多继承,不方便传参,原型对象属性被所有实例共享

    构造函数继承:通过改变this的指向实现继承

    优点:方便传参,可以实现多继承

    缺点:只能继承构造函数的属性和方法,不能继承原型内部的属性和方法,无法实现函数复用,浪费性能

    实例继承

    核心:为父类实例添加新特性,作为子类实例返回

    缺点:父类的实例,不支持多继承

    拷贝继承

    优点:支持多继承

    缺点:效率低,内存占用高,无法获取父类不可枚举的方法

    组合继承

    核心:通过调用父类构造,继承父类的属性并保留传参的优点,然后通过将父类实例作为子类原型,实现函数复用

    优点:可传参、可复用、修复构造继承引用属性共享问题、可继承父类原型内部方法和属性

    缺点:需要new两次

    寄生组合继承

    核心:通过寄生方式,砍掉父类的实例属性,这样,在调用两次父类的构造的时候,就不会初始化两次实例方法/属性,避免的组合继承的缺点

    优点:和组合继承一样,同时修复了组合继承两次new消耗性能问题

    缺点:没缺点

    说说你对作用域链的理解?

    当代码在一个环境中执行时,会创建变量对象的一个作用域链(scope chain,不简称sc)来保证对执行环境有权访问的变量和函数的有序访问。作用域第一个对象始终是当前执行代码所在环境的变量对象,变量访问到window对象即被终止

    栈和堆的区别

    堆(Heap)与栈(Stack)是开发人员必须面对的两个概念,在理解这两个概念时,需要放到具体的场景下,因为不同场景下,堆与栈代表不同的含义。一般情况下,有两层含义:

    (1)程序内存布局场景下,堆与栈表示两种内存管理方式;

    (2)数据结构场景下,堆与栈表示两种常用的数据结构。

    1.程序内存分区中的堆与栈

    栈由操作系统自动分配释放 ,用于存放函数的参数值、局部变量等,其操作方式类似于数据结构中的栈

    堆由开发人员分配和释放, 若开发人员不释放,程序结束时由 OS 回收,分配方式类似于链表。

    2 数据结构中的堆与栈

    栈是一种线性表,先进后出

    堆是一种树形结构,是一种特殊的完全二叉树,当且仅当满足所有节点的值总是不大于或不小于其父节点的值的完全二叉树被称之为堆。

    js有哪些内置对象,数据封装类对象?

    数据封装类对象:Object、Array、Boolean、Number、String

    其他对象:Function、arguments、Math、Date、RegExp

    常见的造成内存泄漏的方法,以及怎么解决?

    1 意外的全局变量

    2 被遗忘的计时器或回调函数

    3 脱离 DOM 的引用

    4  闭包

    解决方法:

    1 使用 Chrome 发现内存泄露

    2 自动释放,例如闭包变量直接赋值为null

    dom属于什么结构,以及相关操作

    创建新的节点
    document.createDocumentFragment() // 创建一个DOM片段
    document.createElement() //创建一个具体的元素
    createTextNode() //创建一个文本节点

    appendChild() //添加

    removeChild() //移除

    replaceChild() //替代

    insertBefore() //插入

    document.getElementsByTagName() //通过标签名称

    document.getElementsByName() //通过元素的Name属性的值

    getElementById() //通过元素Id,唯一性


    Bom常用属性有哪些

    location对象、history对象、Navigator对象、window对象

    location对象

    location.href-- 返回或设置当前文档的URL

    location.search – 返回URL中的查询字符串部分。例如 http://www.dreamdu.com/dreamd… 返回包括(?)后面的内容?id=5&name=dreamdu

    location.hash – 返回URL#后面的内容,如果没有#,返回空 location.host – 返回URL中的域名部分,例如http://www.dreamdu.com

    location.hostname – 返回URL中的主域名部分,例如http://dreamdu.com

    location.pathname – 返回URL的域名后的部分。例如 http://www.dreamdu.com/xhtml/ 返回/xhtml/

    location.port – 返回URL中的端口部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回8080

    location.protocol – 返回URL中的协议部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回(//)前面的内容http:

    location.assign – 设置当前文档的URL

    location.replace() – 设置当前文档的URL,并且在history对象的地址列表中移除这个URL location.replace(url);

    location.reload() – 重载当前页面

    history对象

    history.go() – 前进或后退指定的页面数

    history.go(num); history.back() – 后退一页

    history.forward() – 前进一页

    Navigator对象

    navigator.userAgent – 返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)

    navigator.cookieEnabled – 返回浏览器是否支持(启用)cookie

    window对象

    alert(str):用于向用户展示一些用户不可控的警告信息

    confirm(str):用于向用户展示一段信息并确认结果

    prompt(str,str): 用于向用户展示一段信息并收集用户输入结果

    print(): 显示打印对话框(等同与点击浏览器菜单栏打印选项)

    find(): 显示查找对话框(等同与点击浏览器菜单栏查找选项)

    ————————————————

    jQuery或zepto源码有哪些写的好的地方?

    jquery源码封装在一个匿名函数的自执行环境中,有助于防止变量的全局污染,然后通过传入window对象参数,可以使window对象作为局部变量使用,好处是当jquery中访问window对象的时候,就不用将作用域链退回到顶层作用域了,从而可以更快的访问window对象。同样,传入undefined参数,可以缩短查找undefined时的作用域链。

        (function( window, undefined ) {

             //用一个函数域包起来,就是所谓的沙箱

             //在这里边var定义的变量,属于这个函数域内的局部变量,避免污染全局

             //把当前沙箱需要的外部变量通过函数参数引入进来

             //只要保证参数对内提供的接口的一致性,你还可以随意替换传进来的这个参数

            window.jQuery = window.$ = jQuery;

        })( window );

    jquery将一些原型属性和方法封装在了jquery.prototype中,为了缩短名称,又赋值给了jquery.fn,这是很形象的写法。

    有一些数组或对象的方法经常能使用到,jQuery将其保存为局部变量以提高访问速度。

    jquery实现的链式调用可以节约代码,所返回的都是同一个对象,可以提高代码效率。

    谈谈浮动以及清除浮动的方法:

    浮动的框可以向左或向右移动,直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上

    清除浮动的方法:

    1 父元素定义高度

    2 父元素定义overflow:hidden

    3 BFC清除浮动

    4 浮动元素后面元素加clear:both

    5 浮动元素后面添加伪类:after,zoom

    设计模式有哪几种?谈谈你在项目中用过哪些设计模式

    工厂模式

    单例模式

    代理模式

    观察者模式

    策略模式

    s选择符有哪些?哪些属性可以继承?下面我们来看一下css的选择符与css中可以继承的属性有哪些。

    CSS选择符:

    id选择器 (#id)

    类选择器 (.warning)

    标签选择器 (div、h1、p)

    相邻选择器 (h1+p)

    子选择器 (ul>li)

    后代选择器 (li a)

    通配符选择器 (*)

    属性选择器 (class="fff")

    伪类选择器 (a:hover, a:active)

    css中可以继承的属性:

    1、字体系列属性

    font:组合字体

    font-family:规定元素的字体系列

    font-weight:设置字体的粗细

    font-size:设置字体的尺寸

    font-style:定义字体的风格

    font-variant:设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。

    font-stretch:允许你使文字变宽或变窄。所有主流浏览器都不支持。

    font-size-adjust:为某个元素规定一个 aspect 值,字体的小写字母 "x" 的高度与 "font-size" 高度之间的比率被称为一个字体的 aspect 值。这样就可以保持首选字体的 x-height。

    2、文本系列属性

    text-indent:文本缩进

    text-align:文本水平对齐

    line-height:行高

    word-spacing:增加或减少单词间的空白(即字间隔)

    letter-spacing:增加或减少字符间的空白(字符间距)

    text-transform:控制文本大小写

    direction:规定文本的书写方向

    color:文本颜色

    3、元素可见性:visibility

    4、表格布局属性:caption-side、border-collapse、border-spacing、empty-cells、table-layout

    5、列表属性:list-style-type、list-style-image、list-style-position、list-style

    6、生成内容属性:quotes

    7、光标属性:cursor

    8、页面样式属性:page、page-break-inside、windows、orphans

    9、声音样式属性:speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation。

    p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

    p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

    p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

    p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。

    p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。

    :enabled  :disabled 控制表单控件的禁用状态。

    :checked        单选框或复选框被选中。

    :root 选择文本的根元素。

    git fetch:相当于是从远程获取最新版本到本地,不会自动merge

    相关文章

      网友评论

          本文标题:2021面经不易懂笔记

          本文链接:https://www.haomeiwen.com/subject/ljygfltx.html