现如今很多前端开发人员常用的是Vue、React这类SPA框架，如果是做管理系统非常方便，可以最大化的突出数据处理方面的优势，当然也有很多小伙伴做的是混合开发，比如uniapp、reactnative、taro等等，以及目前很火的flutter。
时至今日，PC端和H5端的门户类网站仍然活跃，依然要靠SEO来提升排名，但是现如今已经发展到了以Vue、React、Angular为主流的时代了，我们总不能倒退回JQuery去做开发，所以在现代框架下去做SEO优化就非常有必要了。
首先，先来介绍一些开发过程中，要注意的一些基本的SEO知识。
一、HTML标签的使用
不要什么都用div，尽量合理的使用ul、ol、table等，HTML5的新标准已经推出了很多年了，但是很多小伙伴还是沉醉于HTML4的标签，大家要多尝试譬如article、main、header、footer、aside这类的语义化标签，逐步的去替换div，这样对SEO有很大的提升。
二、TDK
TDK(Title、Description、Keywords)，这三项对于一个网站来说是至关重要的，绝不能小觑。大家可以去参考一些较大的资讯网站，很多页面的TDK是不同，每个页面的TDK都和这个页面的内容有一定关系。
title汪峰头条又被抢走-娱乐/titlemetaname="keywords"content="娱乐,汪峰,头条,明星,歌手"/metaname="description"content="娱乐新闻,明星八卦"/
三、图片属性
imgsrc=""alt="图片描述"title="图片描述"/
（1）当图片未成功显示时候，仍可以显示文本，用户可以了解图片主题
（2）当图片成功显示的时候，鼠标以上图片，可显示图片描述
（3）可解决网速慢、src引用错误、浏览器禁用图像、用户使用屏幕阅读器等情况
（4）img/要定义大小、不然会造成页面重新渲染，影响加载速度
四、超链接
内链采用绝对路径，减少服务器的响应时间，
例如：ahref="
我们经常使用ChromeDevTools来开发调试，但是很少知道怎么利用它来分析页面性能，这篇文章，我将详细说明怎样利用ChromeDevTools进行页面性能分析及性能报告数据如何解读。如果你认真看了本文，一定能学会分析，没学会，你来找我～
分析面板介绍上图是ChromeDevTools的一个截图，其中，我认为能用于进行页面性能快速分析的主要是图中圈出来的几个模块功能，这里简单介绍一下：
Network:页面中各种资源请求的情况，这里能看到资源的名称、状态、使用的协议(