【学习笔记】html & 浏览器

佑右
236 阅读14分钟

文中部分图片是学习的文章中抄录的，但是忘记存储文章地址了～

html基础知识

1、html 是标签语言，不是汇编语言

2、SVG 与 Canvas两者间的区别

SVG 是一种使用 XML 描述 2D 图形的语言。

Canvas 通过 JavaScript 来绘制 2D 图形。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

3、Canvas 与 SVG 的比较

下表列出了 canvas 与 SVG 之间的一些不同之处。

CanvasSVG
  • 依赖分辨率
  • 不支持事件处理器
  • 弱的文本渲染能力
  • 能够以 .png 或 .jpg 格式保存结果图像
  • 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
  • 不依赖分辨率
  • 支持事件处理器
  • 最适合带有大型渲染区域的应用程序（比如谷歌地图）
  • 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
  • 不适合游戏应用

4、html5提供了drag、drop功能，考拉拖拽可以尝试用这个属性来实现

5、manifest缓存，可以尝试缓存页面数据

6、Web Workers：html页面在页面执行脚本时是无法响应的知道脚本结束，web workers是运营在后台的js，独立与其他脚本，不会影响性能，可以做任何事情，不可以访问window、document、parent

7、SSE（server-sent event）：可以获取服务器发送的事件（客户端主动询问是否又可用的更新）

7、8 有相似的功能，建立浏览器和服务器之间的通信，区别在于webSocket是全双工通道，可以双向通信，功能更强，SSE是单项通信，只能服务器向浏览器发送，webSocket是一个新的协议，需要服务器端支持；SSE是建立咋HTTP协议上的，服务器软件都支持；

8、websocket：允许服务端主动向客户端推送数据（以前要实现这个功能需要不断轮训向服务器发送请求），只需要弯沉过一次握手，就可以创建持久性链接，并进行双向数据传输。

浏览器渲染

1、浏览器中输入html后的流程

DNS域名解析拿到服务器的Ip地址（DNS查询） =》 浏览器向服务器发送get请求（TCP链接、http请求） =》 服务器返回资源（服务器响应） =》 浏览器下载并解析html（客户端渲染）

客户端渲染

处理html标记构建dom树 =》 处理css标记构建cssom树 =》 dom和cssom合并成渲染树 =》 布局，计算每个节点的几何信息 =》 绘制到屏幕

2、html包含了dom、css、js等部分，这里的解析主要是dom的解析过程

3、dom解析是顺序（从上到下解析）的、渐进式（将解析的返回部分立刻显示出来）的

我们知道html解析，其实是有生成dom tree和cssdom tree，然后合并成render tree，这里之所以说是渐进式，是书中的child tree会合并render child tree 然后显示出来

这是一个渐进的过程，为达到更好的用户体验，呈现引擎会力求尽快将内容显示在屏幕上。它不必等到整个 HTML 文档解析完毕之后，就会开始构建呈现树和设置布局。

4、window.onload 和 DomContentLoad

DomContentLoad：dom数构建完成，其中非阻塞型资源不阻塞构建，document对象会派发事件DomContentLoad来通知

window.onliad：所有资源加载完成包括非阻塞型资源加载

5、解析只能够有外联的资源，分为阻塞型、非阻塞型

dom树构建 =》 defer js执行 =》 dom树解析 =》 document派发事件 =》 非阻塞资源加载完成 =》 window.onload

阻塞型：内联css、内联js、外联普通js、外联 defer js、js标签之前的外联css

非阻塞型：外联 async js、js标签之后的外联css、image、iframe

6、外联普通js

image.png

外联 defer js

image.png

外联 async js

image.png

7、DOMContentedLoaded 代码兼容

document.readystate状态来确认dom树

  • oading - html文档加载中
  • interactive - html文档加载并解析完成，但是图片等资源还未完成加载，相当于DOMContentLoaded
  • complete - 所有资源加载完成，相当于window onload
if (document.readystate === 'interactive'
    || document.readystate === 'complete') {
        // 调用ready回调函数
} else {
    document.onreadystatechange = function () {
        if (document.readystate === 'interative') {
            // 调用ready回调函数
        }
    } 
}

8、浏览器的结构

用户界面：呈现出用户看到的界面（包括地址栏、工具栏、状态栏，除了浏览器主窗口显示的页面外，其他显示的各个部分都属于用户界面）

浏览器引擎：用户界面和呈现引擎之间的传送指令

呈现引擎：负责显示请求的内容；解析html、css内容，生成render 树，然后将每个节点分配到屏幕的坐标（布局），便利呈现树

网络：资源请求

用户界面后台：用于绘制基本的窗口小部件（组合框、窗口等），并未平台提供底层实现（将每个节点绘制出来）

js解释器：用于解析和执行js代码

数据存储：硬盘存储各种数据（cookie等）

image.png

