基础知识点面试题

一:preloadprefetch

特点和区别

        preload特点:

        1.preload加载的资源是在浏览器渲染机制之前进行处理,并且不会阻塞onload事件.

        2.preload支持加载多种类型的资源,并且可以加载跨域资源。

        3.preload加载的js其加载和执行的过程是分离的。即preload会预加载相应的js,待到需要时自行去调用。

        prefetch特点:

        1prefetch加载的资源可以获取非当前页面所需要的资源,并且将其放入缓存至少5min(无论资源是否可以缓存);并且,当页面跳转时,未完成的prefetch请求不会被中断。

        对比:

        1.preloadprefetch都没有同域名的限制。Preload不添加crossorigin被下载两次。

        2.preload主要用于预加载当前页面需要的资源,是告诉浏览器页面必定需要的资源,浏览器一定会加载这些资源;prefetch主要用于加载将来页面可能需要的资源,浏览器不一定会加载这些资源。

        3.不论资源是否可缓存,prefetch会存储在net-stack cache中至少5分钟。

        4.preload需要使用as属性指定特定资源类型以便浏览器为其分配一定的优先级,并能够正确加载资源;html/css资源的优先级最高,font优先级为highest/high;图片如果出现在视口中,则优先级为high,否则为lowPrefetch优先级最低。如果as不写,那么会当做异步请求处理。

        5.有两种方法去使用preloadprefetch:
(1)
link标签的ref属性:

        <link ref="preload" as="script/style/image/font/fetch/document/audio/video" href="test.js" οnlοad="handleOnload()" οnerrοr="handlepreloadError()" crossorigin="anonymous/use-credentials">

        <link ref="prefetch">

(2)http响应头中加上preload字段。

preload/prefetch使用案例:

        1.提前加载字体文件:由于字体文件必须等到cssom构建完成并且作用到页面元素时,才会加载,会导致页面字体样式闪动。所以要用到preload显示告诉浏览器提前加载。假如字体文件在css生效之前下载完成,则可以完全消灭页面闪动问题。

        2.使用preload预加载第二屏的内容。在用户浏览完首屏内容滚动时能够更快的看到次屏的内容。

        3.在页面加载完后,可分析页面上的所有链接,预判断用户可能会点击的页面,分析提取下一跳转页面的资源(使用prefetch),浏览器会在空闲时间进行加载,当一用户点击链接命中了缓存,这有效提升下一页面的首屏渲染时间。

4.对于商品列表页面,当鼠标停留在某个商品时,可分析商品详情页所需要的资源并提前开启preload加载,预测用户的行为并做些预加载,点击命中率更高,preload可立即加载资源,有效提升缓存命中率。

 

二:service worker

使用场景:

        1.后台同步:启动一个service worker,即使没有用户访问特定站点,也可以同步更新缓存。

        2.响应推送:向用户发送一条信息通知新的内容可用。

        3.响应来自其他源的资源请求。

        4.集中接受计算成本高的数据更新,比如地理位置和陀螺仪信息,这样,多个页面就可以利用同一组数据。

        5.在客户端进行CoffeeScript/LESS/CJS/AMD等模块编译和依赖管理(用于开发)

        6.后台服务钩子。

        7.自定义模板用于特定URL模式。

        8.性能增强,比如预取用户可能需要的资源。

 

        service worker基本特征

        1.无法操作dom.

        2.只能使用httpslocalhost.

        3.可以拦截全站请求从而控制应用。

        4.与主线程独立不会被阻塞(不要在应用加载时注册sw)

        5.完全异步,无法使用xhrlocalStorage.

        6.一旦被install,就永远存在,除非uninstall.

        7.独立上下文.

        8.响应推送.

        9.后台同步.

        10.是事件驱动的worker,生命周期与页面无关,页面未关闭时,sw可退出;没有关联页面时,sw可启动。

 

        service worker生命周期

        1.注册:registerclient端发起register注册一个service worker,另外需要一个sw.js文件处理sw逻辑。注册后,将作用于整个域内用户可访问的url或者其特定子集。

        2.下载:用户首次防卫sw控制的网站或者页面时,sw会立刻被客户端下载。

        在以下情况汇总将会触发更新:

        (1)前往作用域内页面的导航。

        (2)sw上的一个事件被触发且过去24h没有被下载。

        3.安装:install。如果是首次启动sw,sw会尝试安装。

        如果现有sw已启动,新版本会在后台安装,但不会被激活,这个时序称为worker in waiting。直到所有已加载的页面不再使用旧sw才会激活新的sw。只要页面不再依赖旧sw,新的sw会被激活(成为active worker).

        4.激活:activate。触发时可以清理旧缓存和旧的sw关联的东西。

        ps:oninstallonactivate完成前需要一些时间,sw提供了waitUntil方法,当oninstall或者onactivate触发时被调用,接受一个promise。在这个promise被成功resolve之前,功能性事件不会分发到sw

 

        service worker与页面的通信:

        1.页面向service worker:发送navigator.serviceWorker.active.postMessage(xx);接收this.addEventListener('message',function(event){console.log(event.data)})

        2.service worker向页面:发送this.addEventListener('message',function(event){event.source.postMessage(xx)});接收navigator.serviceWorker.addEventListener('message',function(event){console.log(event.data)});

 

