当前位置: 主页 > 网站建设 > 自学

自学

时间:2021-11-18 来源:未知网络 作者:996建站网

————————————————————————————————–

需要学习的: CI/CD (持续集成/持续部署)的发布流程,工程化实践相关学习,Jenkins入门(一)_变成习惯-CSDN博客_jenkins

NodeJS 和 Electron,Flutter

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

浏览器渲染过程:

从HTML文本解析到HTML语法树,再解析到文档对象树(DOM Tree) HTML语法树生成的两个过程

1. 词法解析: 按照词法规则将HTML文本分割成大量的标记(Token), 并去除其中无关的字符(空格),

2. 语法解析: 匹配Token序列生成语法树, 有两种匹配方式:自上而下,自下而上

2.1 自上而下解析器和自下而上解析器。直观地来说,自上而下的解析器从语法的高层结构出发,尝试从中找到匹配的结构。

而自下而上的解析器从低层规则出发,将输入内容逐步转化为语法规则,直至满足高层规则

2.2 但是HTML无法用常规的自上而下或自下而上的解析器进行解析

原因 2.2.1 语言的宽容本质,

2.2.2. 浏览器对常见无效HTML用法的包容态度,

2.2.3. 解析过程需要不断重复,源内容在解析过程中通常不会改变,但是HTML中,脚本标记如果包含document.write,

就会添加额外的标记,这样的解析过程实际上就更改了输入内容

3. 容错机制: 解析器在对标记化输入内容进行解析,以构建文档树,如果文档的格式正确就直接进行解析,遗憾的是,HTML文档不可能不会有格式错误的时候,

因此解析器必须具备一定的容错性

3.1 明显不能再某些外部标记中添加的元素,在此情况下,我们应该关闭所有标记,直到出现禁止添加的元素,然后再加入该元素

3.2 浏览器不能直接添加的元素,但开发者忘记添加了,浏览器会自动添加

3.3 向inline元素内添加block元素。闭合所有inline元素,直到出现下一个较高级的block元素

3.4 如果这样仍然无效。可关闭所有元素、直到可以添加元素可止,或者忽略该标记

JS解析的影响

DOM树创建过程中遇到script标签会创建HTMLScriptElement实例,HTMLScript-Element的父类ScriptElement中包含了对JS脚本的所有处理,包括下载、缓存、执行。

2.3.1 对于外部引用的脚本文件,从脚本下载到脚本执行完,文档解析过程会一直被阻塞

2.3.2 script属性: async: 异步加载js文件,采用并行下载,不会阻塞DOM解析, 下载完成后立即解析执行js

2.3.3 script属性: defer: 异步加载js文件,采用并行下载,不会阻塞DOM解析,并且在解析DOM之后执行脚本

所以: 1. 优化 JavaScript 的首要规则:将脚本放在底部!

2. 使用无阻塞脚本

3. 动态的script

解析CSS => CSSOM

页面中所有的CSS由样式表CSSStyleSheet集合构成,而CSSStyle是一系列CSSRule的集合,每一条CSSRule则由选择器CSSStyleSelector部分和

声明CSSStyleDeclaration部分构成, 而CSSStyleDeclaration是css树形和值的key-Value集合

CSS解析完毕后进行CSSRule的匹配过程,寻找满足每条css规则Selector部分的HTML元素,然后将其Declaration部分应用于该元素,

实际上还会考虑样式的继承和样式默认(遵循CSS规则)

p, div{ margin-top: 3px;}

.error{color:red}

|

CSSStyleSheet

| |

CSSRule CSSRule

| | | |

Selectors Declaration Selectors Declaration

| | | | | | |

p div margin-top 3px .error color red

布局: 渲染树(Render Tree) <= attchment(DOM Tree + Style Rules)

渲染树用于表示文档的可视信息,记录文档中每个可视元素的布局和渲染方式 HTML页面通过CSS控制页面布局,所以渲染树的每个节点对象都需要知道自己身上的CSS属性,

那么CSSSelector此时就是在找到对应的渲染节点

所以渲染树的每个Node都存储了绘制页面所需的样式及布局信息,每个节点都知道如何去绘制自己,这也就是渲染树与DOM树的区别,(DOM节点没有绘制页面所需的样式及布局信息)

