一个页面是如何渲染的，浅谈

浏览器页面渲染流程

浏览器从HTTP服务器获取html文档，到呈现页面给用户，会经过以下几个步骤：

a、解析文档构建DOM树

浏览器的解析内容可以分为三个部分：

HTML/XHTML/SVG：解析这三种文件后，会生成DOM树（DOM Tree） CSS：解析样式表，生成CSS规则树（CSS Rule Tree）

JavaScript：解析脚本，通过DOM API和CSSOM API操作DOM Tree和CSS Rule Tree，与用户进行交互。

以上三类文件的执行顺序会根据其在文档中的位置及其标签属性的不同而有异同。

b、构建渲染树

解析文档完成后，浏览器引擎会将 CSS Rule Tree 附着到DOM Tree 上，并根据DOM Tree 和 CSS Rule Tree构造 Rendering Tree（渲染树）。

注意：Render Tree和DOM Tree的区别在于，类似Head或display：node之类的东西不会放在渲染树中；

将CSS Rule Tree匹配到DOM Tree需要解析CSS的选择器，为了提高该过程的性能，DOM树应该尽量小，CSS Selector应该尽量使用id和class，避免过度层叠。

c、布局与绘制渲染树

解析position, overflow, z-index等等属性，计算每一个渲染树节点的位置和大小，此过程被称为reflow。最后调用操作系统的Native GUI API完成绘制（repain）。

注意：渲染树的节点，在Gecko中称为frame，而在webkit中称为renderer；reflow和repaint是两个不同的概念，其区别会在后文进行探讨。

浏览器的内核有哪些

a、Trident内核：代表作品是IE

b、Gecko内核：代表作品是Firefox，即火狐浏览器。

c、Webkit内核：代表作品是Safari Chromewebkit、曾经的Chrome，是开源的项目。

d、Presto内核：代表作品是Opera ，Presto是由Opera Software开发的浏览器排版引擎，它是世界公认最快的渲染速度的引擎。在13年之后，Opera宣布加入谷歌阵营，弃用了Presto

e、Blink内核：由Google和Opera Software开发的浏览器排版引擎，2013年4月发布。现在Chrome内核是Blink。谷歌还开发了自己的JS引擎，V8，使JS运行速度极大地提高了

link和@import的区别

• a.link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
• b.页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
• c.import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

 

图像优化、格式的区别

图像优化

• a.不用图片，尽量用css3代替。比如说要实现修饰效果，如半透明、边框、圆角、阴影、渐变等，在当前主流浏览器中都可以用CSS达成。
• b.使用矢量图SVG替代位图。对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SVG了，所以可放心使用！
• c.使用恰当的图片格式。我们常见的图片格式有JPEG、GIF、PNG。基本上，内容图片多为照片之类的，适用于JPEG。而修饰图片通常更适合用无损压缩的PNG。GIF基本上除了GIF动画外不要使用。且动画的话，也更建议用video元素和视频格式，或用SVG动画取代。
• d.按照HTTP协议设置合理的缓存。
• e.使用字体图标webfont、CSS Sprites等。
• f.用CSS或JavaScript实现预加载。
• g.WebP图片格式能给前端带来的优化。WebP支持无损、有损压缩，动态、静态图片，压缩比率优于GIF、JPEG、JPEG2000、PG等格式，非常适合用于网络等图片传输。

图像格式区别

矢量图：图标字体，如 font-awesome；svg

位图：gif,jpg(jpeg), png

区别：　　1、gif:是是一种无损，8位图片格式。具有支持动画，索引透明，压缩等特性。适用于做色彩简单(色调少)的图片，如logo,各种小图标icons等。

2、JPEG格式是一种大小与质量相平衡的压缩图片格式。适用于允许轻微失真的色彩丰富的照片，不适合做色彩简单(色调少)的图片，如logo,各种小图标icons等。

3、png:PNG可以细分为三种格式:PNG8，PNG24，PNG32。后面的数字代表这种PNG格式最多可以索引和存储的颜色值。

关于透明：PNG8支持索引透明和alpha透明;PNG24不支持透明;而PNG32在24位的PNG基础上增加了8位（256阶）的alpha通道透明;

优缺点：

1、能在保证最不失真的情况下尽可能压缩图像文件的大小。

2、对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。

列举Html5、 Css3 新特性

a.html5的新特性？(记住有九大模块内容)

• 添加了video，radio标签
• 添加了canvas画布和svg,渲染矢量图片
• 添加了一些列语义化标签header,footer,main,section,aside,nav等
• input的type值新添加了很多属性（email，url，number，range，Date pickers (date, month, week, time, datetime, datetime-local)，search，color）
• 添加了地理位置定位功能 Geolocation API
• 添加了web存储功能，localStorage和sessionStorage
• 使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本
• web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
• 服务端事件推送（EventSource 对象用于接收服务器发送事件通知），所有主流浏览器均支持服务器发送事件，除了Internet Explorer

b.CSS3中新添加的特性？（css3也有九大属性）

• 媒体查询（可以查询设备的物理像素然后进行自适应操作）
• transform，transition，translate,scale,skelw，rotate等相关动画效果
• box-shadow,text-shadow等特效
• CSS3 @font-face 否则,设计师可以引入任意的字体了
• CSS3 @keyframes 规则，可以自己创建一些动画等
• 2D、3D转换
• 添加了border-radius，border-image等属性
• CSS3 创建多列（column-count规定文本可以以几列的方式布局）
• CSS3 用户界面（resize，box-sizing，outline-offset）