《现代前端技术解析》第一章读书笔记

第一章 Web前端技术基础

优化

• 优化小技巧
  • 异步加载资源
  • 使用webp（一种高压缩比格式）图片
  • 缓存
  • 针对移动端可以考虑直接跳转到移动端网址
    • 而不是在桌面端上兼容移动端，这样更耗空间

浏览器组成结构

• 输入网址到显示网页发生了什么
  • 在接收到用户输入网址后，浏览器会开启一个线程处理这个请求，对用户输入的URL地址进行分析判断，如果是HTTP协议就按HTTP方式处理
  • 调用浏览器引擎中的对应方法，比如WebView中的loadUrl方法，分析并加载这个URL地址。
  • 通过DNS解析获取该网站地址对应IP地址，查询完成后连同浏览器的Cookie、userAgent等信息向网站目的IP发送GET请求。
  • 进行HTTP协议会话，浏览器客户端向Web服务器发送报文。
  • 进入网站后台上的Web服务器处理请求，如Node、Tomcat等服务器
  • 进入部署好的后端应用，如Java、PHP等后端程序，找到对应的请求处理逻辑，这期间可能会读取服务器缓存或者查询数据。
  • 服务器处理请求并返回响应报文，此时如果浏览器访问过该页面，缓存上有对应资源会与服务器最后修改记录对比，一则返回304，否则返回200和对应内容
  • 浏览器开始下载HTML文档（200时）或者读取本地缓存内容（304）
  • 浏览器根据下载接收到的HTML文件解析结构建立DOM文档树，并根据HTML标记请求下载指定的MIME类型文件（如CSS，JavaScript等），同时设置缓存等内容。
  • 页面开始解析渲染DOM，CSS根据规则解析并结合DOM文档树进行网页内容布局和绘制渲染，JavaScript根据DOM API操作DOM，并读取浏览器缓存、执行事件绑定等，页面整个展示过程完成。
• 浏览器主要组成部分
  • 用户界面
    • 可见的地址输入框、浏览器前进返回按钮等
  • 浏览器引擎
    • 用户界面和渲染引擎之间传送指令或者从本地缓存读取数据，各个模块的通信核心
  • 渲染引擎
    • 解析DOM文档和CSS规则并且把内容排版到浏览器中显示有样式的界面。
    • 也有人称之为排版引擎
  • 网络（功能模块）
    • 开启网络线程发送请求或下载资源文件
  • JavaScript引擎
    • 解析执行JavaScript（V8引擎）
  • UI后端
    • 绘制浏览器窗口内控件，如组合选择框，输入框等
  • 数据持久化存储
    • 客户端存储（如cookie、localStorage）
• 渲染引擎主要工作流程
  • 解析HTML构建DOM树
  • 构建渲染树
    • 带样式描述的DOM树
  • 渲染树布局阶段
    • 布局属性生效（position、margin等）
  • 绘制渲染树
    • 显示样式生效（color、background等）
  • 注1：DOM渲染树的解析和输出是并行的
  • 注2：页面布局发生变化 => 布局阶段开始重新渲染（重排/回流）=> 重绘
  • 注3：在WebKit中，HTML和CSS的解析是并行的，解析后的对象称为（Render Tree）
    • 在Gecko中，是先解析HTML后解析CSS，解析后的对象称为（Frame Tree）
• CSS解析
  • 通过分析CSS文档。会生成一系列的CSSRule，CSSRule包括：
    • Selectors，选择器，DOM树中的节点根据元素、类、id选择器匹配Selectors
    • Declaration，样式的具体声明
  • 权重计算（即优先级）
  • !important > 内联（权重1000）> id选择器（权重100）> 类选择器（权重10）> 元素选择器（权重1）

持久化存储技术

• 持久化存储技术
  • 九种：
    • HTTP缓存
    • LocalStorage
    • SessionStorage
    • indexDB
    • Web SQL
    • Cookie
    • CacheStorage
    • Application Cache
    • Flash
• HTTP文件缓存
  • Cache-Control
    • 如果同时设置了Expires（绝对过期时间）和Cache-Control（相对过期时间），则只有后者生效
  • Etag + If-None-Match
  • Last-Modified + If-Modified-Since
  • 没有过期304，过期请求200
• localStorage
  • setItem，getItem，removeItem，clear
  • IE8以上5MB，Firefox 8以上 5.24MB，Opera 2MB，Chrome、Safari 2.6MB
  • 使用时可以考虑封装保证安全性
  • 单个域名下localStorage有大小限制，可以使用iframe突破限制
• sessionStorage
  • 跟localStorage功能医院，但是浏览器关闭就没了
• Cookie
  • 限制在4KB左右
  • 键值对
  • cookie分两种，Session Cookie和持久型Cookie
  • cookie设置中有个HttpOnly参数，背设置为HttpOnly的Cookie只能通过HTTP请求发送到服务端进行读写操作，避免服务器的Cookie记录被修改，保证服务端验证Cookie的安全性
  • 通过document.cookie来读取非HttpOnly类型的Cookie
• WebSQL（不常用）
  • WebSQL不是HTML5的规范
  • WebSQL将数据以数据库二维表形式存储在客户端，js读取
  • openDataBase()，transaction()，excuteSql()
  • 兼容性和使用场景有限
• IndexDB（不常用）
  • HTML5规范之一
  • 和WebSQL类似
  • 50MB
  • 大量数据存储本地会导致数据泄露
• Application Cache（不常用）
  • manifest配置文件，有选择性地存储JS、CSS、图片等静态资源文件的缓存机制
  • 第二次访问页面时才生效，回去检查manifest文件是否已更新，没更新就从App Cache中读取，有就更新App Cache
  • 优点
    • 离线浏览
    • 快速加载
    • 服务器负载小
  • 缺点
    • 已经开始被标准弃用，ServiceWorkers来代替
    • 不兼容主流浏览器
    • manifest文件或者内部列表中某个文件不能正常下载，整个更新过程将视为失败，继续使用旧缓存。
    • manifest和静态资源必须同源
    • 站点其他页面没有设置manifest也会在缓存访问资源
    • manifest改变时，资源请求本身也会触发更新
• cacheStorage
  • ServiceWorker规范中定义
    • 用于保存每个ServiceWorker声明的Cache对象
  • ServiceWorker是在浏览器后台作为一个独立的线程运行的JS脚本，为浏览器提供并行的计算和数据处理能力，使用message/postMessage方法在页面之间进行通信。
  • open()、match()、has()、delete()、keys()
• Flash（不常用）
  • 通过js api调用flash读写指定磁盘目录

调试工具

• 常用调试工具
  • Fiddler：代理、拦截
  • Vorlon、Weinre：移动端调试