渲染树用于显示,那些不可见的元素不会出现在渲染树中 不可见元素 display: none 不会出现在渲染树中 visiblity: hidden 会显示在渲染树中

opacity: 0 会显示在渲染树中 filter:alpha(opacity=0)会显示在渲染树中

【回流(reflow)】 回流是指窗口尺寸被修改,发生滚动操作,或者元素位置相关的属性被更新时候,触发布局过程,在布局过程中要重新计算所有元素的位置信息

回流发生在Render树上,脱离文档流指的就是在此时布局是不按照正常布局排列布局

触发回流的操作: 1. 改变盒模型属性

2. DOM树的结构变化

3. 调整浏览器窗口大小

4. 获取某些属性: offset scroll client getComputerStyle currentStyle 触发回流一定会触发后续的重绘操作,相对于一个元素的回流,

可能会影响到父元素,例如 浮动导致父元素的高度塌陷/定位属性等

布局优化方案: 尽量触发小规模的重绘,不会触发回流

1. 不要一条一条修改DOM属性,修改className或者修改CSSText

2. 对于一个元素进行复杂的操作时,可以先隐藏它,操作完成后再显示

3. 在需要经常获取那些引起浏览器回流的属性值时,要缓存到变量中

4. 不要使用table布局,因为一个小改动可能会造成整个table重新布局

5. 对于一些进行动画的元素,可以进行硬件渲染,从而避免重绘和回流

【重绘(repaint)】 重绘是指当与视觉相关的样式属性值被更新时会触发绘制过程,在绘制过程中要重新计算元素的视觉信息,使元素呈现新的外观;

元素的重绘只发生在渲染层 render layer上。所以,如果要改变元素的视觉属性,最好让该元素成为一个独立的渲染层

———————————————————————————————–

浏览器~加载,解析,渲染

浏览器是如何进行加载、解析、渲染的呢?

1、用户访问网页,DNS服务器(域名解析系统)会根据用户提供的域名查找对应的IP地址,找到后,系统会向对应IP地址的网络服务器发送一个http请求。

2、网络服务器解析请求,并发送请求给数据库服务器。

3、数据库服务器将请求的资源返回给网络服务器,网络服务器解析数据,并生成html文件,放入http response中,返回给浏览器。

4、浏览器解析 http response。

1~4步骤需要了解HTTP协议。

访问服务器端可能遭遇的问题:如果网络服务器无法获取数据库服务器返回的资源文件(http response 404),

或者由于并发原因暂时无法处理用户的http请求(http response 500)

5、浏览器解析 http response后,需要下载html文件,以及html文件内包含的外部引用文件,及文件内涉及的图片或者多媒体文件。

———————————————————————————————–

HTTP/1.0/1.1/2.0的区别以及http和https的区别

(纯干货)HTTP/1.0/1.1/2.0的区别以及http和https的区别 – 码农教程

TCP

传输控制协议(TCP,Transmission Control Protocol)是一种面向连接的、可靠的、基于字节流的传输层通信协议,由IETF的RFC 793 定义。

TCP旨在适应支持多网络应用的分层协议层次结构。 连接到不同但互连的计算机通信网络的主计算机中的成对进程之间依靠TCP提供可靠的通信服务。

TCP假设它可以从较低级别的协议获得简单的,可能不可靠的数据报服务。 原则上,TCP应该能够在从硬线连接到分组交换或电路交换网络的各种通信系统之上操作。

TSL和SSL

是一种由专门的机构发放的安全证书

—————————vue hook作用—————————————–

1. 在同一个组件中

例如:在mounted中添加一个监听需要在beforeDistroy中移除这个监听,考虑到某些原因你不想再写个beforeDistroy去实现,这时候绿巨人hook就该登场了!

mounted () {

window.addEventListener('online', this.handleOnline)

this.$once('hook:beforeDestroy', function () {

window.removeEventListener('online', this.handleOnline)

})

},

就是你在任意地方用 this.$on/$once('hook:生命周期',callback),就可以监听到生命周期的变化了

2. 在父组件监听子组件的生命周期方法

如果你站在父组件里想在子组件的mounted方法里边做一些事情你会怎么办呢?

//父组件中这样写

<rl-child

:value="40"

@hook:mounted="handleChildMounted"

/>

// 子组件中不用写东西

mounted () {

},

——————————Q & A———————————————

