做为前端小生,咱们须要了解的一些浏览器相关的知识

1.SEO（Search Engine Optimization）搜索引擎优化:

SEO概念 : 汉译为搜索引擎优化。搜索引擎优化是一种利用搜索引擎的搜索规则来提升目的网站在有关搜索引擎内的排名的方式。

SEO目的：为网站提供生态式的自我营销解决方案，让网站在行业内占据领先地位，从而得到品牌收益。

 

2. 各大浏览器的内核(排版引擎):

(1). IE逐渐成为微软专属软件. 它采用的排版引擎(俗称内核)为Trident

(2). Safari是苹果公司开发的浏览器. Safari所用浏览器内核的名称是大名鼎鼎的WebKit。

(3). 谷歌Chrome/Chromium浏览器从08年创始至今一直使用苹果公司的WebKit做为浏览器内核原型，是WebKit的一个分支，咱们能够称之为Chromium引擎（注意咱们这里说的是Chromium引擎，而不是Chromium浏览器）。

(4). Opera浏览器，是一款挪威Opera Software ASA公司制做的支持多页面标签式浏览的网络浏览器, 它使用了Opera Software自主开发的Presto渲染引擎。

(5). Firefox浏览器使用的是Gecko内核

 

3. 各大浏览器对应的css属性私有前缀

浏览器	私有前缀
chrome和safari	-web-kit
Firefox	-moz-
IE	-ms-
Opera	-o-

 

4. 浏览器的渲染机制:

浏览器渲染网页的步骤:

1.使用HTML建立文档对象模型(DOM)

2.使用css建立css对象模型(CSSOM)

3.基于DOM和CSSOM执行脚本(Script)

  补充脚本的概念: 脚本语言又被称为扩建的语言，或者动态语言，是一种编程语言，用来控制软件应用程序，脚本一般以文本（如ASCII)保存，只在被调用时进行解释或编译。

4.合并DOM和CSSOM造成渲染树(Render Tree)

5.使用渲染树布局(Layout)全部元素

6.渲染(Paint)全部元素.

图解

浏览器渲染网页的步骤:

 

:

浏览器渲染网页各个步骤分析:

步骤1. HTML加载优化策略:

　　　1. 样式在顶部,脚本在底部. 缘由是脚本加载完后,没有样式是不会执行的.

　　　2. 最小化和压缩: 移除多于的字符,空格,注释等.

　　　3. 无障碍:给元素加上aria标签,图片多用alt文本, 会大大提升残障人士的满意度

 

步骤2.CSS渲染阻塞:

当浏览器发现任何与节点相关的样式时候,好比外部,内部,行内样式,当即会中止渲染DOM,并利用这些节点建立CSSOM.

CSS加载优化策略:

1. 使用,media属性指定加载样式的条件.
2. 延迟加载首屏下面的CSS样式.
3. 只加载须要的样式.

 

步骤3. JavaScript的解析器阻塞: 即浏览器构建DOM和CSS样式的时候,忽然发现外部或者行内脚本,就会先中止解析节点,会先完成样式的构建和脚本的执行.

JavaScript加载优化策略:

1. 利用async属性实现异步加载脚本.
2. 使用defer属性实现延迟加载脚本,会等到HTML完成解析后再执行.

 补充: 异步async[ə'zɪŋk] 和 延迟defer:

1 <script src="script.js"></script>
2 没有 defer 或 async，浏览器会当即加载并执行指定的脚本，“当即”指的是在渲染该 script 标签之下的文档元素以前，也就是说不等待后续载入的文档元素，读到就加载并执行。
3 
4 <script async src="script.js"></script>
5 有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
6 
7 <script defer src="myscript.js"></script>
8 有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），可是 script.js 的执行要在全部元素解析完成以后，DOMContentLoaded 事件触发以前完成。

 

 

步骤4. 渲染树

一旦全部节点已被解析，DOM 和 CSSOM 准备合并，浏览器便会构建渲染树。若是咱们把节点想象成单词，那么对象模型就是句子，渲染树即是整个页面。

 

步骤5. 布局

布局阶段须要肯定页面上全部元素的大小和位置

 

步骤6. 渲染

最终渲染阶段,会真正地光栅化(把图形数据转化成图像)屏幕上的像素,把页面呈现给用户..