web页面与多页应用

Posted KIU的博客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了web页面与多页应用相关的知识,希望对你有一定的参考价值。

 一 渲染引擎

  1. 影响解析生成DOM树的时间——标签数量和嵌套层级
  2. 影响到狗偶见渲染树的性能——样式匹配方式和布局与绘制的关系

    在选择器的右边尽量使用具有唯一性的选择器,而不要使用标签选择器这类容易匹配的选择器            

    布局和绘制是按先后顺序执行,重新布局一定会进行重新绘制。而重新绘制不一定引起重新布局。

        渲染页面大致流程

  • 解析html标签并生成DOM树
  • 解析CSS规则并生成CSSOM树
  • 将DOM树和CSSOM树合并成一个渲染树
  • 根据渲染树来进行布局
  • 对渲染树上的节点进行绘制

     前端优化性能不只涉及渲染引擎,就渲染引擎而言,至少可以做到以下几点

  1. 避免编写复杂的DOM结构,减少DOM层级,从而可以加快DOM树的构建
  2. 避免编写复杂的CSS样式,从而可以加快CSSOM树的构建
  3. 避免在选择器右边使用通用的选择器,加快浏览器匹配样式规则的速度
  4. 修改样式的时候避免引起重新布局

二   CSS盒模型

  盒模型分为两种,一种是标准盒模型(对应CSS属性的box-sizing:content-box),另一种是IE盒模型(对应CSS属性box-sizing:border·-box)。

区别体现在设置和模型宽高的时候,标准盒模型的宽高指的是content,而IE盒模型则包括content,padding和border。

CSS3在布局方面添加了多列布局和弹性盒模型,美化页面方面添加了阴影,渐变最重要是动画效果,其他的新选择器还有字体图标只是锦上添花。

CSS布局:决定元素布局方式主要是position和float属性以及CSS3中的display属性的grid和flex

1.普通文档流主要属性介绍

* none:元素直接消失,不占任何空间

* block:块级元素,块级元素的宽度受父容器宽度限制,直接撑满整行,其他临近位置的普通文档流元素需要另起一行

* inline:内联元素,默认元素宽度由内容决定,高度由font-size决定

* inline-blobk: 内联块级元素。相对于inline来说可以设置宽高。有一个缺陷就是会出现间距,不过该问题可以通过设置父元素的字体大小font-size为0,再单独设置各个元素的字体大小来解决。

2.格式化上下文

格式化上下文分为块级格式化上下文(block Formatting Contexts,BFC)和内联格式化上下文(Inline Formatting Contexts,IFC)

一。BFC的形成(解决布局中不会造成高度塌陷或者)

满足以下任意一个条件可以创建一个新的BFC

(1)根元素

(2)脱离普通文档流的元素(浮动,绝对定位,固定定位)

(3)非块级元素(display属性值为inline-block,table,flex等)

(4)overflow属性部位visible的块级元素

二。BFC的影响

(1)同一个BFC内“相邻”的块级元素的垂直外边距会发生折叠,即两者边距取决于双方边距的最大值而不是边距之和

(2)BFC是页面上隔离的独立容器,内部元素不会与外部元素相互影响

(3)在计算BFC高度时,内部的浮动元素也会被计算在内

以上是关于web页面与多页应用的主要内容,如果未能解决你的问题,请参考以下文章

web页面与多页应用(布局之浮动)

SPA与MPA的区别

Web抓python(beautifulsoup)多页和子页面

tomcat部署与多实例

浅析:单页应用(SPA)和多页应用(MPA)的区别

浅析:单页应用(SPA)和多页应用(MPA)的区别