———dom树节点和渲染树节点一一对应吗,有什么是dom树会有,渲染树不会有的节点(了解)

DOM节点基本和HTML语法树节点一一对应,如果是position为absolute或者float的则会放到对应的位置;display为none的不会存在渲染树上

———CSS会阻塞dom解析吗?(了解)

对于一个HTML文档来说,不管是内联还是外链的CSS,都会阻碍后续的DOM渲染,但是不会阻碍后续DOM的解析

如何优化:因为Css的解析会阻塞页面的渲染,为了让页面尽早的呈现处理,那么就要避免一些无用的css文件。

使用媒体查询可以让css文件只在必要的时候解析,进而避免不必需的渲染阻塞,加快页面呈现时间。

———requestIdleCallback是干什么用的(了解)

当关注用户体验,不希望因为一些不重要的任务(如统计上报)导致用户感觉到卡顿的话,就应该考虑使用requestIdleCallback。

因为requestIdleCallback回调的执行的前提条件是当前浏览器处于空闲状态。

**react 16核心改动**

———浏览器的渲染原理

要了解浏览器渲染页面的过程,首先得知道一个名词——关键渲染路径。关键渲染路径是指浏览器从最初接收请求来的HTML、

CSS、javascript等资源,然后解析、构建树、渲染布局、绘制,最后呈现给用户能看到的界面这整个过程。

用户看到页面实际上可以分为两个阶段:页面内容加载完成和页面资源加载完成,分别对应于DOMContentLoaded和Load。

DOMContentLoaded事件触发时,仅当DOM加载完成,不包括样式表,图片等

load事件触发时,页面上所有的DOM,样式表,脚本,图片都已加载完成

———浏览器的渲染过程(记熟)

浏览器渲染的过程主要包括以下五步:

浏览器将获取的HTML文档解析成DOM树。

处理CSS标记,构成层叠样式表模型CSSOM(CSS Object Model)。

将DOM和CSSOM合并为渲染树(rendering tree),代表一系列将被渲染的对象。

渲染树的每个元素包含的内容都是计算过的,它被称之为布局layout。浏览器使用一种流式处理的方法,只需要一次绘制操作就可以布局所有的元素。

将渲染树的各个节点绘制到屏幕上,这一步被称为绘制painting。

需要注意的是,以上五个步骤并不一定一次性顺序完成,比如DOM或CSSOM被修改时,亦或是哪个过程会重复执行,这样才能计算出哪些像素需要在屏幕上进行重新渲染。

而在实际情况中,JavaScript和CSS的某些操作往往会多次修改DOM或者CSSOM。

———关键渲染路径详述(记熟)

关键渲染路径是指浏览器从最初接收请求来的HTML、CSS、javascript等资源,然后解析、构建树、渲染布局、绘制,最后呈现给用户能看到的界面这整个过程。

———避免回流的方式

回流是指浏览器为了重新渲染部分或者全部的文档而重新计算文档中元素的位置和几何构造的过程。

因为回流可能导致整个dom树的重新构造,所以是性能的一大杀手

减少页面回流

1、一起变化

如果要改变一个元素的样式,可以将所有样式集中在一个class上面一次变化,而不是变化几次:

2、具有动画效果请使用absolute

因为absolute元素的改变对其它元素的回流影响不大,所以我们的动画效果的元素还是将他搞成absolute吧。

3、 避免使用表格布局(记住只是布局哦,我们数据还是应该用表格的)

4、 请绝对不要使用CSS表达式,性能杀手啊,特别是IE

5、在最末改变元素

因为回流是自上而下的,所以下不及上,我们在最后面修改信息对全局影响越少。

6、动画移动时候,要控制

比如我们拖动元素时候,我是在他x或者y坐标改变5px才操作,这样虽说降低了平滑度,但是对性能有提高。

———跨域的方式(重点)

9种常见的前端跨域解决方案(详解)_慕课手记

———前端的网络安全如何防御(xss,csrf)

xss(跨站脚本攻击):攻击者通过在目标网站上注入恶意脚本,使之在用户的浏览器上运行。利用这些恶意脚本,攻击者可获取用户的敏感信息如 Cookie、SessionID 等,进而危害数据安全。

1、输入过滤

输入侧过滤能够在某些情况下解决特定的 XSS 问题,但会引入很大的不确定性和乱码问题。在防范 XSS 攻击时应避免此类方法。

