html5网站建设企业论文如何 申请个人网站

当前位置： 首页 > news >正文

html5网站建设企业论文,如何 申请个人网站,wordpress怎么映射到外网,网站建设到维护WebKit Inside: CSS 的解析 介绍了 CSS 样式表的解析过程#xff0c;这篇文章继续介绍 CSS 的匹配时机。 无外部样式表 内部样式表和行内样式表本身就在 HTML 里面#xff0c;解析 HTML 标签构建 DOM 树时内部样式表和行内样式就会被解析完毕。因此如果 HTML 里面只有内部样式… WebKit Inside: CSS 的解析 介绍了 CSS 样式表的解析过程这篇文章继续介绍 CSS 的匹配时机。 无外部样式表 内部样式表和行内样式表本身就在 HTML 里面解析 HTML 标签构建 DOM 树时内部样式表和行内样式就会被解析完毕。因此如果 HTML 里面只有内部样式表和行内样式那么当 DOM 树构建完毕之后就可以进行样式表的匹配了。 假设 HTML 里面的行内样式在 div标签那么 CSS 匹配样式时机如下图所示: 如果 HTML 里面除了内部样式表或者行内样式还有外部样式表那么情形比较复杂。 由于引入外部样式表的 link标签可以位于 head标签中也可以位于body标签中这两种情形下匹配时机不一样。 外部样式表位于 head 如果 HTML 里面有外部样式表和内部样式表HTML 代码如下: htmlheadmeta charsetutf-8 /titleEasyHTML/titlestyle texttext/css/* 内部样式表 /div {background-color: red;}/style!– 外部样式表–link relstylesheet hrefcs.css //headbodydivkkk/div/body /html 外部样式表 CSS 文件如下: div {background-color: blue;font-size: 20px; } 如果在 DOM 树构建完成之前外部样式表就已经下载回来并且解析那么当 DOM 树构建完成之后就可以直接进行样式表的匹配。 但是如果在 DOM 树构建完成之后外部样式表还没有下载回来那么即使内部样式表已经解析完成了也不会进行任何样式表的匹配。调用堆栈如下图所示: 在函数 TreeResolver::resolveElement中此时第一行 if里面 m_didSeePendingStyleSheet为真因此不会进行任何样式的匹配。 由于没有进行样式匹配无法构建渲染树当然也不会布局和绘制在外部样式表的下载过程中页面是空白的。因此 CSS 的下载虽然不阻塞 DOM 树的构建但是阻塞渲染。 变量m_didSeePendingStyleSheet在函数TreeResolver::resovle里面设置如果位于 head标签里面的外部样式表还未下载成功这个变量就是 true。设置好 m_didSeePendingStyleSheet变量函数 TreeResolver::resove 最终会调用到TreeResolver::resolveElement里面。 TreeResolver::resolve相关代码如下所示: std::unique_ptrUpdate TreeResolver::resolve() {…// 1. 设置 m_didSeePendingStyleSheet 变量m_didSeePendingStylesheet m_document.styleScope().hasPendingSheetsBeforeBody();…// 2. TreeResolver::resolveElement 函数由下面这个函数调用进去resolveComposedTree();…return WTFMove(m_update); } 上面代码注释 1 处设置m_didSeePendingStyleSheet。 代码注释 2 处函数 TreeResolver::resolveComposedTree会调用到TreeResolver::resolveElement。 当外部样式表下载完毕仍会回调到函数TreeResolver::resove调用堆栈如下: 由于此时变量m_didSeePendingStyleSheet设置为false样式表可以正常进行匹配。 外部样式表位于 body 把上面 HTML 里面的外部样式表挪到body标签其他不变: htmlheadmeta charsetutf-8 /titleEasyHTML/titlestyle texttext/css/ 内部样式表 */div {background-color: red;}/style/headbody!– 外部样式表–link relstylesheet hrefcs.css /divkkk/div/body /html 这种情形下的匹配时机会发生变化。 如果位于body标签的外部样式标在 DOM 树构建完成之前下载完成那么匹配时机和上面位于head标签的外部样式表一样也就是 DOM 树构建完成就进行匹配。 如果 DOM 树构建完成之后位于body标签的外部样式表还未下载成功此时由于内部样式表已经解析完成WebKit 会对现有已解析样式表进行匹配匹配完成之后会构建渲染树相关代码如下: void Document::resolveStyle(ResolveStyleType type) {…Style::TreeResolver resolver(*this, WTFMove(m_pendingRenderTreeUpdate));// 1. 进行 CSS 样式表匹配auto styleUpdate resolver.resolve();…if (styleUpdate) {// 2. 样式表匹配完成这里会进行渲染树构建updateRenderTree(WTFMove(styleUpdate));frameView.styleAndRenderTreeDidChange();}…if (m_renderView-needsLayout())// 3. 渲染树构建完毕这里会发起布局frameView.layoutContext().scheduleLayout();… } 上面代码注释 1 处进行 CSS 样式表匹配。 代码注释 2 处现有已解析样式表匹配完毕会进行渲染树的构建。 代码注释 3 处如果条件允许会进行布局计算。 但是很遗憾如果位于body标签的外部样式表没有下载完成因此不满足布局条件代码运行不到上面代码注释 3 处调用堆栈如下: 虽然有了渲染树但是由于没有布局也就不会进行绘制在外部样式表下载过程中页面同样是白色的。CSS 样式表下载依然阻塞渲染。 下面看一下上图判断是否可以布局的代码代码如下: bool Document::shouldScheduleLayout() const {…// 1. 因为 isVisuallyNonEmpty 方法返回了 false导致了布局条件不满足if (view() !view()-isVisuallyNonEmpty())return false;…return true; } 上面代码注释 1 处由于方法LocalFrameView::isVisuallyNonEmpty返回了false导致布局条件不满足。 方法LocalFrameView::isVisuallyNonEmpty代码如下: bool isVisuallyNonEmpty() const { return m_contentQualifiesAsVisuallyNonEmpty; } 这个方法返回了变量m_contentQualifiesAsVisuallyNonEmpty的值这个变量被设置为true的方法为LocalFrameView::checkAndDispatchDidReachVisuallyNonEmptyState代码如下: void LocalFrameView::checkAndDispatchDidReachVisuallyNonEmptyState() {// 1. qualifiesAsVisuallyNonEmpty 回调函数auto qualifiesAsVisuallyNonEmpty [] {…// 2. isMoreContentExpected 回调函数auto isMoreContentExpected {…auto resourceLoader documentLoader-cachedResourceLoader();// 3. 如果外部样式表已经下载成功页面没有其他请求这里返回 false说明没有其他内容需要加载了if (!resourceLoader.requestCount())return false;// 4. 如果页面还有其他请求代码运行到这里auto resources resourceLoader.allCachedResources();for (auto resource : resources) {…if (resource.value-type() CachedResource::Type::CSSStyleSheet || resource.value-type() CachedResource::Type::FontResource)// 5. 如果正在加载的请求里面有样式表类型后者字体资源那么这里返回 true说明还需要等待这些资源加载return true;}return false;};// Finished parsing the main document and we still dont yet have enough content. Check if we might be getting some more.if (finishedParsingMainDocument)// 6. 调用 isMoreContentExpected 回调函数return !isMoreContentExpected();return false;};if (m_contentQualifiesAsVisuallyNonEmpty)return;// 7. 调用 qualifiesAsVisuallyNonEmpty 回调函数if (!qualifiesAsVisuallyNonEmpty())return;// 8. 这里设置 m_contentQualifiesAsVisuallyNonEmpty 为 truem_contentQualifiesAsVisuallyNonEmpty true;… } 上面代码注释 1 处定义了qualifiesAsVisuallyNonEmpty回调函数。 代码注释 2 定义了isMoreContentExpected回调函数。 代码注释 7 处调用了回调函数qualifiesAsVisuallyNonEmpty。 在qualifiesAsVisuallyNonEmpty回调函数里面调用了回调函数isMoreContentExpected如代码注释 6 所示。 回调函数isMoreContentExpected里面会判断当前是否还有其他请求如果代码注释 3 所示。如果没有其他请求了isMoreContentExpected 函数返回 false表明没有其他内容要加载了。因此此时代码会运行到代码注释 8 处将变量m_contentQualifiesAsVisuallyNonEmpty设置为true。 如果页面还有其他资源的请求比如外部样式表还在请求那么回调函数isMoreContentExpected会运行到代码注释 5 处。这里会判断请求资源类型是否是样式表或者字体资源如果是这两种资源之一这里返回 true。这样代码会运行到注释 7 处直接返回而不设置变量m_contentQualifiesAsVisuallyNonEmpty。 因此如果位于body标签的外部样式表还在下载那么就会在上面代码注释 7 返回所以不会进行布局。 如果外部样式表下载成功并解析之后会调用Document::resolveStyle方法这个方法会进行样式表的匹配渲染树的构建布局的调用代码如下: void Document::resolveStyle(ResolveStyleType type) {…Style::TreeResolver resolver(*this, WTFMove(m_pendingRenderTreeUpdate));// 1. 样式表匹配auto styleUpdate resolver.resolve();…if (styleUpdate) {// 2. 构建渲染树updateRenderTree(WTFMove(styleUpdate));// 3. 设置 m_contentQualifiesAsVisuallyNonEmpty true 的方法在这里调用frameView.styleAndRenderTreeDidChange();}…if (m_renderView-needsLayout())// 4. 调用布局方法frameView.layoutContext().scheduleLayout();… } 上面代码注释 1 处进行样式表匹配。 代码注释 2 进行渲染树构建。 代码注释 3 这个方法内部会调用LocalFrameView::checkAndDispatchDidReachVisuallyNonEmptyState方法设置变量m_contentQualifiesAsVisuallyNonEmpty。由于外部样式表已经下载成功此时变量m_contentQualifiesAsVisuallyNonEmpty就会被设置成true。 由于上面的设置后续代码注释 4 处的布局方法调用就可以成功了。 这种情形下匹配时机如下图所示: