前端性能优化（JS/CSS优化，SEO优化）

减少HTTP请求的次数或者请求内容大小

页面中每发送一次请求，都会完成请求+响应这个完成的HTTP事务，会消耗性能，造成HTTP链接通道阻塞

• 1.采用雪碧图（CSS Split/CSS 图片精灵）

• 2.真实项目中，我们最好把CSS或者JS文件合并压缩

• 3.采用图片懒加载（扩充：数据懒加载）

1.开始加载页面的时候，我们只把首屏或者前两屏的数据从服务器端进行请求
2.当页面下拉，滚动到哪个区域，在把这个区域进行请求，再加上延迟加载
3.分页技术（分页展示技术采用的也是是数据的懒加载思想实现的）
复制代码

采用CDN加速

CDN:分布式（地域分布式）

关于编写代码的一些优化

• 1.在编写的JS代码的时候，尽量减少对DOM的操作

【DOM弊端】
1.DOM存在映射机制（JS中的DOM元素对象和页面中的DOM结构是存在映射机制的）
2.页面中DOM结构改变或者样式改变，会触发浏览器的回流，（对DOM结构重新进行获取），会触发DOM的重绘
复制代码

• 2.编写代码的时候，更多的使用异步编程

同步编程会导致上面东西玩不成，下面任务也做不了 我们开发的时候可以把某一个区域的模块设置为异步编程，这样只要模块之间没有必然的先后顺序，都可以独立进行加载，不会受到上面模块的堵塞影响 尤其是Ajax的请求数据，我们一般都使用异步编程，最好是基于promise设计模式进行管理

• 3.在真实项目中，我们尽可能避免一次性循环过多数据，尤其是避免while导致的死循环

• 4.CSS选择器优化

1.尽量减少标签选择器的使用
2.尽可能少用ID标签，多使用样式类选择器（通用性强）
3.减少选择器前面的前缀
4.尽量使用CSS3动画，CSS动画都开启了硬件加速

• 5.避免使用CSS表达式

• 6.减少页面中的冗余代码，尽可能提高方法的重复使用率：‘低耦合 高内聚’

• 7.最好CSS放在head中，JS放在BODY尾部，让页面加载的时候，先加载CSS，再加载JS

• 8.避免使用eval

1.性能消耗大
2.代码压缩后，容易出现代码错乱问题
复制代码

• 9.尽量减少闭包的使用

• 10.善于使用事件委托

• 11.编写代码尽可能使用设计模式来构建体系

• 12.CSS中减少对滤镜的使用

SEO优化技巧

• 1.页面中杜绝出现死链接（404页面）（服务器处理）

• 2.避免浏览器中异常错误的抛出

• 3.增加关键词优化

• 4.对于不经常更新的数据，最好采用浏览器的304缓存做处理

• 5.使用字体图标代替一些页面中的位置

扩展：

• 如果当前页面中出现了AUDIO或者VIDEO标签，我们最好设置它们的preload=true:页面加载的时候，音频视频资源不进行加载，播放的时候进行加载

preload=auto preload=metadata

• 在客户端和服务器端进行数据通信的时候，我们尽量使用JSON格式进行数据传输

转载于:https://juejin.im/post/5a9bb43c51882555894942f0