servo 源码学习相关

[cisen]

• https://github.com/servo/servo
• https://github.com/cisen/sourcecode-servo-01
• HTML标准
• 源码文件解构
• CSS选择器标准，https://github.com/servo/servo/blob/master/components/style/selector_map.rs components\selectors\matching.rs（matches_simple_selector）

  Component::ID(ref id) => {
          element.has_id(id, context.shared.classes_and_ids_case_sensitivity())
      },

  各个模块

• svg和字体渲染支持：https://github.com/servo/pathfinder
• 渲染引擎：https://github.com/servo/webrender
• HTML5 解析器：https://github.com/servo/html5ever
• JS编译仍然使用SpiderMonkey, 通过rust-mozjs 绑定
• spiderMonkey源码
• css parser

依赖模块

• 键盘事件解析：keyboard-types
• 序列化：serde
• 时间格式转化：chrono
• http格式：http
• http请求：hyper
• cookie
• CSS 选择器匹配，selectors
• openGL调用入口：gleam，类似的还有gfx
• JS跟rust通信: stdweb
• 跨系统，进程间通信：ipc-channel
• 并发处理：crossbeam
• webSocket: ws
• 数据并行处理库：rayon
• SSL/TLS: OPENSSL hyper-openssl
• brotli压缩算法实现：brotli
• Gzip压缩和解压库：flate2
• 异步处理库，支持async：futures

编译注意

windows

• 注意python2.7和3.7都要安装，以2.7为主，pip也是。python2.7，python3，python3.7命令通过复制exe保留

ubuntu 18.04

• 全新的系统是没问题的
• 注意使用./mach bootstrap安装依赖，不要使用自己安装
• 请使用英文操作系统，中文的编码有问题

[cisen]

net模块源码

• websocket实现依赖ws

  fetch标准实现

cookie的实现

• 其实也是挺简单的

script 模块源码

dom

service work

• https://w3c.github.io/ServiceWorker/#navigator-service-worker-register

事件捕获/冒泡

• components\script\dom\event.rs, dispatch_to_listeners

fetch

• components\script\fetch.rs, https://fetch.spec.whatwg.org/#fetch-method
• 生成一个promise
• 生成Request对象
• 生成ipc action和listener
• 用新线程发送请求并侦听返回，然后返回promise对象
• 接收消息是ipc中断发过来的，然后根据类型拼接请求结果，参考load_whole_resource

blob

• components\script\dom\blob.rs
• blob也很简单，主要分为file/memory/sliced，读取文件可以参考：read_file

问答

requestAnimframe的实现原理是什么？

• 标准
• 实现代码在components\script\dom\document.rs的request_animation_frame, run_the_animation_frame_callbacks
• 具体步骤
• • 在mozjs的vm里面，判断是否是native函数，然后就开始调用native函数CallJSNative(cx, native, args);
• • 执行request_animation_frame把callBack插入animation_frame_list队列
• • 然后再run_the_animation_frame_callbacks遍历该队列，并调用callBack执行

rA插入的是JS函数，如何再rust里面调用？

没有实现IdleRequestCallback ？

• 是的，因为IdleRequestCallback 是W3C的标准，不是whatwg的标准

addeventlistener在哪里？

• components\script\dom\eventtarget.rs的add_event_listener, remove_event_listener
• 标准
• 基本原理：
• • add的适合插入handlers数组
• • remove的时候从handler移除

事件实现类似react的合成事件？

• 是的，自己实现的事件模型。就是不知道底层事件是如何触发的

如何知道触发了addeventlistener的event？

• components/script/script_thread.rs起一个死循环，start，轮询侦听事件
• 关键是components/script/script_thread.rs会起一个循环线程，不断侦听事件handle_msgs，如果有事件则调用对应事件函
• 断点可以在components/script/dom/event.rs的pub fn fire里面打
• 下面那句就是循环线程里不断侦听事件的函数

  // Receive at least one message so we don't spinloop.
      debug!("Waiting for event.");
      let mut event = select! {
          recv(self.task_queue.select()) -> msg => {
              self.task_queue.take_tasks(msg.unwrap());
              let event = self
                  .task_queue
                  .recv()
                  .expect("Spurious wake-up of the event-loop, task-queue has no tasks available");
              FromScript(event)
          },
          recv(self.control_port) -> msg => FromConstellation(msg.unwrap()),
          recv(self.timer_event_port) -> msg => FromScheduler(msg.unwrap()),
          recv(self.devtools_chan.as_ref().map(|_| &self.devtools_port).unwrap_or(&crossbeam_channel::never())) -> msg
              => FromDevtools(msg.unwrap()),
          recv(self.image_cache_port) -> msg => FromImageCache(msg.unwrap()),
      };
      debug!("Got event.");

