webkit

『包教不包会的输入URL到渲染完成系列(一)』之浏览器架构

纵然是瞬间 提交于 2020-07-28 07:03:53
前言 见解有限,如有描述不当之处,还请大家指出,如有错误,会及时修正。(Doge保命) 这是本系列的第一篇文章,主要讲浏览器的架构知识。 目的:对浏览器架构有初步的认知。 阅读本文的注意事项 文章难度由浅入深,大致可以分为四个模式: 简单模式:《浏览器的前世今生》 普通模式:《进程与线程》到《多进程架构简介》 困难模式:《多进程架构详解》到《核心原则》 地狱模式:《拓展资料》 小声BB: 阅读本系列文章,只需要阅读完《浏览器的前世今生》到《多进程架构简介》即可。 如有身体不适,请及时下车。 我从找资料,翻译,到分析资料,到困难难度已经吐血 。 文章内容存在大量的引用,在本人粗浅理解下整理了其中的内容,引用的链接放置在子标题下方,如有需要,可以进入原文深入了解。如有侵,给我留言,立马删。 大纲 开篇 前言 浏览器的占有率 chrome的核心原则的简单描述 浏览器和渲染引擎的前世今生 进程与线程 浏览器架构的演变 单进程架构 多进程架构 面向服务的架构 多进程架构简介 多进程架构详解 浏览器进程 进程模型 渲染进程 组件通信 渲染进程与视图管理 信息流如何通过各种组件和连接器 鼠标点击 光标事件 沙箱 插件架构 网络栈 GPU 架构分析 多流程体系结构采用什么主导的体系结构风格? 多进程架构会产生哪些品质或者属性 多进程体系架构的是如何影响软件的修改能力 核心原则 拓展资料 小结

Appemit 可以在webkit内核浏览器谷歌打开dll  activex flash等控件,包括ie内核网页

最后都变了- 提交于 2020-07-27 09:48:23
activex是由微软开发,所以在支持上,目前原生态支持的只有IE,其他浏览器想要支持activex ,以前还可以使用NPAPI ,但是2020年12月后chrome不再支持, edge也不支持activex 。 Appemit可以解决这个问题, 采用 WebSocket通信方式 ,可以在webkit内核浏览器打开dll activex flash等控件,包括ie内核网页 详情 http://www.appemit.com 或者博客 https://my.oschina.net/u/3101335/blog/4297005 AppEmit是应用程序(尤其是浏览器)与本地程序间互相通信的易扩展的轻量级中间件。 AppEmit is an extensible lightweight middleware for communication between applications (especially browsers) and local programs. 主要采用了HTML5国际标准的Web Socket进行通话,默认为异步, JSON格式传递参数。 主要实现功能: 在浏览器播放含有flash的网页或Flash文件,包括swf交互动画、flv影视等 在浏览器打开、操作本地文件,比如办公软件 开发本地硬件DLL驱动模块的封装插件,实现在网页中操作控制本地的读卡器、打印机、扫描仪

第一次入博客如何简单的设置博客园皮肤

有些话、适合烂在心里 提交于 2020-07-27 09:02:08
(1) 进到设置里面 (2) 把下面代码复制到 <定制CSS代码> 1 /* simplememory */ 2 #google_ad_c1, #google_ad_c2 { display : none ;} 3 .syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, .syntaxhighlighter textarea { 4 font-size : 14px!important ; 5 } 6 #home { 7 opacity : 0.80 ; 8 margin : 0 auto ; 9 width : 85% ; 10 min-width : 950px ; 11 background-color : #fff ; 12 padding : 30px ; 13 margin-top : 30px ; 14 margin

『包教不包会的输入URL到渲染完成系列(二)』之浏览器准备导航阶段

家住魔仙堡 提交于 2020-07-27 06:58:00
前言 见解有限,如有描述不当之处,还请大家指出,如有错误,会及时修正。(Doge保命) 这是本系列的第二篇文章,主要讲浏览器内核的组成,浏览器准备导航阶段。 目的: 对浏览器内核有初步的认知。 了解http请求流程之前,浏览器的准备导航阶段内容 URL和URI的关系及区别 小声BB: 文章内容存在大量的引用,在本人粗浅理解下整理了其中的内容,引用的链接放置在子标题下方,如有需要,可以进入原文深入了解。如有侵权,给我留言,立马删除。 由于本系列主要叙述和前端相关的部分,有些内容会略过。 大纲 回顾浏览器架构 浏览器内核的组成 按下"g"键 从按下回车键之后到浏览器接收 解析URL URL和URI 检查 HSTS 列表 回顾浏览器架构 开始导航 总结 这一系列文章地址 回顾下浏览器架构 引自: Inside look at modern web browser (part 1) 图:浏览器进程 浏览器(Browser) :主要负责界面显示、用户交互、子进程管理,同时提供存储等功能。 渲染器(Renderer) :控制选项卡内,网站里显示的所有内容。 插件(Plugin) :控制网站使用的插件,例如:Flash。 GPU :独立于其他进程,专用于处理 GPU 任务。 还有更多的进程,如: 扩展进程 (Extension Process)和 实用进程 (Utility Process)

