前端性能优化都有哪些

1，SEO优化

• 合理的 title 、 description 、 keywords ：搜索对着三项的权重逐个减小， title 值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面 title 要有所不同； description 把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面 description 有所不同； keywords 列举出重要关键词即可
• 语义化的 HTML 代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
• 重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取长度有
• 限制，保证重要内容一定会被抓取
• 重要内容不要用 js 输出：爬虫不会执行js获取内容
• 少用 iframe ：搜索引擎不会抓取 iframe 中的内容
• 非装饰性图片必须加 alt
• 提高网站速度：网站速度是搜索引擎排序的一个重要指标

2，server优化

• 减少 HTTP 请求，合并文件、雪碧图
• 减少 DNS 查询，使用缓存
• 减少 Dom 元素的数量
• 使用 CDN
• 配置 ETag ,http缓存的手段
• 对组件使用 Gzip 压缩
• 减少 cookie 的大小

3，css优化

• 将样式表放在页面顶部
• 使用 less scss 表达式
• 使用 link 不适用 @import 引入样式
• 压缩 css
• 禁止使用 gif 图片实现 loading 效果（降低 CPU 消耗，提升渲染性能）
• 使用 CSS3 代码代替 JS 动画（尽可能避免重绘重排以及回流）
• 对于一些小图标，可以使用 base64 位编码，以减少网络请求。
• 页面头部的 <style> <script> 会阻塞页面；（因为 Renderer进程中 JS 线程和渲染线程是互斥的）
• 当需要设置的样式很多时设置 className 而不是直接操作 style

4，js方面

• 将脚本放到页面底部
• 将 js 外部引入
• 压缩 js
• 使用 Eslint 语法检测
• 减少 Dom 的操作
• 熟练使用设计模式
• 禁止使用 iframe （阻塞父文档 onload 事件）
• 页面中空的 href 和 src 会阻塞页面其他资源的加载
• 网页 gzip ， CDN 托管， data 缓存 ，图片服务器

5，webpack优化点

• 代码压缩插件 UglifyJsPlugin
• 服务器启用 gzip 压缩
• 按需加载资源文件 require.ensure
• 优化 devtool 中的 source-map
• 剥离 css 文件，单独打包
• 去除不必要插件，通常就是开发环境与生产环境用同一套配置文件导致
• 开发环境不做无意义的工作如提取 css 计算文件hash等
• 配置 devtool
• 优化构建时的搜索路径 指明需要构建目录及不需要构建目录

6，加载优化：

• 合并CSS、JavaScript
• 合并小图片、使用精灵图
• 缓存一切可缓存的资源
• 使用外链式引用CSS、JavaScript
• 压缩HTML、CSS、JavaScript
• 启用GZip
• 使用首屏加载、按需加载、滚屏加载
• 通过Media Query加载
• 增加Loading进度条
• 减少Cookie
• 避免重定向
• 异步加载第三方资源

7，页面渲染优化

• HTML 文档结构层次尽量少，最好不深于 6 层
• 脚本尽量放后边，避免组织页面加载
• 少量首屏样式可以放在便签内
• 样式结构层次尽量简单
• 脚本减少 DOM 操作，减少回流，尽量缓存访问 DOM 的样式信息
• 尽量减少 JS 修改样式，可以通过修改 class 名的方式解决
• 减少 DOM 查找，缓存 DOM 查找结果
• 动画在屏幕外或页面滚动时，尽量停止

8，图片优化

• 使用智图
• 使用（CSS3、SVG、IconFont）代替图片
• 使用Srcset
• webP优于JPG
• PNG8优于GIF
• 图片不宽于640

9，脚本优化

• 减少重绘和回流
• 缓存Dom选择与计算
• 尽量使用事件处理，避免批量绑定事件
• 尽量使用ID选择器
• 使用touchstart、touchend代替click

10，为什么利用多个域名来存储网站资源会更有效？

• CDN 缓存更方便
• 突破浏览器并发限制
• 节约 cookie 带宽
• 节约主域名的连接数，优化页面响应速度
• 防止不必要的安全问题