前端知识体系9.计算器及浏览器基础知识

本文目录：

• 1.简述下cookie,session,localstorage,sessionstorage的区别
• 2.谈下cookie的弊端
• 3.怎么禁止JS访问cookie
• 4.cookie有哪些属性
• 5.线程和进程的区别
• 6.DoS攻击？CSRF？XSS？SQL注入？
• 7.浏览器的机制你了解多少
• 8.v8引擎 如何执行 js 代码
• 9.前端常用的设计模式
• 10.前端数据结构与算法
• 11.说下缓存及实现方式
• 12.为什么第二次打开某个网页会比首次打开速度快很多

1.简述下cookie,session,localstorage,sessionstorage的区别

1.cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
2.存储大小限制也不同，cookie数据不能超过4k，同时因为每次http同源请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
3.生命周期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
4.作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
5.Web Storage支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage的 api 接口使用更方便。Web Storage存储的都是字符串类型的数据，Web Storage的核心方法

• 设置值setItem（"key","value"）
• 获取值getItem("key")
• 删除值removeItem("key")
• 清空clear（）
  而cookie我们在项目开发中，会对其进行二次封装。

2.谈下cookie的弊端

a. 每个特定的域名下最多生成的cookie个数有限制
b. IE和Opera会清理近期最少使用的cookie，Firefox会随机清理cookie
c. cookie的最大大约为4096字节，为了兼容性，一般不能超过4095字节
d. 安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。

3.怎么禁止JS访问cookie

通过JS
document.cookie = name+"="+value+expires+"; domain=my.domain.com; path=/; HttpOnly;";
服务端进行设置
response.setHeader("Set-Cookie", "cookiename=value; Path=/;Domain=domainvalue;Max-Age=seconds;HTTPOnly");
设置完之后使用JS脚本是读取不到该cookie的
注意：将cookie设置成HttpOnly是为了防止XSS攻击，窃取cookie内容，这样就增加了cookie的安全性，即便是这样，也不要将重要信息存入cookie。

4.cookie有哪些属性

name字段：一个cookie的名称
value字段：一个cookie的值
domain字段：可以访问此cookie的域名
path字段：可以访问此cookie的页面路径
Size字段：此cookie大小
http字段：cookie的httponly属性，若此属性为True，则只有在http请求头中会有此cookie信息，而不能通过document.cookie来访问此cookie。
secure字段：设置是否只能通过https来传递此条cookie。
expires/Max-Age字段：设置cookie超时时间。如果设置的值为一个时间，则当到达该时间时此cookie失效。不设置的话默认是session，意思是cookie会和session一起失效，当浏览器关闭（并不是浏览器标签关闭，而是整个浏览器关闭）后，cookie失效。

5.线程和进程的区别

进程：每个进程都有独立的代码和数据空间（进程上下文），进程间的切换会有较大的开销，一个进程包含1--n个线程。（进程是资源分配的最小单位）
线程：同一类线程共享代码和数据空间，每个线程有独立的运行栈和程序计数器(PC)，线程切换开销小。（线程是cpu调度的最小单位）
强调一点：一个软件不等于一个进程，一个软件可能包含有多个互相独立的进程。

6.DoS攻击？CSRF？XSS？SQL注入？