html+css面试合集

南楼画角 提交于 2020-07-27 04:19:48
1 介绍一下标准的 CSS 的盒子模型?与低版本 IE 的盒子模 型有什么不同的?   标准盒子模型:宽度=内容的宽度(content)+ border + padding + margin   低版本 IE 盒子模型:宽度=内容宽度 (content+border+padding)+ margin 2 box-sizing 属性?   用来控制元素的盒子模型的解析模式,默认为 content-box context-box:   W3C 的标准盒子模型,设置元素的 height/width 属性指的是 content 部分的高/宽 border-box:   IE 传统盒子模型。设置元素的 height/width 属性指的是 border + padding + content 部分的高/宽 3 CSS 选择器有哪些?哪些属性可以继承?   CSS 选择符:id 选择器(#myid)、类选择器(.myclassname)、 标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器 (ul > li)、后代选择器(li a)、通配符选择器(*)、属 性选择器(a[rel="external"])、伪类选择器(a:hover, li:nth-child)   可继承的属性:font-size, font-family, color   不可继承的样式:border,

深入理解CSS绝对定位

為{幸葍}努か 提交于 2020-07-27 01:09:31
原文: 深入理解CSS绝对定位 CSS中有3种定位机制:普通流,浮动和绝对定位。除非专门指定,否则所有框都在普通流中定位。顾名思义,普通流中元素框的位置由HTML元素的位置决定。块级框一个接一个地垂直排列,框之间的垂直距离由框的垂直外边距计算出。在本文中,我们主要讲解3种定位机制之一的绝对定位,这就需要深入了解relative(相对定位),absolute(绝对定位)两种position属性值。 position的所有属性值如下所示: absolute,生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 relative,生成相对定位的元素,相对于其正常位置进行定位。 fixed, 生成固定定位的元素,相对于浏览器窗口进行定位。 Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。Fixed定位使元素的位置与文档流无关,因此不占据空间。 static,默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。( Internet Explorer, Edge 15 及更早 IE

深入理解CSS定位—浮动模型

ぐ巨炮叔叔 提交于 2020-07-26 10:52:00
原文: 深入理解CSS定位—浮动模型 前面我们讲到了绝对定位,在这篇文章中,我们将讲到3种定位模型中的浮动模型。主要参考 张鑫旭在慕课网的 深入理解float 那些年我们一起清过的浮动---by 一丝丝凉 精通CSS 注意 :第二小节基本参考一丝丝凉的内容,看过这篇就可以略过我的那部分内容。 1. 浮动 浮动: 浮动的框可以左右移动,直到它的外边缘碰到包含框或另一个浮动框的边缘 。和绝对定位元素一样,使用浮动后,该元素也会脱离文档流,即 浮动框不属于文档中的普通流 。 当一个元素浮动之后,不会影响到块级框的布局而只会影响内联框(通常是文本)的排列,文档中的普通流就会表现得和浮动框不存在一样,当浮动框高度超出包含框的时候,也就会出现包含框不会自动伸高来闭合浮动元素(“高度塌陷”现象)。 顾名思义,就是漂浮于普通流之上,像浮云一样,但是只能左右浮动。 正是因为浮动的这种特性,导致本属于普通流中的元素浮动之后,包含框内部由于不存在其他普通流元素了,也就表现出高度为0(高度塌陷)。在实际布局中,往往这并不是我们所希望的,所以需要 闭合浮动元素 ,使其包含框表现出正常的高度。 1.1 浮动设计的初衷与特性 浮动设计的初衷是为了实现文本环绕效果 。明白了浮动的设计初衷,我们就能明白浮动的特性表现了。浮动具有以下两个特性: 包裹性 破坏性 单纯只是说浮动的特性:包裹性与破坏性

Unit testing WKNavigationDelegate functions

巧了我就是萌 提交于 2020-07-01 14:37:45
问题 I have a UIViewController that implements some WKNavigationDelegate functions, and I want to unit test the logic in these functions. Here's an example: func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) { guard let url = navigationAction.request.url else { decisionHandler(.cancel) return } if url.absoluteString != "https://my-approved-url" { decisionHandler(.cancel) return } decisionHandler(

Unit testing WKNavigationDelegate functions

末鹿安然 提交于 2020-07-01 14:36:13
问题 I have a UIViewController that implements some WKNavigationDelegate functions, and I want to unit test the logic in these functions. Here's an example: func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) { guard let url = navigationAction.request.url else { decisionHandler(.cancel) return } if url.absoluteString != "https://my-approved-url" { decisionHandler(.cancel) return } decisionHandler(

Elements disappear when scrolling in Safari - -webkit-transform fix only works the first time

无人久伴 提交于 2020-06-27 06:06:51
问题 This only happens in iPhone-sized Safari. I am aware that the "usual fix" for this issue is to apply -webkit-transform: translate3d(0,0,0); (per Serge's answer here) and that does fix the issue, but only once. The issue occurs with a "drawer" menu that opens when the user clicks a menu button. The menu will show normally, but when it is touched/scrolled by a finger, the whole menu disappears from the page. Applying -webkit-transform: translate3d(0,0,0) fixes the issue, but only the first time