构建 =》 解析 =》 布局 =》 绘制

浏览器原理

资料：www.html5rocks.com/zh/tutorial…

1、呈现引擎：两种引擎（Firefox =》 Gecko，Safari、Chrome =》 WebKit 支持苹果机和windows）

2、整理流程

构建：html转换为内容树 + css文件的样式树 = 呈现树

呈现树包含多个带有视觉属性的矩形，矩形的排列顺序就是呈现在屏幕的顺序

布局：每个节点分配一个对应出现的屏幕确切坐标

绘制：遍历呈现树，由用户界面后端层将每个节点绘制

不必等整个html文档解析完毕就会开始构建呈现树和设置布局，在接受和处理网络其余内容的同时，呈现引擎会将部分内容解析并显示

image.png

3、解析：将文档转化成为有意义的结构，

分析需要遵循语法（词法规则、预发规则）规则为基础

词法分析：输入内容分割成大量标记，可以理解成语言词典的单词

语法分析：应用语言的语法规则的过程

解释过程：词法分析器（输入内容分解成一个个有效标记）、解析器（根绝语言的语法规则分析文档结构构建解析树）；解析器向词法分析器请求一个新标记，获得标记匹配语法规则，匹配成功将对应的标记节点添加到解析树中，继续下一个标记；如果没有匹配到规则将标记存储到内部并继续请求标记，直至找到可与所有内容存储的标记匹配的规则；找不到任何规则，解析器就会出发error

解析器：自上而下解析器、自下而上解析器

image.png

4、翻译：编译器将源代码编译成机器代码（将源代码解析成解析树，然后将解析树翻译成机器代码）

image.png

5、html解析：

算法：标记化、树构建

标记化：词法分析过程，html标记包括起始标记、结束标记、属性名、属性值；标记生成器识别标记，传递给树构造器，然后接受下一个字符识别下一个标记，返回知道输入结束

6、css解析

上下文无关的语法

Webkit：自下而上的移位归约解析器

Firefox：人工便可的自上而下的解析器

7、处理脚本和样式表的顺序

脚本：遇到js的标记就会立即解析并执行脚本内容，文档的解析也将会停止，知道脚本执行完毕。如果是外部的也会下载并执行后继续；defer就是放在文档最后执行不会停止解析。async就会异步有其他线程解析和执行

预解析：其他线程解析文档找到需要通过网络加载的资源，然后资源并行链接加载提高速度，预解析起不会修改dom，只会解析外部资源

样式表：不会更改dom树，js之前的css会被解析，之后的css不会影响解析

8、呈现树

作用是让您按照正确的顺序绘制内容，呈现树中的元素成为呈现器

呈现器：如何布局并将自身和子元素绘制出来，一个矩形的区域

呈现器和dom的元素相对应，但是并非一一对应。非可视化的dom不会插入呈现树（head、display为none的元素），也有一个dom元素有多个呈现器（select元素有3个呈现器）

9、样式计算

构建呈现树时需要计算每个呈现对象的可视化属性

10、布局

呈现树中不包含位置和大小，计算这些值成为布局；布局是递归的过程，从跟呈现器开始递归遍历部分或者所有的框架层次结构

根呈现器位置左边是0，其尺寸为视口（浏览器窗口的可见区域）。所有呈现器都有一个layout或者reflow，每一个呈现器都会调用其需要进行布局的子代layout

Dirty委系统：呈现器改变会对自身和子代标注为dirty。

全局布局（屏幕大小改变、全局样式改变，影响整个呈现树布局）和增量布局（对dirty呈现器进行布局）

11、绘制

绘制工作是使用用户界面基础组件完成的

全局绘制和增量绘制

绘制顺序：元素进入堆栈样式上下文的顺序，这些堆栈会从后往前绘制。快呈现器的堆栈顺序：背景颜色 =》 背景图片 =》 边框 =》 子代 =》 轮廓

12、呈现引擎采用单线程，所有的操作（除了网络操作）都是单线程进行的

13、定位方案

普通：根绝对象在文档中的位置进行定位

浮动：按照普通流进行布局，然后尽可能的向左或者向右移动

绝对：对象在呈现树中的位置和dom树的位置不同

position：static、relative普通流；absolute、fixed绝对定位

浏览器缓存

1、强制缓存

强制缓存：向浏览器缓存查找请求结果，根据结果的缓存规则来决定是否使用缓存结果；

强制缓存的缓存规则：浏览器发起请求是，服务器会将缓存规则放在http响应头的http头中和请求结果一起返回浏览器

控制强制缓存的字段：Expires和Cache-Control，Cache-Control优先级比Expires高

Expires：是https/1.0控制缓存的字段，其值是服务端返回的缓存到期时间（服务端时间），再次发送请求，客户端判断如果时间小于Expires时间，就直接用缓存。这里有一个问题就是做比较的时候是客户端时间和服务端时间做比较可能存在误差，强制缓存就会失效，这里比对的时间是要和Last-modified结合使用