DoS攻击
DoS(Denial of Service)，拒绝服务，顾名思义这种攻击是为了让服务器无法提供正常服务，最常见的DoS攻击是网络带宽攻击和连通性攻击。带宽攻击指以极大的通信量冲击网络，使得所有可用网络资源都被消耗殆尽，最后导致合法的用户请求无法通过。连通性攻击指用大量的连接请求冲击计算机，使得所有可用的操作系统资源都被消耗殆尽，最终计算机无法再处理合法用户的请求。
CSRF攻击
CSRF（Cross Site Request Forgery）攻击，即跨站请求伪造，是一种常见的Web攻击。
攻击者可以盗用我们的登陆信息，以我们的身份模拟发送各种请求。例如：我们正常打开一个网站，输入账号密码登陆，此时服务器会返回一个cookie，浏览器将其保存在本地来识别身份信息。这时如果我们不小心打开了一个钓鱼网站，这个钓鱼网站就可以带着cookie冒充我们为所欲为。归根结底是源于Web的隐式身份验证，Web的身份验证机制虽然可以保证一个请求是来自于某个用户的浏览器，但却无法保证该请求是用户批准发送的。
XSS漏洞
XSS（Cross Site Scripting），跨站脚本攻击，为了与层叠样式表（一般意义上的CSS）区别开，将其缩写为XSS。XSS的原理是黑客向Web页面里插入恶意可执行网页脚本代码，当用户浏览该页之时，嵌入其中Web里面的脚本代码会被执行，从而可以达到黑客盗取用户信息或其他侵犯用户安全隐私的目的。XSS漏洞主要分为持久型XSS漏洞和非持久性XSS漏洞。
SQL注入
SQL注入即是指web应用程序对用户输入数据的合法性没有判断或过滤不严，攻击者可以在web应用程序中事先定义好的查询语句的结尾上添加额外的SQL语句，在管理员不知情的情况下实现非法操作，以此来实现欺骗数据库服务器执行非授权的任意查询，从而进一步得到相应的数据信息。

7.浏览器的机制你了解多少

进程与线程：

首先，明确的是：浏览器是多进程的。浏览器的进程主要包括以下几种：
1.Browser进程：浏览器的主进程（负责协调，主控）
2.第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时才创建
3.GPU进程：最多一个，用于3D绘制
4.浏览器渲染进程（内核）：默认每个Tab页面一个进程，互不影响，控制页面渲染，脚本执行，事件处理等（有时候会优化，如多个空白tab会合并成一个进程）
多进程浏览器的优点
避免页面渲染影响整个浏览器
避免第三方插件影响整个浏览器
多进程充分利用多核优势
方便使用沙盒模型隔离插件等进程，提高浏览器稳定性
浏览器的渲染进程（浏览器内核），是多线程的，主要以下几大类：
1.GUI线程
负责渲染浏览器界面HTML元素,当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行。在Javascript引擎运行脚本期间,GUI渲染线程都是处于挂起状态的,也就是说被”冻结”了.
2.Javascript引擎线程
也可以称为JS内核，主要负责处理Javascript脚本程序，例如V8引擎。Javascript引擎线程理所当然是负责解析Javascript脚本，运行代码。Javascript是单线程的，GUI 渲染线程 与 JavaScript引擎线程互斥！所以JS会阻塞页面加载。
3.事件触发线程
4.定时器线程
5.网络请求线程

事件循环机制

事件循环机制的核心是事件触发线程，由于执行栈产生异步任务，异步任务完成后事件触发线程将其回调函数传入到任务队列中，当执行栈为空，任务队列将队列头的回调函数入执行栈，从而新的一轮循环开始。这就是称为循环的原因。

导致页面无法立即响应的原因

导致页面无法响应的原因是执行栈中还有任务未执行完，或者是js引擎线程被GUI线程堵塞。

html文件解析过程

这个过程是在下载html文件之后，不包括网络请求过程

