浏览器渲染过程以及前端seo优化

浏览器渲染过程

1. 解析HTML，得到一个DOM tree
2. 解析CSS，得到CSSOM tree
3. 将两者整合成渲染数，render tree
4. 布局（layout）， 根据Render Tree计算每个节点的位置大小等信息 （在草稿本上画了个草图）
5. 绘制（Painting ）根据计算好的信息绘制整个页面
   扩充：1、2、3非常快，但是4和5比较耗时，有三个术语：
   “重排” 和 “回流” 指的是重新执行步骤4
   “重绘” 指重新执行步骤5
   重排意味着重新计算节点的位置大小等信息，重新在草稿本上画了草图，所以一定会重绘
   重绘不一定会重排，比如背景颜色改变
   重排和重绘代价很高，所以浏览器并不会一有信息改变就去执行重排和重绘，而是会将多个可能的重排和重绘一次执行。是的，它可能会异步。
   有两个css属性，display: none和visibility: hidden，前者会导致重排和重绘，后者会导致重绘。这是后者的有点，但缺点是此节点一直保存在内存中，占用资源。

前端seo优化

1.合理的网站标题（tiitle），网站描述（description），网站关键字（keyword），这三项中标题的权重最高，关键字的权重最低，描述居中。
2.标签语义化：
语义化的标签更容易让搜索引擎理解网站页面，所以为了让我们的网站更容易被抓取，尽量使用语义化的标签。
3.搜索引擎对抓取的内容实际上是有限的，比如百度一般只会抓取前200K的内容，所以我们在写代码的时候可以将重要的内容写在上面
4．重要的内容不要使用JS，我们都知道对于搜素引擎来说，更喜欢HTML和CSS，而不会抓取JS的输出内容。
5.iframe：
说起这个标签普遍都是负面的评价，耗能高，安全性低，而且这个标签同样不会被搜索引擎抓取
6. 图片要增加alt标签，这是一个很重要的标签，在网站无法加载图片的时候，会用文字提示代替图片，提高网站的可读性。