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(以下称为同步渲染)资源载入时机。 关于动态插入HTML标签(异步渲染)的阻塞情况请参考 异步渲染DOM元素的加载时机一文。

TL;DR

  • CSS(外链或内联)会阻塞整个DOM的渲染(Rendering),然而DOM解析(Parsing)会正常进行
  • 很多浏览器中,CSS会延迟脚本执行和DOMContentLoaded事件
  • JS(外链或内联)会阻塞后续DOM的解析(Parsing),延迟 DOMContentLoaded,后续DOM的渲染(Rendering)也将被阻塞
  • JS前的DOM可以正常解析(Parsing)和渲染(Rendering)

异步渲染的下载和阻塞行为

CSS Chrome DOM DOM解析 异步 Firefox

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

TL;DR

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

jQuery获取元素内容

DOM HTML iframe jQuery

所有人都知道使用.html()可以获得元素内容,.find()可以获得子元素。 但这两个方法不是万能的,在很多场景我们需要其他的API。例如:

  • 获得所有内容节点(包括文本、注释、元素)
  • 获得iframe或frame内的document
  • 获得所有直接子元素

下文中整理的jQuery获取元素内容的各种方法及其区别, 包括.html(), .text(), .children(), .contents()

什么时候应该使用依赖注入

AMD AngularJS JavaScript 接口 测试 依赖注入

依赖注入(Dependency Indection, DI)是IoC思想的一种实现,用来解决模块间的依赖关系。 该设计模式的基本思想是集中式的模块管理,模块需要的依赖由DI框架统一注入, 模块自身不去主动发现和构建依赖。

JavaScript长期以来缺乏模块依赖机制,近年来随着前端的变重社区中出现了非常多的模块化标准和方案。 包括AMD标准、CommonJS规范、ES6 Import等等。 而DI不仅仅是一种模块化工具,而是通过控制反转的思想来解决可测试性和复用性问题。

导航: 上一页 下一页

加载中...

🔝