重定向 CORS 跨域请求

Chrome HTTP Safari iOS CORS 跨域 XHR

TL; DR

  • 简单请求 不可重定向,包括第一个 preflight 请求和第二个真正的请求都不行。
  • 简单请求可以重定向任意多次,但如需兼容多数浏览器,只可进行一次重定向。
  • 中间服务器应当同样配置相关 CORS 响应头。

CORS 跨域中的 preflight 请求

跨域 CORS AJAX HTTP XHR

我们知道借助 Access-Control-Allow-Origin 响应头字段可以允许跨域 AJAX, 对于非 简单请求CORS 机制跨域会首先进行 preflight(一个 OPTIONS 请求), 该请求成功后才会发送真正的请求。 这一设计旨在确保服务器对 CORS 标准知情,以保护不支持 CORS 的旧服务器。

Flowchart_showing_Simple_and_Preflight_XHR

Wikipedia: https://upload.wikimedia.org/wikipedia/commons/c/ca/Flowchart_showing_Simple_and_Preflight_XHR.svg

CORS 跨域发送 Cookie

AJAX Cookie XHR CORS 跨域

在 Web 页面中可以随意地载入跨域的图片、视频、样式等资源, 但 AJAX 请求通常会被浏览器应用同源安全策略,禁止获取跨域数据,以及限制发送跨域请求。 虽然 有多种方法利用资源标签进行跨域,但能够进行的数据交互非常有限。 在 2014 年 W3C 发布了 CORS Recommendation 来允许更方便的跨域资源共享。 默认情况下浏览器对跨域请求不会携带 Cookie,但鉴于 Cookie 在身份验证等方面的重要性, CORS 推荐使用额外的响应头字段来允许跨域发送 Cookie。

Electron 中的 IPC

Github IPC Node.js 事件 Electron

Electron是 Github 为了打造一款纯 JavaScript 开发的代码编辑器而编写的 JavaScript 跨平台桌面应用框架。 Electron 中的 Node.js 是一个后台进程的运行时(注意不是 Web 服务器), 使用 Chromium (其实是libchromiumcontent库)作为用户接口。 碉堡了有木有!

其中后台进程(Main Process)与渲染进程(Render Process) 之间的通信便需要借助于 Electron 提供的 IPC 机制 (该机制需要跨平台,可能是通过libuv这样的跨平台 IO 库实现的)。 在这样的架构中 IPC API 会在开发中经常用到,本文介绍这些 API 的使用场景。

使用 rem 提供一致的字体大小

CSS Chrome 字体 font-size

猴子都知道在 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 解析和渲染

CSS DOM JavaScript 性能 浏览器渲染

页面资源的最佳世间是把页面样式写在 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 DOM DOM解析 异步 浏览器渲染

CSS/JS对DOM渲染的影响一文 探讨了静态页面中的JavaScript/CSS的载入和解析对DOM渲染的影响。 本文接着讨论异步渲染场景下JavaScript/CSS对DOM解析(Parsing)和渲染(Rendering)的影响。

TL;DR

  • 动态插入的外部样式表或脚本不阻塞DOM解析或渲染。
  • 动态插入的内联样式表或脚本会阻塞DOM解析和渲染。
  • 未连接到DOM树的样式表或脚本(外部或内联)不会被下载、解析或执行。
  • 可以通过onloadonerror监听HTML资源标签载入结果,兼容IE需要onreadystatechange

上一页 下一页