当然,对于明确的输入类型,例如数字、URL、电话号码、邮件地址等等内容,进行输入过滤还是必要的。

1-1.防止 HTML 中出现注入。

1-2.防止 JavaScript 执行时,执行恶意代码。

2、预防存储型和反射型 XSS 攻击

1-1.改成纯前端渲染,把代码和数据分隔开。

1-2.对 HTML 做充分转义。

3、纯前端渲染

在很多内部、管理系统中,采用纯前端渲染是非常合适的。但对于性能要求高,或有 SEO 需求的页面,我们仍然要面对拼接 HTML 的问题。

4、转义 HTML

HTML 的编码是十分复杂的,在不同的上下文里要使用相应的转义规则。建议使用较全的转义库方法

5、预防 DOM 型 XSS 攻击

DOM 型 XSS 攻击,实际上就是网站前端 JavaScript 代码本身不够严谨,把不可信的数据当作代码执行了。

在使用 .innerHTML、.outerHTML、document.write() 时要特别小心,不要把不可信的数据作为 HTML 插到页面上,而应尽量使用 .textContent、.setAttribute() 等。

如果用 Vue/React 技术栈,并且不使用 v-html/dangerouslySetInnerHTML 功能,就在前端 render 阶段避免 innerHTML、outerHTML 的 XSS 隐患。

DOM 中的内联事件监听器,如 location、onclick、onerror、onload、onmouseover 等,<a> 标签的 href 属性,

JavaScript 的 eval()、setTimeout()、setInterval() 等,都能把字符串作为代码运行。如果不可信的数据拼接到字符串中传递给这些 API,很容易产生安全隐患,请务必避免。

6、输入内容长度控制

对于不受信任的输入,都应该限定一个合理的长度。虽然无法完全防止 XSS 发生,但可以增加 XSS 攻击的难度。

7、其他安全措施

HTTP-only Cookie: 禁止 JavaScript 读取某些敏感 Cookie,攻击者完成 XSS 注入后也无法窃取此 Cookie。

验证码:防止脚本冒充用户提交危险操作。

csrf(跨站点请求伪造):目前防御 CSRF 攻击主要有三种策略:

1、验证 HTTP Referer 字段;

2、在请求地址中添加 token 并验证;

3、在 HTTP 头中自定义属性并验证。(XMLHttpRequest )

4、Chrome 51 开始,浏览器的 Cookie 新增加了一个SameSite属性,用来防止 CSRF 攻击和用户追踪。

———cookies的保护方式

cookies的保护方式_行成于思的博客-CSDN博客

Cookie 中有个属性secure,当该属性设置为true时,表示创建的 Cookie 会被以安全的形式向服务器传输,也就是只能在 HTTPS 连接中

被浏览器传递到服务器端进行会话验证,如果是 HTTP 连接则不会传递该cookie信息,所以不会被窃取到Cookie 的具体内容。就是只允许

在加密的情况下将cookie加在数据包请求头部,防止cookie被带出来。

另一个是 HttpOnly属性,如果在Cookie中设置了"HttpOnly"属性,那么通过程序(JS脚本、Applet等)将无法读取到Cookie信息,这样能有效的防止XSS攻击。

secure属性是防止信息在传递的过程中被监听捕获后信息泄漏,HttpOnly属性的目的是防止程序获取cookie后进行攻击。

但是这两个属性并不能解决cookie在本机出现的信息泄漏的问题(FireFox的插件FireBug能直接看到cookie的相关信息)

1.”重名检查“

但是这个有难度。因为cookie 时RFC定义的,而修改RFC中的cookie 标准是有困难的。

2.清理cookie

Cookie是由于便利性而存在的,那么总是在使用后清除cookie,其实就达不到cookie的便利作用了。

3.不在 Cookies 中存放敏感信息。

这是一个 理想化的思路,其实质就是抛弃 Cookies,但明显违背安全平台的设计思路,不能因为 Cookies 可能存在欺骗攻击而废止它的便利性。

4. 严格保护数据库不泄露

保护数据库不泄露不仅仅是 Cookies 防御技术中需要注意的安全措施,也是其它安全措施中必须注意的重点。在数据库足够安全的情况下,

即使产生cookie注入,cookie 注入的危害也会被极大的减小。这时从cookie 造成损失的后果上来减小cookie的危害。可以对数据库进行加密等等。