三:http请求格式和各种字段含义?

https://www.cnblogs.com/linliquan/p/11362336.html

 

四:从输入url到看到页面的过程

      1.浏览器向服务器发送请求解析域名相对应的IP地址。

      2.浏览器根据IP地址和默认的80端口,浏览器和服务器建立TCP连接。

      3.服务器响应http请求,给浏览器返回html文件。

      4.释放TCP连接。

      5.浏览器解析html并显示文本。

 

五:浏览器渲染的过程:

1.浏览器将html解析成一个html树。ps:深度解析:当前节点和下面的子节点都遍历完以后,才会遍历兄弟节点。

2.css解析成css树。

3.dom树和css树结合起来,生成render树。每一个dom节点都有attach方法,接收样式信息,返回一个render对象,这些render对象就组成了render树。

4.根据render树,开始布局,确定每个dom在显示屏上面的位置坐标。

5.调用paint方法,进行绘制。

浏览器渲染是一个渐进的过程,为了达到更好的用户体验,渲染引擎会尽快将内容显示在屏幕上。不会等到html文档解析完以后才开始构建render树。

html树、css树、render树不是相互独立的,会有交叉,一边加载,一边渲染的工作现象。

 

 

六:请求报文和响应报文

请求:

General:

1.Request URL:请求的url

2.Request Method:请求的方法

3.Status Code:服务器返回的状态

4.Remote Address:请求的

5.Referral Policy:发送Referral的策略,根据Referral(该字段记录来源地址)限制一些接口只能本网站才能调用。

 

请求报文里面包含:

1.请求行:

请求行分为3个部分:

(1)请求方法:get/post/put/delete

(2)请求URL:由协议://端口/路径组成

(3)HTTP协议版本

2.请求头

(1)Host:服务器地址

(2)User-Agent:发送请求的客户端名称

(3)Connection:连接的相关属性比如keep-alive即保持连接

(4)Accept:通知服务器可以发送的编码格式

(5)Accept-Encoding:通知服务器可以发送的数据压缩格式

(6)Accept-Language:通知服务器可以发送的语言

(7)Referre:浏览器告诉服务器来源地址。

还有其他的token信息等

3.空行:表示请求头传输完毕。

4.请求体

 

响应报文里面包含:

1.状态行

(1)http版本

(2)状态码

(3)状态码的详解

2.响应头:

(1)Access-Control-Allow-Credentials:是否可以将请求的响应暴露给页面,如果是true表示可以,其他不可以。

(2)Access-Control-Allow-Origin:设置允许跨域的域名或ip

(3)Content-Type:响应正文的类型。

(4)Content-Length:响应正文的长度。

(5)Content-Charset:响应正文使用的编码。

(6)Content-Encoding:响应正文使用的数据压缩格式。

(7)Accept-Ranges:值为bytes/nonebytes表示服务器接收范围请求,即我们可以做断点下载的功能。

