减少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格式进行数据传输