5. 严格堵住脚本系统中可能提交盗取 Cookies 的代码,把好验证关。

为了实现正常的用户交互功能,一般的脚 本系统都有发帖、留言、讨论、评论等功能,这些功能都允许用户提交或者上传一些自己的代码、

程序,这样的代码有可能就是盗取 Cookies 的代码,因此,出于安全考虑,管理员要对这些代码进行严格审查,或者使用过滤插件、过滤

软件过滤掉用户提交的一些非法信息来减小恶意代码的运行。

6. 使用 Session 和 Cookies 双重验证。

一般给予cookie 的系统会在cookie 中存储两个或多个变量,常见的是 username ( 用户名) 和 userlevel ( 用户等级) ,

对于安全程序员来说, 既然cookie 是不安全的,而又必须把用户登录信息 存储下来以方便交互,就应该增加存储在 session。

cookie保存在客户端,容易被篡改,session保存在服务器端,用户难以修改,当用户与网站的交互结束时,Session 的生命周期随即结束,

从这个层面上说,session类似一次一密,因此Session 的安全性比 Cookies 要高。所以两者结合适用,比较安全。

该方法技术实现为:在 cookie 中存储用户名和密码,当用户访问一个页面是先读取 session,如果有内容则以 session 为准,

否则读取 cookie,按照 cookie 中提供的用户名和密码进行 “不透明”的登录一次,用以判断 cookie 中的内容是否合法,若合法再进而存入 session 中。

7.加防篡改验证码,加个登录随机验证码

在用户登录时,多增加一层验证,需要验证两个 cookie,一个验证的是用户名,一个验证的是随机数,而这个随机数是系统自动产生的,

某时间段内相对为唯一的 “验证码”。

这种方法的技术实现方式为:修改用户登录页面代码,当用户名和密码通过系统正确验证之后,从数据库中取出对应这个用户名的 randnum,

并写入 cookie,也就是说此时类似于产生了两个 cookie。

这样以来,就算是攻击者通过不法手段伪造了管理员的用户名,但这个随机产生的验证码就很难猜到了,而且这个随机数是不停变化的,

就能在一定程度上增加了cookie攻击的难度。

8.运用HSTS平台,对于特定的域名强制进行HTTPS访问。

———浏览器的缓存机制

浏览器每次发起请求,都会先在浏览器缓存中查找该请求的结果以及缓存标识

浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中

深入理解浏览器的缓存机制

缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷。

1、强缓存优先于协商缓存进行

2、协商缓存失败,返回200,重新返回资源和缓存标识

3、协商缓存生效则返回304,继续使用缓存

强制缓存优先于协商缓存进行,若强制缓存(Expires和Cache-Control)生效则直接使用缓存,若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match),

协商缓存由服务器决定是否使用缓存,若协商缓存失效,那么代表该请求的缓存失效,返回200,重新返回资源和缓存标识,再存入浏览器缓存中;生效则返回304,继续使用缓存。

———什么文件用强缓存,什么文件用协商缓存

深入理解浏览器的缓存机制

强缓存:不会向服务器发送请求,直接从缓存中读取资源,在chrome控制台的Network选项中可以看到该请求返回200的状态码,并且Size显示from disk cache或

from memory cache。强缓存可以通过设置两种 HTTP Header 实现:Expires 和 Cache-Control。

协商缓存:强制缓存失效后,浏览器携带缓存标识向服务器发起请求,由服务器根据缓存标识决定是否使用缓存的过程,主要有以下两种情况:

协商缓存生效,返回304和Not Modified

协商缓存失效,返回200和请求结果

———React-Native的原理,优缺点

———react的虚拟dom和diff描述

———react渲染优化(class,hook)

———react的context的使用场景

———mysql和mongo的区别,使用情景

MySQL是关系型数据库。Mongodb是非关系型数据库(nosql ),属于文档型数据库。

MySQL适用于数据量非海量的情况

mongodb适用于事件记录,内容管理或者博客平台等。

mongodb与mysql区别(超详细)

———node有什么情况会导致内存溢出

node http服务器,当请求高并发,内存一直不回收,随着时间增长,最终内存溢出

数据量过大,没有释放内存

———node的内存分配

Node.js的内存分配和垃圾回收 | 大专栏

Node.js是一个由JavaScript V8引擎控制的C++程序

