# 前端性能优化规则
-
✨减少 HTTP 请求。方法：将多个 css 合并在一起；将多个 JS 合并在一起；使用雪碧图。
-
使用内容发布网络（ CDN ）。方法：可引入第三方的资源库，比如引入国内提供 cdn 加速的网站的 jquery 资源等。
-
压缩❄️JS、CSS、使用合理大小图片等。
-
将样式表放在顶部。
-
将脚本放在底部。🎈
-
精简 JavaScript（即模块化开发，尽可能实现代码共用，避免死循环，移除重复脚本）。
-
代码书写规范，确保代码的健壮性，🌈及时删除冗余的代码。
-
尽量减少⚡️使用 JS 操作 DOM，比如追加和删除。
# SEO 站内优化（搜索引擎优化）站内优化：前端职责
-
页面结构、框架：html 代码与 CSS 分离，尽量少的嵌套。
-
留白检测，js 代码后置：清除多余的空白，采用 Gzip 压缩，尽可能的减少 js 数量，将它们适当的合并。
-
页面代码规范
1
2
3
4
5
6
7
8
· title 标签 全面，合理，添加关键字
· h1-h4 标签 重要部分，标题使用h1-h2 合理使用，不能滥用 比如文章或内容有些强调部分可以使用Strong或em就不要用h标签
· img 所有的都加上Alt 部分加上title，里面添加内容要有关键字
· meta 标签 全面重要为先原则
· HTML 元素使用正确，尽量减少嵌套，行内元素不能嵌套块内元素，尽量不用各种hack方法
· keywords和description标签 -
网站载入速度
1
2
3
4
5
6
7
· 使用性能佳的服务器
· 尽量少的js代码与体积
· 使用Sprite技术
· 减少DNS查询
· 使用缓存，减少HTTP请求 -
有网站地图，有利于搜索引擎抓取页面，收录页面（站外优化： SEM）。
-
其他的则是运营、推广的工作。目的就是让搜索引擎更加热爱访问你的网站。
# 前端性能诊断优化工具介绍与使用
- chrome 的内置诊断工具：network 、audits。
- 也可以到谷歌或火狐的应用商店下载与网站优化或开发有关的插件辅助诊断和改善。
- 生产环境清除缓存方式：加版本号。刚好与开发环境要缓存相反。
# 站内 SEO 基本 html 结构
1 |
|
