关于前端SEO要点（二）

背景：前端SEO并不难理解，对资深SEO来说，前端SEO性能优化方案也有掌握的必要。

一、页面级优化

1、js、css文件压缩、合并、外链到页面正确的位置。css置顶，js置底。

2、css sprites雪碧图将多个图片拼成一个图

3、inline images通过编码的字符串将图片内嵌到网页文本中

4、提高ajax响应速度

5、延迟加载，对一些无需最初加载的内容通过脚本延迟加载

6、减少dom元素数量，网页中元素过多对网页的加载和脚本的执行都是沉重的负担。

7、根据域名划分内容。静态动态资源分开（CDN）

8、减少iframe使用

9、减少请求次数

10、避免空的图片src

11、图片压缩、懒加载等

12、避免图片缩放，如果需要小图，就直接使用小图片。

13、使用favicon.ion

14、合理设置HTTP缓存

二、代码优化

15、减少cookie大小，提升请求响应速度

16、去除重复脚本

17、减少dom访问、操作

18、DOM的多个读操作（或多个写操作），应该放在一起。不要两个读操作之间，加入一个写操作。

19、使用事件委托

20、减少作用域链查找

21、[避免使用eval

22、字符串拼接’+=’效率不如使用数组join方法

23、不要一条条地改变样式，而要通过改变class，或者csstext属性，一次性地改变样式。

24、尽量使用离线DOM，而不是真实的网面DOM，来改变元素样式。比如，操作Document Fragment对象，完成后再把这个对象加入DOM。再比如，使用 cloneNode() 方法，在克隆的节点上进行操作，然后再用克隆的节点替换原始节点。

25、先将元素设为display: none（需要1次重排和重绘），然后对这个节点进行100次操作，最后再恢复显示（需要1次重排和重绘）。这样一来，你就用两次重新渲染，取代了可能高达100次的重新渲染。

26、position属性为absolute或fixed的元素，重排的开销会比较小，因为不用考虑它对其他元素的影响。

27、使用虚拟DOM的脚本库，比如React等。

28、只在必要的时候，才将元素的display属性为可见，因为不可见的元素不影响重排和重绘。另外，visibility : hidden的元素只对重绘有影响，不影响重排。

29、[endif]使用window.requestAnimationFrame()、window.requestIdleCallback() 这两个方法调节重新渲染

30、[endif]网页动画能够做到每秒60帧，就会跟显示器同步刷新，达到最佳的视觉效果。

31、待补充...