V8的内存管理模式一个运行的程序通常是通过在内存中分配一部分空间来表示的。这部分空间被称为驻留集(Resident Set)。

V8的内存管理模式有点类似于Java虚拟机(JVM),它会将内存进行分段:

代码 Code:实际被执行的代码

栈 Stack:包括所有的携带指针引用堆上对象的值类型(原始类型,例如整型和布尔),以及定义程序控制流的指针。

堆 Heap:用于保存引用类型(包括对象、字符串和闭包)的内存段

查看内存使用情况:console.log(process.memoryUsage());

———event loop(浏览器和node)

进程是 CPU资源分配的最小单位;线程是 CPU调度的最小单位。

1.Micro-Task 与 Macro-Task

浏览器端事件循环中的异步队列有两种:macro(宏任务)队列和 micro(微任务)队列。宏任务队列可以有多个,微任务队列只有一个。

常见的 macro-task(宏任务) 比如:setTimeout、setInterval、script(整体代码)、 I/O 操作、UI 渲染等。

常见的 micro-task(微任务) 比如: new Promise().then(回调)、MutationObserver(html5新特性) 等。

———首屏优化方案

1. cdn分发(减少传输距离)。通过在多台服务器部署相同的副本,当用户访问时,服务器根据用户跟哪台服务器距离近,来决定哪台服务器去响应这个请求。

2. 后端在业务层的缓存。数据库查询缓存是可以设置缓存的,这个对于处于高频率的请求很有用。浏览器一般不会对content-type: application/json;的接口进行缓存,

所以有时需要我们手动地为接口设置缓存。比如一个用户的签到状态,它的缓存时间可以设置到明天之前。

3. 静态文件缓存方案。这个最常看到。现在流行的方式是文件hash+强缓存的一个方案。比如hash+ cache control: max-age=1年。

4. 前端的资源动态加载:

a. 路由动态加载,最常用的做法,以页面为单位,进行动态加载。

b. 组件动态加载(offScreen Component),对于不在当前视窗的组件,先不加载。

c. 图片懒加载(offScreen Image),同上。值得庆幸的是,越来越多的浏览器支持原生的懒加载,通过给img标签加上loading="lazy来开启懒加载模式。

5. 减少请求的数量。这点在http1.1的优势很明显,因为http1.1的请求是串行的(尽管有多个tcp通道),每个请求都需要往返后才能继续下个请求。

此时合并请求可以减少在路途上浪费的时间,此外还会带来重复的请求头部信息(比如cookie)。在http2.0中这个问题会弱化很多,但也有做的必要。

6. 页面使用骨架屏。意思是在首屏加载完成之前,通过渲染一些简单元素进行占位。骨架屏的好处在于可以减少用户等待时的急躁情绪。

这点很有效,在很多成熟的网站(京东、淘宝、Youtube)都有大量应用。没有骨架屏的话,一个loading的菊花图也是可以的。

7. 使用ssr渲染。

8. 引入http2.0。http2.0对比http1.1,最主要的提升是传输性能,在接口小而多的时候会更加明显。

9. 利用好http压缩。即使是最普通的gzip,也能把bootstrap.min.css压缩到原来的17%。可见,压缩的效果非常明显,特别是对于文本类的静态资源。

另外,接口也是能压缩的。接口不大的话不用压缩,因为性价比低(考虑压缩和解压的时间)。

10. 利用好script标签的async和defer这两个属性。功能独立且不要求马上执行的js文件,可以加入async属性。如果是优先级低且没有依赖的js,可以加入defer属性。

11. (少用)选择先进的图片格式。使用 WebP 的图片格式来代替现有的jpeg和png,当页面图片较多时,这点作用非常明显。

把部分大容量的图片从BaseLine JPEG切换成Progressive JPEG(理解这两者的差别)也能缩小体积。

12. (少用)渲染的优先级。浏览器有一套资源的加载优先级策略。也可以通过js来自己控制请求的顺序和渲染的顺序。一般我们不需要这么细粒度的控制,而且控制的代码也不好写。

13. (少用)前端做一些接口缓存。前端也可以做接口缓存,缓存的位置有两个,一个是内存,即赋值给运行时的变量,另一个是localStorage。比如用户的签到日历(展示用户是否签到),