同源策略在哪里？

• components\net\fetch\cors_cache.rs，components\net\connector.rs

sw的缓存是如何实现的？

[cisen]

CSS

layout

floats

问答

整个浏览器的流程是怎样的？

• 整个浏览器的入口：ports\glutin\main2.rs的main函数
• servo::run_content_process
• • 注册ipc
• • connection_bootstrap?
• • init_service_workers, 初始化sw
• UnprivilegedPipelineContent::start_all
• • 创建LayoutThreadFactory
• • 创建ScriptThreadFactory
• • image_cache
• ScriptThreadFactory::create
• • 开始加载网页？
• components\script\script_thread.rs, ScriptThread::start
• • 死循环不断监听handle_msgs
• ScriptThread::handle_msgs
• • 侦听浏览器的resize， 创建layout， 设置滚动位置，动画，事件的入口
• • 应该是单个浏览器tap的主进程
• ScriptThread::handle_new_layout，message::Msg::CreateLayoutThread
• • 检测layout是否busy
• LayoutThread::create_layout_thread
• • 调用factory创建layout线程
• LayoutThreadFactory::create, layout.start()关键
• • 创建独立线程
• • 调用layout.start()开始渲染
• layout.start(), LayoutThread::start
• • 死循环监听handle_request, 应该是layout的主线程
• LayoutThread::handle_request
• • 监听分发滚动， 动画， 字体， 请求的ipc信息
• LayoutThread::handle_request_helper
• • 监听样式变更， 重绘， RPC调用， 等的信息调用
• self.handle_reflow, self.tick_all_animations
• • 开始重绘，重新计算所有位置和尺寸
• perform_post_style_recalc_layout_passes
• perform_post_main_layout_passes
• compute_abs_pos_and_build_display_list

  let traversal = ComputeStackingRelativePositions {
                  layout_context: layout_context,
              };
              traversal.traverse(layout_root);

reflow的机制是怎样的？

• 入口在components/layout/sequential.rs的pub fn reflow函数
• components\script\dom\window.rs的很多样式取值前都会调用layout_reflow，再获取值的

reflow流程是怎样的？

• handle_request

尺寸和位置计算在哪里？

• components\layout
• components\script\dom\webidls\Element.webidl
• 继承关系：
• eventTarge
• • 简单事件订阅队列
• node
• • 父子关系操作，生成树
• element
• • 尺寸，clientWidth~
• • 位置，clientTop~
• • 动画，animate
• • 具体事件，click/focus/blur/mouse/touch
• • 元素操作，属性匹配/操作，getAttribute/setAttribute
• HTMLElement
• • 实际位置offsetWidth~
• • 各个dom类型的事件比如：oninput/onselect/onplay/onresize
• HTMLFragmentElement

各个element支持的事件列表在哪里？

clientWidth/offsetWidth有何区别？

• https://www.cnblogs.com/youxin/archive/2012/09/21/2697514.html
• • clientWidth是对象看到的宽度（不含边线） ，会随窗口的显示大小改变。？？
• • offsetWidth是对象看到的宽度（含边线，如滚动条的占用的宽），会随窗口的显示大小改变。？？
• • offsetWidth 是对象的实际内容的宽，不包边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度），不随窗口显示大小改变？？
• • 不过好像各个浏览器的定义不同
• https://drafts.csswg.org/cssom-view/#dom-htmlelement-offsetwidth
• https://drafts.csswg.org/cssom-view/#dom-element-clientwidth
• clientWidth是element的属性，offsetWidth是HTMLElement的属性
• clientWidth来自FragmentLocatingFragmentIterator.client_rect，FragmentLocatingFragmentIterator只携带了client_rect和node的path，也就是只携带了该节点的尺寸和位置
• FragmentBorderBoxIterator继承了FragmentLocatingFragmentIterator，是最常用带clientWidth的盒子

clientWidth如何取值的？

1. element.ClientWidth通过node.client_rect()函数获取client尺寸位置
2. node又是通过document找到window对象，然后再通过window对象的client_rect_query方法利用RPC获取
3. client_rect_query获取rect前先reflow，再通过components\layout\query.rs的node_geometry实现rpc调用
4. rpc执行在components\layout_thread\lib.rs的respond_to_query_if_necessary函数，它根据不同查询类型分发不同的调用，比如rect是process_node_geometry_request
5. process_node_geometry_request是计算rect的入口，真正重点计算的是iterate_through_flow_tree_fragment_border_boxes
6. iterate_through_flow_tree_fragment_border_boxes通过递归查询stacking_relative_position来获取尺寸和位置的，这是获取rect的关键
7. stacking_relative_position是来自BlockFlow继承自BaseFlow（基础文档流）