Cache-Control：在http/1.1中，取值：

public：所有内容被缓存（客户端和代理服务器都可以缓存）

private：所有内容只有客户端可以缓存，默认值

no-cache：客户端缓存内容，但是是否使用缓存需要进过协商缓存来验证完成

no-store：所有内容都不会被缓存。即不实用强制缓存，也不使用协议缓存

max-age=xx：缓存内容在xx秒之后失效

s-maxage=xx：只在代理服务器（cdn）中生效，覆盖和max-age，作用一样

在无法确定客户端的时间是否与服务端的时间同步的情况下，Cache-Control相比于expires是更好的选择，所以同时存在时，只有Cache-Control生效

缓存的来源：servic worker（用户自定义缓存那些资源在硬盘上），from memory cache（使用内存中的缓存），from disk cache（使用硬盘中的缓存），浏览器缓存的读取顺序 memory =》 disk

内存缓存：快速读取（直接存入进程的内存中，方便下次快速读取）和时效性（进程关闭，内存就会清空）

硬盘缓存：存入硬盘文件，读取缓存需要对硬盘文件进行I/O操作，读取复杂速度比内存缓存慢

浏览器：js/图片文件是存储在内存中，css是存储在硬盘文件中

2、协商缓存

强制缓存失效（Expire到期，Cache-Control的时间超过了）后，浏览器携带缓存标识向服务器发起请求，有服务器根据缓存标识决定是否使用缓存

协商缓存字段：Last-Modified / If-Modified-Since 和 Etag / If-Node-Match，其中Etag/If-None-Match优先级比Last-Modified / If-Modified-Since高

Last-Modified（在 response header中）：服务器响应请求时，返回该资源文件在服务器最后修改的时间

If-Modified-Since（在request header中）：客户端再次发起请求时，携带Last-Modified值，通过字段告诉服务器上次的请求返回最后被修改的时间，然后判断是否需要重新返回资源，304代表资源无更新，继续使用缓存

last-modified弊端：如果本地打开缓存文件没有修改，也会造成last-modified修改，服务器不能命中缓存导致发送相同的资源；last-modifield以秒计时，在不可感知的时间内修改文件（1秒内改变了多次），服务器会任务资源命中了，不会返回正确的资源

Etag：服务器响应请求，返回当前资源文件的唯一标识（服务器生成）

If-None-Match：客户端发送请求是，携带上次返回的Etag，判断该资源的值和服务器的Etag值是否一致，一致的话则返回304直接用缓存

3、强制缓存优先与协议缓存，若强制缓存（Expires、Cache-Control）生效则使用缓存，否则进行协议缓存，协议缓存由服务器决定是否使用缓存

image.png

4、用户行为影响

地址栏输入地址：查找disk cache是否匹配，没有匹配发送网络请求

普通刷新：优先使用memory cache、其次才是disk cache

强制刷新：浏览器不是用缓存

5、其他Web缓存策略

IndexDB：浏览器提供的本地数据库

Service Worker：离线缓存

LocalStorage：允许访问document的对象Storage用户存储当前源的数据，除非用户清楚，否则会被长期保留

SessionStorage：在页面会话结束时被清除，重新加载或者恢复页面都会保留

6、缓存的分类

CDN缓存

DNS缓存

客户端缓存

Service Worker与缓存及离线缓存

PageCache与ajax缓存

网络请求

1、http请求：域名解析（hosts文件解析、浏览器缓存解析、dns解析ip定位）=》 发起TCP的3次握手 =》 建立TCP连接后发起http请求 =》 服务器响应http请求，返回资源 =》 解析html代码，请求外联资源 =》 渲染呈现给用户

2、DNS解析：

浏览器缓存查找域名的IP地址 =》

操作系统缓存中查找，会查找本季的hsot =》

路由器查找，路由器也有DNS缓存 =》

向LDNS（互联网服务供应商ISP）发起解析请求（递归查找） =》

在缓存没有命中情况向根域名服务器查找（迭代查询） =》

根LDNS找不到ip但是告知域的授权服务器 =》

LDNS向域的授权服务器查询 =》

查询自己的ZONE文件（区域文件记录）获取ip返回LDNS =》

LDNS本地缓存，返回给电脑的解析器 =》 解析器缓存到操作系统的DNS缓存中，返回给浏览器，浏览器缓存一段时间

image.png

可以考拉dns-prefetch优化

3、跨域：nginx、cors、jsonp、postMessage、webSocket

4、发送http请求

image.png

5、 ajax：对web api原生xhr的封装

fetch：继续Promise设计，旧版本的浏览器不支持Promise，所以需要一个polyfill；是web的底层api

axios：对原生XHR的封装，可以在node中使用，支持promise，提供并发请求接口

avatar
文章
阅读
粉丝