如何提高开发效率
- 对 DOM 操作进行封装
DOM 文档对象模型:指 HTML 内容通过浏览器解析后建立的具有节点父子关系的树形对象 - 模块化 & 组件化
- 异步加载 保证尽快展示页面
- webp 格式的图片 更高压缩比
- 浏览器缓存文件
304 状态码:客户端发送了一个带条件的 GET 请求且该请求已被允许,而文档的内容并没有改变,则服务器返回 304 状态码。 - 移动端页面应尽量简洁
Koa 框架:一个基于 node.js 的 web 框架,使 JS 在服务器端也能高效的开发
从输入网址到页面展示,浏览器和服务端都发生了什么?
- 浏览器开启一个线程处理这个请求,解析 URL 地址,如果是 HTTP 协议就按照 HTTP 方式处理
- 调用浏览器引擎中对应的方法,如 WebView 中的 loadUrl 方法,分析并加载这个 URL 地址
- 通过 DNS 解析获取 URL 地址对应的 IP 地址,并向该 IP 发送 GET 请求(包含浏览器的 cookie、userAgent 等信息)
- 进行 HTTP 协议会话,浏览器客户端向 Web 服务器发送报文
- 进入网站后台 Web 服务器处理请求
- 进入部署好的后端应用,找到对应的请求处理逻辑
- 服务器处理请求并返回相应
有缓存,返回 304
无缓存,返回 200 以及对应内容 - 304,从本地缓存读取文件内容
200,浏览器开始下载 HTML 文档 - 浏览器根据下载接收到的 HTML 文件解析结构建立 DOM 文档树,并根据 HTML 中的标记请求下载指定的 MIME 文件(CSS、JS 脚本等),同事设置缓存等内容
- 页面开始渲染 DOM,CSS 根据规则解析并结合 DOM 文档树进行网页内容布局和绘制渲染,JS 根据 DOM API 操作 DOM,并读取浏览器缓存、执行事件绑定等
浏览器的主要结构
- 用户界面
- 浏览器引擎
在用户界面和渲染引擎直接传送指令,在客户端本地缓存中读写数据 - 渲染引擎
解析 DOM 文档和 CSS 规则并将内容排版到浏览器中显示有样式的界面 - 网络功能模块
浏览器开启线程或下载资源文件的模块 - JavaScript 解释器
解释和执行 JS 脚本 - UI 后端
绘制基本的浏览器窗口内控件 - 数据持久化存储技术
cookie、localStorage 等
渲染引擎的主要工作流程
- 解析 HTML 构建 DOM 树
- 构建渲染树(根据 CSS 文件)
- 渲染树布局阶段(固定节点在页面中的位置)
- 绘制渲染树(使元素的样式信息生效)
Webkit 内核渲染时 HTML 与 CSS 解析可并行,Gecko 内核先解析 HTML 生成 Sink 后再解析 CSS
浏览器缓存机制
- HTTP 文件缓存
- localStorage
- sessionStorage
- Cookie
Session cookie & 持久型 cookie - WebSQL
- IndexDB
- Application Cache
通过 manifest 配置文件选择性存储 - cacheStorage
- Flash 缓存