Skip to content

Instantly share code, notes, and snippets.

@chengmu
chengmu / Browser Internal Notes.md
Last active June 30, 2023 16:47
Browser Internal(Render)

#浏览器渲染

##浏览器组成 浏览器组成

  1. 用户界面- 包括地址栏、后退/前进按钮、书签目录等,也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分

  2. 浏览器引擎- 用来查询及操作渲染引擎的接口

  3. 渲染引擎- 用来显示请求的内容,例如,如果请求内容为html,它负责解析html及css,并将解析后的结果显示出来

@chengmu
chengmu / BroswerInternals.md
Created July 8, 2013 07:21
Browser Internal(Render)

#Browser Internal ##浏览器组成 浏览器组成

  1. 用户界面- 包括地址栏、后退/前进按钮、书签目录等,也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分

  2. 浏览器引擎- 用来查询及操作渲染引擎的接口

  3. 渲染引擎- 用来显示请求的内容,例如,如果请求内容为html,它负责解析html及css,并将解析后的结果显示出来

    • Webkit
@chengmu
chengmu / viewportNotes.md
Created July 18, 2013 07:40
viewportNotes

###device Pixel & CSS Pixel

物理像素指显示设备上的物理像素点,比如HTC G11宽是480px,这的480是用物理像素衡量的。 CSS像素的话则指我们写页面时理解的那个像素单位。可以理解为是设备自己做了一层缩放,让2个物理像素代表一个我们css里说的像素,也就是dp(设备独立像素)的概念。行业内有个约定俗成的规范,即一般这个数值是320。 有的很高密度的手机略作了调整。

想知道设备的物理像素的话,一般去取 screen.width 就可以。 但苹果只会给你dp的数值,也就是320。这个时候就得用实际上的虚拟像素数(即dp个数)乘以设备像素和css像素的比值计算出来设备像素值。

screen.width * devicePiexlRation 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>name</ke<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>name</key>
<string>One Light</string>

#GPU & Composting in Blink and Chrome

summaried from Chromium documents and other resources

##Background

###Stacking Contexts Positioned elements(relative, absolute, fixed) with a z-index group of layers into a isolated layer

@chengmu
chengmu / hybrid_app_notes.md
Last active January 27, 2016 06:43
Hybrid_APP_Notes

以下为开发希望英语游戏的时候遇到的各种问题。

##IOS下click不正常冒泡

理论上click事件触发后会一直冒泡到document。但IOS上情况不一样。

在IOS上,click事件通常只会冒泡到body以下的节点;也就是说,不会触发body和document的click事件,把handler绑到这两者上面是没有用的。

只有在下列三种情况,click事件才会冒泡到body和document:

@chengmu
chengmu / Node RestFul API Basic Example.md
Last active December 31, 2015 19:49
Node Restful API Basic Example.md

Node Js in Action这本书的时候看到的一个用node http模块写的一个非常基础Restful API实现;附上使用curl命令的测试

####实现代码如下

var http = require('http'); 
var url = require('url');
var items = [];
var server = http.createServer(function(req, res){
  switch (req.method) {
@chengmu
chengmu / webfront_reference
Created December 18, 2013 02:06
Webfront_references
###webfront refferences
####Javascript Standard Relevent
+ [ECMA 3 pdf online](http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%203rd%20edition,%20December%201999.pdf)
+ [ECMA 5 中文手册online](http://www.ecmascript.cn/)
+ [es5-compat-table By Kangax](http://kangax.github.io/es5-compat-table/)

###兼容性

3.0文档中有关浏览器的部分

Internet Explorer 8 and 9 are also supported, however, please be aware that many CSS3 properties—e.g., rounded corners and shadows—are not supported by IE8. The placeholder attribute is also not supported in either of these versions.

>In addition, Internet Explorer 8 requires the use of respond.js to enable media query support.

@chengmu
chengmu / chrome xcode dev Notes.markdown
Created October 23, 2013 11:01
chrome Xcode记录

其实首先是搞下来源码,放进XCode里。。。

光索引就索引了五遍啊简直泣血。。 ###建立xcode项目

  1. 源码拷贝到本地

  2. 安装gclient(具体参见下文)

  3. 切换目录到home/src_tarball/tarball/chromium/,运行gclient, 这个会自动更新源码生成xcode项目文件:

     $ gclient runhooks