我们可以缓存这样的接口到localStorage,有效期是当天。或者有个列表页,我们总是缓存上次的列表内容到本地,下次加载时,我们先从本地读取缓存,并同时发起请求到服务器获取最新列表。

在App中如何实现前端资源离线缓存(方案)

———浏览器的输入url后的过程

1、用户访问网页,DNS服务器(域名解析系统)会根据用户提供的域名查找对应的IP地址,找到后,系统会向对应IP地址的网络服务器发送一个http请求。

2、网络服务器解析请求,并发送请求给数据库服务器。

3、数据库服务器将请求的资源返回给网络服务器,网络服务器解析数据,并生成html文件,放入http response中,返回给浏览器。

4、浏览器解析 http response。

1~4步骤需要了解HTTP协议。

访问服务器端可能遭遇的问题:如果网络服务器无法获取数据库服务器返回的资源文件(http response 404),

或者由于并发原因暂时无法处理用户的http请求(http response 500)

5、浏览器解析 http response后,需要下载html文件,以及html文件内包含的外部引用文件,及文件内涉及的图片或者多媒体文件。

———js异步方式

Javascript异步编程的4种方法 – 阮一峰的网络日志

一、回调函数

二、事件监听

三、发布/订阅模式

四、promise

———promise.resolve是干嘛的

promise.then如何实现链式调用

promise.then不返还一个promise还能用then吗

promise.finally的作用,如何自己实现finally

promise原理

promise相关:

ES6 Promise用法讲解 – Samve – 博客园

Promise.resolve方法有下面三种形式:

Promise.resolve(value);

Promise.resolve(promise);

Promise.resolve(thenable);

Promise.resolve可以把,同步值,一个promise,一个thenable类型的对象都包裹成一个新的Promise。

提供了创建一个Promise的副本的能力,是将一个类似Promise的对象转换成一个真正的Promise对象。

它的一个重要作用是将一个其他实现的Promise对象封装成一个当前实现的Promise对象。

例如你正在用bluebird,但是现在有一个Q的Promise,那么你可以通过此方法把Q的Promise变成一个bluebird的Promise。

———webpack的异步加载如何实现

webpack异步加载文件的方式 – 看风景就 – 博客园

1、import

2、require.ensure

3、bundle-loader

———webpack的分包策略

require.ensure 这个函数是一个代码分离的分割线,表示回调里面的 require 是我们想要进行分割出去的,即 require('./A.js'),

把 A.js 分割出去,形成一个 webpack 打包的单独 js 文件。

———csrf防御手段

目前防御 CSRF 攻击主要有四种策略:

1、验证 HTTP Referer 字段;

2、在请求地址中添加 token 并验证;

3、在 HTTP 头中自定义属性并验证。(XMLHttpRequest )

4、Chrome 51 开始,浏览器的 Cookie 新增加了一个SameSite属性,用来防止 CSRF 攻击和用户追踪。

———cookie的samesite属性作用

1、Strict

Strict最为严格,完全禁止第三方 Cookie,跨站点时,任何情况下都不会发送 Cookie。换言之,只有当前网页的 URL 与请求目标一致,才会带上 Cookie。

Set-Cookie: CookieName=CookieValue; SameSite=Strict;

这个规则过于严格,可能造成非常不好的用户体验。比如,当前网页有一个 GitHub 链接,用户点击跳转就不会带有 GitHub 的 Cookie,跳转过去总是未登陆状态。

2、Lax

Lax规则稍稍放宽,大多数情况也是不发送第三方 Cookie,但是导航到目标网址的 Get 请求除外。

Set-Cookie: CookieName=CookieValue; SameSite=Lax;

导航到目标网址的 GET 请求,只包括三种情况:链接,预加载请求,GET 表单。POST 表单、iframe、AJAX、Image正常情况发送cookie,Lax下不发送

3、None

Chrome 计划将Lax变为默认设置。这时,网站可以选择显式关闭SameSite属性,将其设为None。不过,前提是必须同时设置Secure属性(Cookie 只能通过 HTTPS 协议发送),否则无效。

下面的设置无效。

Set-Cookie: widget_session=abc123; SameSite=None

下面的设置有效。

Set-Cookie: widget_session=abc123; SameSite=None; Secure

———js对象循环引用会导致什么问题

内存泄露。JS中引用计数垃圾回收失败。

