背景：前端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、待补充...
网友评论