1. Browser进程下载html文件并将文件发送给renderer进程
2. renderer进程的GUI进程开始解析html文件来构建出DOM
3. 当遇到外源css时，Browser进程下载该css文件并发送回来，GUI线程再解析该文件，在这同时，html的解析也同时进行，但不会渲染（还未形成渲染树）
4. 当遇到内部css时，html的解析和css的解析同时进行
5. 继续解析html文件，当遇到外源js时，Browser进程下载该js文件并发送回来，此时，js引擎线程解析并执行js，因为GUI线程和js引擎线程互斥，所以GUI线程被挂起，停止继续解析html。直到js引擎线程空闲，GUI线程继续解析html。
6. 遇到内部js也是同理
7. 解析完html文件，形成了完整的DOM树，也解析完了css，形成了完整的CSSOM树，两者结合形成了render树
8. 根据render树来进行布局，若在布局的过程中发生了元素尺寸、位置、隐藏的变化或增加、删除元素时，则进行回流，修改
9. 根据render树进行绘制，若在布局的过程中元素的外观发生变换，则进行重绘
10. 将布局、绘制得到的各个简单图层的位图发送给Browser进程，由它来合并简单图层为复合图层，从而显示到页面上
11. 以上步骤就是html文件解析全过程，完成之后，如若当页面有元素的尺寸、大小、隐藏有变化时，重新布局计算回流，并修改页面中所有受影响的部分，如若当页面有元素的外观发生变化时，重绘。

8.v8引擎 如何执行 js 代码

主要核心流程分为两步 – 编译 和 执行

1. 首先将JavaScript代码转换为低级中间代码或者机器能够理解的机器代码，CPU只能识别机器代码，CPU不能直接识别汇编语言
2. 执行转换后的代码并输出执行结果
   V8执行JS代码的具体流程
3. 执行之前，准备所需的基础环境
   在 V8 启动执行 JavaScript 之前，它还需要准备执行 JavaScript 时所需要的一些基础环境，这些基础环境包括了 堆空间、栈空间、全局执行上下文、全局作用域、消息循环系统、内置函数 等，这些内容都是在执行 JavaScript 过程中需要使用到的。
   2.准备好基础环境，向V8提交要执行的JS代码‘
   首先，V8 会接收到要执行的 JavaScript 源代码，不过这对 V8 来说只是一堆 字符串，V8 并不能直接理解这段字符串的含义，它需要 结构化 这段字符串
   3.结构化字符串(JS源代码)
   结构化，是指信息经过分析后可 分解成多个互相关联的组成部分。各组成部分间有明确的层次结构，方便使用和维护，并有一定的操作规范；
   4.生成AST、作用域
   结构化之后，就生成了 抽象语法树（AST），AST 是便于 V8 理解的结构；在生成 AST 的同时，V8 还会 生成相关的作用域，作用域中存放相关变量；
   5.生成字节码
   有了 AST 和 作用域 之后，接下来就可以生成 字节码 了，字节码是介于 AST 和 机器代码 的中间代码。但是与特定类型的机器代码无关，解释器可以直接解释执行字节码 ，或者通过编译器将其编译为二进制的机器代码再执行；
4. 解释器解释执行字节码
   生成字节码之后，解释器就登场了，它会 按照顺序 解释执行字节码，并输出执行结果；

9.前端常用的设计模式

单例模式
观察者模式
工厂模式
命令模式
职责链模式
具体待以后再进行学习

10.前端数据结构与算法

初级前端的关注点就是写写页面，绑定事件，然后发后台发发请求拿数据，但是如果打算走全栈路线，用node做后台开发或者有志于做一个高级前端程序员，那么数据结构与算法是一定要掌握的。
先来看看js数据类型
基本类型(栈 stack) : Number、String 、Boolean、Null 和 Undefined , Symbol(es6 新增)； 基本数据类型是按值访问 由高向低分配,栈内存最大是 8MB,（超出报栈溢出）， String:是特殊的栈内存 （向高分配大小不定）,程序员分配
引用类型(堆 heap) :Object 、Array 、Function 、Data；引用类型数据在栈内存中保存的实际上是对象在堆内存中的引用地址(指针),向高分配,系统自动分配
具体待以后再进行学习

11.说下缓存及实现方式

前端缓存主要分为浏览器缓存和HTTP缓存。
浏览器的缓存方式有Cookie，LocalStorage和SessionStorage。
HTTP缓存分为强制缓存和协商缓存。
对于强制缓存，响应header中会有两个字段来标明失效规则（Expires/Cache-Control），服务器通知浏览器一个缓存时间，在缓存时间内，下次请求，直接用缓存，不在时间内，执行比较缓存策略。
Expires