(8)Date:消息发送的时间。使用Date与当前时间进行比较,若响应中的日期值比较早,就可以认为是来自缓存的。

(9)Age:当代理服务器用自己缓存的实体去响应请求时,实体从产生到现在经过多长时间了。通过Age来分辨出这条响应的使用期。

(10)Transfer-Encoding:chunked。分块传输。长连接时,不设置Content-Length字段时,通过此字段来使Recipient正确得知乡邻两次请求的响应内容的分界位置。

(11)Cache-Control:设置强缓存还是协商缓存。

3.空行:表示响应头结束。

4.响应数据

 

七:一次完整的http请求的7个步骤:

1.浏览器和服务器建立TCP连接

2.浏览器向服务器发送请求命令行

3.浏览器向服务器发送请求头

4.服务器向浏览器发送响应头

5.服务器向浏览器发送响应体

6.服务器向浏览器发送空行

7.关闭TCP连接

 

八:http1.0http2.0的区别:

1.http2.0实现多路复用,即连接共享。能够在一个TCP上并行进行任意数量的双向数据量。

2.头部压缩。

3.服务器推送:根据preload修饰资源,可以预请求。

4.二进制分帧。在应用层和传输层之间增加一个二进制分帧层,突破了HTTP1.1的性能限制、改进传输性性能。

 

九:强缓存和协商缓存

1.强缓存:通过response header中的Cache-Controlmaxa-age=xx,public/private,immutable/no-cache/no-store

public:在xx秒之内,客户端和代理服务器都缓存。如果用户有刷新,那么就重新向服务器发送请求。

private:xx秒之内,客户端缓存,代理服务器不缓存。如果用户有刷新,那么久重新向服务器发送请求。

immutable:在xx秒之内,客户端缓存。如果用户有刷新,也不向服务器发http请求。

no-cache:跳过强缓存,不妨碍协商缓存。

no-store:不缓存,即没有强缓存没有协商缓存,每次都是重新向服务器发请求。

强缓存的步骤:

1.第一次请求时,缓存中没有该信息,直接请求文件

2.服务器返回文件,并且response header中返回Cache-Controlmax-age=xx

3.再次请求时,判断max-age是否过期,如果没有过期就直接读取本地缓存,如果过期就进行协商缓存。

协商缓存的步骤:

1.浏览器第一次发送请求时,服务器response header中返回Last-ModifiedETag的值,浏览器存下文件和两个值。

2.浏览器下次请求时,request header里面自动添加If-Modified-Since(即第一步中的Last-Modified)If-None-Match(即第一步中的ETag).文件修改后会新生成一个ETag。服务器收到请求后,将文件的Last-ModifiedETag和浏览器传过来的If-Modified-SinceIf-None-Match

进行对比,如果一致,就返回304表示未修改;如果有改变,就返回200新的文件。

 

十:cookesessionStorelocalStorage的区别?

1.存储大小.

cookie:4k

sessionStoragelocalStorage:5M

2.数据有效期.

cookie:一般由服务器生成,可以设置失效时间;若没有设置时间,那么关闭浏览器时cookie失效;若设置了时间,cookie

会存放在硬盘里,过期才失效。

sessionStorage:仅在当前浏览器窗口关闭之前有效,关闭页面或者浏览器就会被清除。

localStorage:永久有效,窗口或者浏览器关闭,也会一直保存,除非手动永久清除。

3.作用域。

cookie:在所有同源窗口中都是共享的。

sessionStorage:在同一个浏览器窗口是共享的(不同浏览器的同一个页面不是共享的)

localStorage:在所有同源窗口中都是共享的。

4.通信。

cookie:在每次http请求中,cookie会在浏览器和服务器之间来回传递。

sessionStoragelocalStorage:仅仅保存在客户端,不参与和服务器的通信,不会自动把数据发送给服务器,仅仅保存在本地。。

5.易用性。

cookie:需要自己进行封装才能获取。

sessionStoragelocalStorage:使用setItemgetItem进行读取。

 

十一:程序、进程、线程的区别和联系?

程序是一组指令的有序集合,它本身没有任何运行的含义,它只是一个静态的实体。