为什么client_rect_query在获取rect要先reflow？

stacking_relative_position是在哪里更新值的？

• components\layout\block.rs的compute_stacking_relative_position函数里面：self.base.stacking_relative_position.x = absolute_stacking_relative_position.x之类的更新这个值

何时如何跟新stacking_relative_position的值？

• 入口是两个：
• • handle_reflow，reflow入口，调用perform_post_style_recalc_layout_passes
• • tick_animations，动画的入口，调用perform_post_style_recalc_layout_passes
• perform_post_style_recalc_layout_passes
• perform_post_main_layout_passes
• compute_abs_pos_and_build_display_list

  let traversal = ComputeStackingRelativePositions {
                  layout_context: layout_context,
              };
              traversal.traverse(layout_root);

网页开始加载是从哪里开始？

• ScriptThreadFactory:create, script_thread.pre_page_load(new_load, load_data)

什么时候开始parse css和html的？

• pre_page_load, 这是提前的部分
• • 生成parse的context： let context = ParserContext::new(id, load_data.url);
• • 主要就是生成context和发出请求
• 请求回来中断
• Constellation::run的时候执行self.handle_request()
• • 死循环侦听请求返回中断
• Constellation::handle_request_from_network_listener
• • 网络请求返回结果，触发ConstellationControlMsg::NavigationResponse, 调用正在侦听的ipc
• 一直在侦听的IPC
• ScriptThread::run
• • 死循环侦听所有中断
• ScriptThread::handle_msgs
• • 事件派发
• handle_msg_from_constellation
• • 派发ConstellationControlMsg的中断
• components\script\script_thread.rs, ConstellationControlMsg::NavigationResponse
• • 派发请求结果
• components\script\script_thread.rs, FetchResponseMsg::ProcessResponse
• handle_fetch_metadata, 调用ctxt.process_response(fetch_metadata);
• components\script\dom\servoparser\mod.rs, FetchResponseListener::process_response
• • 处理网络返回错误码/请求有没有报错等问题
• • 根据content_type执行不同的parse

htmlparser的入口在哪里？

• 首先不管是css/js/html， parser的入口都是html
• 总结就是在components\script\dom\servoparser利用html5ever生成token tree就完事了
• components\script\dom\servoparser\mod.rs, ServoParser::parse_sync
• ServoParser::do_parse_sync
• ServoParser::tokenize
• • 通过match feed(&mut *self.tokenizer.borrow_mut())根据html/xml/async_html的不同递归调用各种的feed函数，以生成token tree

css的parser的入口在哪里?

• components\style
• WEBIDL GetSheet GetSheet get_cssom_stylesheet
• Node::get_cssom_stylesheet
• get_stylesheet
• node::add_child bind_to_tree components\script\dom\htmlstyleelement.rs parse_own_css 再利用cssparser(https://github.com/servo/rust-cssparser)

JS的parser的入口在哪里？

• navigate
• eval_js_url
• evaluate_js_on_global_with_result
• evaluate_script_on_global_with_result
• EvaluateUtf8，然后通过mozjs调用spidermonky

css是在哪里跟html融合的？

• 入口是set_stylesheet,
• 然后add_stylesheet函数会循环添加样式？

怎么利用css生成element的clientWidth的？

css是怎么匹配到DOM的？

• 主要的匹配在：components\selectors\matching.rs，matches_simple_selector函数

css的匹配入口在哪里？

• matches_complex_selector->matches_simple_selector->attr_matches(components\style\gecko\wrapper.rs)
• matches_complex_selector->matches_simple_selector->matches_selector->matches_selector_list(components\selectors\matching.rs)
• matches_selector_list作为所有查询匹配的对外入口比如：
• • node.query_selector（ https://dom.spec.whatwg.org/#dom-parentnode-queryselector）
• • QuerySelectorIterator对象
• • element_matches（https://dom.spec.whatwg.org/#dom-element-matches）

[cisen]

servo 内部学习

为什么可用直接使用use ipc_channel? 比如这种：

use ipc_channel::ipc;
use ipc_channel::router::ROUTER;
use net_traits::request::RequestBuilder;
use net_traits::request::{Request as NetTraitsRequest, ServiceWorkersMode};

• 因为在components\servo\lib.rs文件里面，使用pub use ipc_channel统一从新导出了所有全局依赖，所以任何模块都可以直接使用use引入