web前端常用的优化技巧总结
web前端常用的优化技巧总结
一、减少HTTP请求的次数和内容大小
页面中每发送一次请求，都需要完成请求+响应这个完整的HTTP事务，会消耗一些时间，也可能会导致HTTP链接通道堵塞，为了提高页面加载速度和运行的性能，我们应该减少HTTP的请求次数或者请求内容的大小(请求内容越大，消耗的时间越大)。
1.CSS雪碧图技术 (CSS Sprit/CSS图片精灵)把一些小图合并在一张大图上，使用的时候通过背景图片定位，定位到具体的某一张小图的位置
.pubBg{
background:url('sprit.png') norepeat;
background-size: x y;//-> 和原图大小保持一致
}
.box{
background-position: x y; // 定位到具体位置展示不同的图片
}
....
<div class="pubBg box"></div>
2.真实项目中，最好把CSS或者JS文件进行合并压缩，尤其是在移动端开发的时候，如果CSS或JS内容不是很多，可以采取内嵌式减少HTTP请求次数。
- CSS合并成一个 JS也最好合并成一个
- 首先通过一些工具（webpack）把合并后的CSS或JS压缩成xxx.min.js，减少文件大小
- 服务器端开启资源文件的GZIP压缩（服务器完成的）
.....
通过一些自动化工具完成CSS/JS的合并压缩，或者再完成LESS转CSS，ES6转ES5等操作，这种自动化构建模式称为“前端工程化开发”。
3.采用图片懒加载技术，在页面开始加载的时候不请求真实的图片地址，而是用默认图占位，当页面加载完成后，再根据相关条件依次加载真实图片。（减少页面首次加载HTTP的请求次数）
真实项目中开始图片都不加载，页面首次加载完成，先把第一屏幕中可以看见的图片进行加载，随着页面滚动，再把下面区域中能够呈现出来的图片进行加载
根据图片懒加载技术还可以扩充出数据懒加载
数据懒加载
- 开始加载页面的时候只把首屏或者前两屏的数据从服务器端进行请求（有些网站的首屏数据是后台渲染好整体返回给客户端呈现的）
- 当页面下拉，滚动到哪个区域，再把这个区域的数据进行请求（请求回来做数据绑定以及图片延迟加载等）
- 分页展示技术采用的也是数据的懒加载的思想
如果数据很多的时候最好做分批请求，开始只请求第一页的数据，当用户点击第二页的时候再请求第二页数据（微博：下拉到一定距离后，再请求第二页数据）
4. 经常不更新的数据，采用浏览器的304缓存做处理(主要由服务器端处理)
第一次请求CSS和JS，浏览器会把请求的内容缓存起来，如果做了304处理，用户再次请求CSS和JS，直接从缓存中读取，不需要再去服务器获取了（减少了HTTP请求次数）当用户强制刷新页面（CTRL+F5）或者当前缓存发生了变动，都会重新从服务器端获取资源
客户端可以基于localStorage来做一些本地存储，例如第一次请求的数据或者不经常更新的CSS和JS，都可以把内容存储在本地，下一次页面加载就可以从本地获取，设定一个期限或标识可以控制在某个阶段重新从服务器获取
5. 使用字体图标代替一些页面中的位图(图片)
不仅做适配的时候方便，而且更加轻量级，减少了HTTP请求次数（类似于雪碧图）
6. 如果当前页面中出现了AUDIO或者VIDEO标签，最好设置他们的preload=none:页面加载的时候，音视频资源不加载，播放的时候再加载（减少页面首次加载HTTP请求的次数）
preload=auto: 页面首次加载的时候就加载了音视频资源
preload=metadata: 页面首次加载的时候只加载音视频的头部信息资源
......
7. 客户端和服务器端进行数据通信的时候，尽量使用JSON格式进行数据传输
[优势]
- JSON格式的数据能够清晰明了地展示数据结构，方便获取和操作
- 相对于XML格式传输，JSON格式的数据更加轻量级
- 客户端和服务器端都支持JSON格式数据地处理，处理方便
真实项目中并不是所有地数据都要基于JSON 某些特殊请求（文件流地传输或者文档传输），使用JSON就不合适了。
8. 采用CDN加速
CDN：分布式（地域分布式）
二、编写代码时候地一些优化技巧
除了减少HTTP请求次数和大小，在编写代码地时候也可以进行优化，让页面性能有所提升
1.在JS中操作DOM非常消耗性能，减少对DOM的操作可以提升页面性能
[操作DOM弊端]
- DOM存在映射机制 （JS中的DOM元素对象和页面中的DOM结构是存在映射机制的，一改俱改），这种机制是浏览器按照W3C标准完成对JS语言的构建和DOM的构建（其实就是构建一个监听机制），操作DOM要同时修改两个地方
- 页面中的DOM结构改变或者样式改变，会触发浏览器的回流（浏览器会把DOM结构重新进行计算，这个操作很耗性能）和重绘（把一个元素的样式重新渲染）（react虚拟dom, vue vmModel）
2. 编写代码的时候，更多地使用异步编程
同步编程会导致上面东西完不成，下边任务也做不了，开发的时候可以把某一区域模块都设置成异步编程，这样只要模块之间没有必然的先后顺序，都可以独立进行加载，不会受到上面模块的堵塞影响(用的不多)
Ajax数据请求一般都要使用异步编程，最好是基于promise设计模式进行管理
项目中经常使用(fetch，vue axios等插件来进行Ajax请求处理，这些插件就是基于promise设计模式对Ajax进行的封装处理)
3. 尽可能避免一次性循环过多数据（循环是同步操作），尤其是避免while导致的死循环操作
4. CSS选择器优化
1） 尽量减少标签选择器的使用
2）尽可能少使用ID选择器，多使用样式类选择器(通用性强)
3）减少选择器前面的前缀，例如：选择器是从右向左查找的.headerBox.nav .left a{}
5. 避免使用CSS表达式
.box{
background-color:expression((new Data().getHours()%2?'red':'blue'));
}
6. 减少页面中的冗余代码， 尽可能提高方法的重复使用率：“低耦合高内聚”
7. CSS放在head中，JS放在BODY尾部，让页面加载的时候先加载CSS，再加载JS（先呈现页面，再给用户提供操作）
8. 避免使用eval
1）性能消耗大
2）代码压缩后容易出现代码执行错乱的问题
9. 尽量减少闭包的使用
1）闭包会形成一个不晓辉的栈内存，过多的栈内存累积会影响页面性能
2） 容易导致内存泄漏
闭包也有自己的优势：保存和保护，只能尽量减少，但无可避免
10. DOM事件绑定尽量使用事件委托 避免一个个的事件绑定
事件委托（代理）：把事件绑定给外层容器，当里面的后代元素相关行为被处罚，外层容器绑定的方法也会被触发执行（冒泡传播机制导致），通过事件源的不同做不同的操作
11. 尽量使用CSS3动画代替JS动画
因为CSS３的动画或者变形都开起了硬件加速，性能比JS动画好
12. 编写JS代码的时候尽可能使用设计模式来构建体系， 方便后期维护，提高了扩充性等
13. CSS中减少对滤镜的使用，页面中也减少对FLASH使用
14. 减少页面回流
三、关于页面的SEO优化技巧
1. 杜绝出现死链接（404页面） 当用户输入一个错误页面，引导到404提示页面（服务器处理的）
2. 避免浏览器中异常错误抛出
尽量避免代码出错
使用try...catch...做异常信息捕获
3. 增加页面关键词优化