进程和线程都是一个时间段的描述,是CPU工作时间段的描述,是动态的,进行和线程都是由操作系统所体会的程序运行的基本单元,系统利用该基本单元实现系统对应用的并发性。进程和线程的颗粒大小不同。

进程是一个动态的实体,它有自己的生命周期,它因创建而产生,因调度而运行,因等待资源或事件而被处于等待状态,因完成任务而被撤销,反映了一个程序在一定的数据集上运行的全部动态过程。

进程和程序不是一一对应的,一个程序执行在不同的数据集上就成为不同的进程,可以用进程控制块来唯一的标识每个进程。进程就是上下文切换的程序执行时间总和=CPU加载上下文+CPU执行+CPU保存上下文。一个程序至少包含一个进程,一个进程至少包含一个线程。

进程和线程的区别和联系有:

(1)进程是资源分配的最小单位,线程是CPU调度的最小单位。

(2)线程的划分尺度小于进程。线程是进程的一个实体,线程自己基本不拥有系统资源,只拥有一点在运行中必不可少的资源。

(3)进程在执行过程中拥有独立的内存单元,而多个线程共享内存,从而提高了程序的运行效率。

(4)一个线程可以创建和撤销另一个线程,同一个进程中的多个线程之间可以并发执行。

 

十二:防抖和节流:

防抖是指触发事件后,在n秒内函数只能执行一次。如果在n秒内又触发了事件,则会重新计算函数执行时间,即在不触发的n秒后再执行函数。用setTimeout来实现。

防抖的使用场景:input输入框进行搜索、windowresize

防抖:

     function debounce(func, delay) {

            let timeout;

            return function () {

                clearTimeout(timeout);//如果持续触发 ,会清除定时器,定时器的回调就不会执行

                timeout = setTimeout(() => {

                    func.apply(this, arguments);

                }, delay)

            }

        }

 

        box.onmousemove = debounce(function (e) {

            console.log(e)

            box.innerHTML = `${e.clientX},${e.clientY}`

        }, 1000)

 

节流是指连续触发事件但是在n秒中只执行一次函数,即n秒执行一次函数。频繁触发事件,但是事件是在一定频率发生。节流会稀释函数的执行频率。实现节流一般有两种方式,分别是时间戳和定时器。

节流的使用场景:不断点击按钮或者mousedown、监听滚动事件来进行加载更多的操作。

节流:

    function throttle(func, delay) {

            let run = true;

            return function () {

                if (!run) {

                    return;//如果开关关闭,那就直接不执行下边的代码

                }

                run = false;//持续触发的话 run一直是false 就停在上边的判断那里 return

                setTimeout(() => {

                    func.apply(null, arguments);

                    run = true;

                }, delay)

            }

        }

 

        box.onmousemove = throttle(function (e) {

            box.innerHTML = `${e.clientX}, ${e.clientY}`

        }, 1000)

Ps:箭头函数中没有thisargumentsthisarguments会向上一级作用域查找。

 

十三:静态资源优化方案.

(1).配置超长时间的本地缓存-节省宽带,提高性能。

(2).采用内容摘要作为缓存更新依据-精确的缓存控制。

(3).静态资源cdn部署-优化网络请求。

(4).资源发布路径实现非覆盖式发布-平滑升级。

 

十四:为什么使用cdn?

为了追求速度。因为浏览器缓存只是为了二次访问的速度,对于首次访问的加速,需要从网络层面进行优化,最常见的是cdn(内容分发网络)加速。通过将静态资源缓存到离用户很近的相同网络运营商的CDN节点上,不但能提示用户的访问速度,还能节省服务器的带宽消耗,降低负载。

 

十五: css优化?

(1)内容和样式分离。

(2)css压缩,减少体积。

(3)css可缓存、重用,维护成本降低。

(4)不使用@import

(5)避免使用负责的选择器,层级越少越好。

(6)精简页面的样式文件,利用css继承减少代码量。

(7)书写顺序,按照位置>大小>文字系列>背景>其他。

 

十六:敏捷开发中的mvp。

mvp(Minimum viable product):最小化可行产品。

