CORS 跨域中的 preflight 请求
我们知道借助 Access-Control-Allow-Origin
响应头字段可以允许跨域 AJAX,
对于非 简单请求,CORS 机制跨域会首先进行 preflight(一个 OPTIONS 请求),
该请求成功后才会发送真正的请求。
这一设计旨在确保服务器对 CORS 标准知情,以保护不支持 CORS 的旧服务器。
Wikipedia: https://upload.wikimedia.org/wikipedia/commons/c/ca/Flowchart_showing_Simple_and_Preflight_XHR.svg
CORS 跨域发送 Cookie
在 Web 页面中可以随意地载入跨域的图片、视频、样式等资源, 但 AJAX 请求通常会被浏览器应用同源安全策略,禁止获取跨域数据,以及限制发送跨域请求。 虽然 有多种方法利用资源标签进行跨域,但能够进行的数据交互非常有限。 在 2014 年 W3C 发布了 CORS Recommendation 来允许更方便的跨域资源共享。 默认情况下浏览器对跨域请求不会携带 Cookie,但鉴于 Cookie 在身份验证等方面的重要性, CORS 推荐使用额外的响应头字段来允许跨域发送 Cookie。
Electron 中的 IPC
Electron是 Github 为了打造一款纯 JavaScript 开发的代码编辑器而编写的 JavaScript 跨平台桌面应用框架。 Electron 中的 Node.js 是一个后台进程的运行时(注意不是 Web 服务器), 使用 Chromium (其实是libchromiumcontent库)作为用户接口。 碉堡了有木有!
其中后台进程(Main Process)与渲染进程(Render Process) 之间的通信便需要借助于 Electron 提供的 IPC 机制 (该机制需要跨平台,可能是通过libuv这样的跨平台 IO 库实现的)。 在这样的架构中 IPC API 会在开发中经常用到,本文介绍这些 API 的使用场景。
使用 rem 提供一致的字体大小
猴子都知道在 Web 页面中可以用 px (1/100英寸) 来做字体或宽高的单位,
虽然 px 的字面含义是像素但它早已不是指物理像素,而是跨操作系统的、跨浏览器的长度单位。
比如在 2x 像素密度的Ritina 屏上 1px
会自动占据两倍的长度。
pt 常被用于打印字体,为 1/72 英寸,类似的还有
in
,cm
,mm
,pc
。 这类绝对像素因渲染不一致且无法被 UA 缩放而 很少在 Web 中应用。当然浏览器并没有那么笨,下文有对此更详细的讨论。
而 px 的问题在于我们想让整个页面字体变大一些的时候需要更改所有的字体。
于是我们开始使用相对于父元素的像素单位em
,
在标签嵌套时这样层级的继承(compounding problem)会令人相当困惑。
为此建议使用rem
作为像素单位,该像素单位只相对于根元素<html>
。
这样一来问题的关键便是控制根元素的字体大小。
CSS/JS 阻塞 DOM 解析和渲染
页面资源的最佳世间是把页面样式写在 HTML 头部,页面脚本放在 HTML 尾部。这是因为脚本和样式会阻塞 DOM 渲染。 本文具体分析了包括脚本和样式在内的资源元素对 DOM 解析和页面渲染的影响,并给出具体的示例代码。
本文只讨论服务器端渲染的 DOM(以下称为同步渲染)资源载入时机。 关于在客户端 JavaScript 动态执行插入 HTML 标签(异步渲染)的阻塞情况请参考 异步渲染 DOM 元素的加载时机 一文。
TL; DR
- CSS(外链或内联)会阻塞 整个 DOM 的渲染(Rendering),然而 DOM 解析(Parsing)会正常进行
- 很多浏览器中,CSS 会延迟脚本执行和
DOMContentLoaded
事件 - JS(外链或内联)会阻塞 后续 DOM 的解析(Parsing),延迟
DOMContentLoaded
,后续 DOM 的渲染(Rendering)也将被阻塞 - JS 前的 DOM 可以正常解析(Parsing)和渲染(Rendering)
异步渲染的下载和阻塞行为
在CSS/JS对DOM渲染的影响一文 探讨了静态页面中的JavaScript/CSS的载入和解析对DOM渲染的影响。 本文接着讨论异步渲染场景下JavaScript/CSS对DOM解析(Parsing)和渲染(Rendering)的影响。
TL;DR
- 动态插入的外部样式表或脚本不阻塞DOM解析或渲染。
- 动态插入的内联样式表或脚本会阻塞DOM解析和渲染。
- 未连接到DOM树的样式表或脚本(外部或内联)不会被下载、解析或执行。
- 可以通过
onload
和onerror
监听HTML资源标签载入结果,兼容IE需要onreadystatechange
。