Expires:Thu, 21 Jan 2020 23:29:02 GMT

Cache-Control

Cache-Control:max-age=3600

Cache-Control的出现，是为了克服Expires的时间客户端和服务端不一致的缺点（绝对时间），上面代码中的Cache-Control直接就规定了该资源有效期为3600秒（相同时间），规定时间内浏览器不会再发送此次的相同的请求
对于协商缓存，将缓存信息中的Etag和Last-Modified通过请求发送给服务器，由服务器校验，返回304状态码时，浏览器直接使用缓存。

Last-Modified: Wed, 26 Jan 2020 00:35:11 GMT

Cache-Control优先级高于Expires，Etag优先级高于Last-Modified/If-Modified-Since。
HTTP缓存的流程：
（1）先根据这个资源的http header判断它是否命中强缓存，如果命中，则直接从本地缓存中获取资源，不中则向服务器请求资源。
（2）当强缓存没有命中时，客户端会发送请求到服务器，服务器通过另一些request header验证这个资源是否命中协商缓存，这个过程成为http再验证，如果命中，服务器直接返回请求而不返回资源，而是告诉客户端之间从缓存中获取，客户端收到返回后就直接从客户端获取资源
（3）强缓存和协商缓存的共同之处在于：如果命中缓存，服务器不会返回资源；区别是：强缓存不发送请求打服务器，但是协商缓存会发送请求到服务器
（4）当协商缓存没有命中时，服务器会返回资源给客户端
（5）当ctrl+F5强制刷新网页时，直接从服务器加载，跳过强缓存和协商缓存
（6）当F5刷新页面时，跳过强缓存但会检查协商缓存
强缓存是利用http的返回头中的Expires或者Cache-Control两个字段来控制的，用来表示资源的缓存时间。
Expires该字段是http1.0时的规范，值是一个绝对时间的GMT格式的时间字符串，代表缓存的过期时间
Cache-Control:max-age该字段是http1.1的规范强缓存利用的是max-age的值来实现缓存资源的最大生命周期，单位是秒

12.为什么第二次打开某个网页会比首次打开速度快很多

如果第二次页面打开很快，主要原因是第一次加载页面过程中，缓存了一些耗时的数据。
主要是DNS 缓存和页面资源缓存这两块数据被浏览器进行了缓存。
其中，DNS 缓存比较简单，它主要就是在浏览器本地把对应的 IP 和域名关联起来，这里就不做过多分析了。我们重点看下浏览器资源缓存，下面是缓存处理的过程：
当服务器返回 HTTP 响应头给浏览器时，浏览器是通过响应头中的 Cache-Control 字段来设置是否缓存该资源。通常，我们还需要为这个资源设置一个缓存过期时长，而这个时长是通过 Cache-Control 中的 Max-age 参数来设置的：
Cache-Control:Max-age=2000
这也就意味着，在该缓存资源还未过期的情况下, 如果再次请求该资源，会直接返回缓存中的资源给浏览器。
但如果缓存过期了，浏览器则会继续发起网络请求，并且在 HTTP 请求头中带上：
If-None-Match:"4f80f-13c-3a1xb12a"
服务器收到请求头后，会根据 If-None-Match 的值来判断请求的资源是否有更新。
1.如果没有更新，就返回 304 状态码，相当于服务器告诉浏览器：“这个缓存可以继续使用，这次就不重复发送数据给你了。
2.如果资源有更新，服务器就直接返回最新资源给浏览器。
简要来说，很多网站第二次访问能够秒开，是因为这些网站把很多资源都缓存在了本地，浏览器缓存直接使用本地副本来回应请求，而不会产生真实的网络请求，从而节省了时间。同时，DNS 数据也被浏览器缓存了，这又省去了 DNS 查询环节。