mvp是一个过程,在此阶段的主要目标是学习。在快的前提下,研发出可体验的/可使用的/令人喜爱的/能快速反馈的,用户真实体验,要抓住核心产品流程。

最小可行产品是:知道'方法'验证'方向'。

敏捷开发是:知道'方向'验证'方法'。

 

十七:模块和组件的区别?

模块具有可拆分性,模块由多个组件或者多个小模块构成,模块一般与业务相关联。

组件在功能上还是业务上都无法继续拆分,组件是构成业务模块或业务功能的基本单位。

模块化解决的问题:

1.解决由于模块边界定义不清而导致的耦合问题。

2.统一规定模块之间通信方式,去除过分使用EventBus而臃肿的event包。

3.隔离各个模块代码,利于并行开发测试。

4.可单独编译打包某一个模块,提升开发效率。

5.模块实现可复用,快速集成。

6.开发时,可以进行单业务编译,编码全量编译时过长。

模块化的技术难点:

1.隔离模块边界。模块与模块之间不允许同时直接产生依赖关系。

隔离的规则:

业务之间是否强关系?强关联的应该合并。

共用的功能是否可组件化?可组件化应该拆分。

业务是否复杂?复杂应该拆分。

空壳模块能否与其他空壳合并。

2.模块间跳转。使用router。

3.模块间通信。同一模块之间使用EventBus。不同模块之间使用协议通信。

 

十八:重构原因:

1.项目代码结构混乱,代码风格不统一,导致新手上手很慢。

2.不稳定。

3.有性能瓶颈。

4.不能满足新需求。

5.有大量重复代码,改动一个地方会牵连很多其他地方。

重构目标:

1.改进软件设计。

2.简化代码,让代码更容易阅读理解,方便后期维护拓展。

3.统一规范代码风格。

4.满足新需求。

5.发现并修改bug。

6.提高用户体验,性能优化。

7.使用面向对象思想。

重构内容:

1.熟悉项目。

2.解耦。拆分大文件,划分模块。比如是公用组件还是该页面的业务组件。

3.提取公用组件、公用样式。

4.精简代码。

5.封装请求拦截。

 

十九:自适应方案核心: 阿里可伸缩布局方案 lib-flexible

postcss-pxtorem是PostCSS的插件,用于将像素单元生成rem单位,在vue项目中使用pxtorem需要配置plugins的postcss-pxtorem的rootValue。

 

二十:kafka:是一个分布式发布-订阅模式的消息服务工具,依赖于zookeeper进行工作。数据的发送者以某种方式对消息进行分类,接收者订阅他们,以便接受特定类型的消息。发布与订阅系统有一个broker,也就是发布消息的中心点。用户分为生产者和消费者。

生产者创建消息:被称为发布者或写入者。生产者在默认的情况下把消息均衡的发布到主题的所有分区上,而并不关心特定消息会被写入到哪个分区。

消费者读取消息:被称为订阅者或读者。消费者订阅一个或多个主题,并按照消息生成的顺序来读取他们。消费者通过检查消息的偏移量来判断是否读过消息。

kafka特点:

1.按照topic对消息进行分类。

2.发送消息者为生产者。

3.订阅消息者为消费者。

4.一个或多个server组成的集群来进行,每一个server都称为一个broker。

kafka优势:

1.高吞吐量、低延迟。

2.可扩展性。

3.持久性、可靠性。

4.容错性。

5.高并发。

kafka适合的应用场景:

1.日志收集。一个公司可以用kafka收集各种服务的Log,通过kafka以统一接口服务的方式开放给各种consumer。

2.消息系统:解耦生产者和消费者、缓存消息等。

3.用户活动跟踪:kafka经常被用来记录web用户或者app用户的各种活动,如浏览网页、搜索、点击等活动,这些信息被各个服务器发布到kafka的topic中,

然后消费者通过订阅这些topic来做实时的监控分析,也可以保存到数据库。

4.运营指标:kafka用来记录运营监控数据。包括收集各种分布式应用的数据,生产各种操作的集中反馈,比如报警和报告。

5.流式处理。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页