在现在广泛采用的标记清除回收策略中就不会出现上面的问题:不用计数,而是在要清除的变量上做了标记

———react如何阻止原生默认事件

return false无效 必须 e.preventDefault()

———react 异步渲染原理,优先级如何划分

在做显示方面的工作时,经常会听到一个目标叫 60 帧,这表示的是画面的更新频率,也就是画面每秒钟更新 60 次。

这是因为在 60 帧的更新频率下,页面在人眼中显得流畅,无明显卡顿。每秒钟更新 60 次也就是每 16ms 需要更新一次页面,如果更新页面消耗的时间不到 16ms,

那么在下一次更新时机来到之前会剩下一点时间执行其他的任务,只要保证及时在 16ms 的间隔下更新界面就完全不会影响到页面的流畅程度。

fiber 的核心正是利用了 60 帧原则,实现了一个基于优先级和 requestIdleCallback 的循环任务调度算法。

requestIdleCallback 是浏览器提供的一个 api,可以让浏览器在空闲的时候执行回调,在回调参数中可以获取到当前帧剩余的时间,fiber 利用了这个参数,

判断当前剩下的时间是否足够继续执行任务,如果足够则继续执行,否则暂停任务,并调用 requestIdleCallback 通知浏览器空闲的时候继续执行当前的任务。

优先级:

{

Synchronous: 1, // 同步任务,优先级最高

Task: 2, // 当前调度正执行的任务

Animation 3, // 动画

High: 4, // 高优先级

Low: 5, // 低优先级

Offscreen: 6, // 当前屏幕外的更新,优先级最低

}

Fiber = {

tag // 标记任务的进度

return // 父节点

child // 子节点

sibling // 兄弟节点

alternate // 变化记录

…..

};

———react hook有自己做一些自定义的hook吗

———react key的原理

———react如何实现函数式调用组件,TOAST – the talk on a small thing -()

———react新增了什么生命周和删除了什么生命周期,为什么要删除

———node对于option请求如何处理

———node如何处理cors跨域

———ES modules和commonjs的区别

———node的event loop和浏览器的区别

———dns查询过程,dns用什么协议发起dns查询的

———tcp和udp区别

———tcp的三次握手和四次挥手

———协商缓存和强缓存的区别

深入理解浏览器的缓存机制

———https协议握手大概过程

———对称加密和非对称加密的区别

———非对称加密,私钥和公钥的区别

———https证书的作用

———从扑克牌中随机抽5张牌,判断是不是一个顺子,即这5张牌是不是连续的。2~10为数字本身,A为1,J为11,Q为12,K为13,而大、小王为 0 ,可以看成任意数字。

A 不能视为 14。

———绑定事件有多少种方式

———事件触发的流程,捕获和冒泡

———捕获阶段能终止吗

———终止冒泡阶段有哪些

———如果实现one绑定事件

———事件委托的原理

———event.target和event.currtager的区别

———浏览器显示一个图片有什么方式

———如何获取url中的?后的参数

———浏览器的内存回收机制 标记清除还是引用计数?

———如何解决跨域

———什么是简单请求什么复杂请求

———const和let有什么区别

———ES6常用的api有哪些

———数组断引用的方式有什么

———Base64图片有什么问题

———Http强缓存和协商缓存用的是什么字段,整体流程是怎样

深入理解浏览器的缓存机制

强制缓存优先于协商缓存进行,若强制缓存(Expires和Cache-Control)生效则直接使用缓存,若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match),

协商缓存由服务器决定是否使用缓存,若协商缓存失效,那么代表该请求的缓存失效,返回200,重新返回资源和缓存标识,再存入浏览器缓存中;生效则返回304,继续使用缓存。

———Https原理

———Https第一次请求会携带什么

———Ca证书的内容是什么

———Https2.0的特性

———xss攻击原理的防御方式

———Csrf攻击原理和防御方式

———二进制分帧的具体是什么

———Keep alive和多路复用的区别

———Option请求的作用

———Node gc方式

———新生代和老生代的区别

———新生代内存地址移动到老生代内存地址的过程

———Node如何保证第三方接口的稳定性

———浏览器从写入url到加载完毕的流程

———浏览器白屏原因

———页面打开后cpu和内存快速增长,如何定位问题,可能有什么问题

———长列表优化,以及长列表中,如果带搜索功能如何实现

自学插图

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序