web前端性能的优化都是很重要的
那么我们进行优化需要从哪些方面入手呢？可以遵循雅虎的前端优化
内容部分
1.尽量减少HTTP请求
我们访问网站的时候，会对服务器发出HTTP请求，网站打开的速度快慢与页面的大小有关外，还有个重要的因素就是HTTP的请求数。尽量减少页面的HTTP请求，可以提高页面载入速度。方法：
1. 减少页面中的元素（图片、form、flash等等元素）
2. 尽量用雪碧图（CSS Sprites）
3. 精简JS文件和CSS文件的数量（合并脚本和CSS文件，可以减少了HTTP请求）
有的人喜欢把CSS分成结构清晰的几个部分，如header.css、mianbody.css、footer.css这样页面的维护和修改是提高了，可对加快服务器响应时间就存在问题了
4. 用 location.href() 代替 location.reload()
location.reload() 会刷新页面，可刷新时页面资源会重新请求服务器
用location.href="当前页url" 代替location.reload()浏览器会读取本地缓存
5. 动态页面静态化（用户访问动态页面要与数据库服务器进行数据交换,动态页面静态化,就是把动态网页生成HTML文件，用空间换效率）
↑不推荐↑拆东墙补西墙不是聪明举动
因为空间和时间是熊掌和鱼翅
例（挪用大神的）：
void swap(int a, int b) {
int temp = a;
a = b;
b = temp;
}
用temp多占用了空间,但是copy操作不用太长时间
void swap(int a, int b) {
a ^= b;
b ^= a;
a ^= b;
}
这个不用临时变量temp，节省了空间，但因为需要计算，所以要花更长时间
6. 图片地图（Image Maps）
也就是图像热点，图像地图就是把一张图片分成若干区域,每个区域指向不同的URL地址,这些区域也称为热点,Image Maps只适用于连续的图标
2.减少DNS查找
基础:DNS(Domain Name System)： 负责将域名URL转化为服务器主机IP。
DNS查找流程：首先查看浏览器缓存是否存在，不存在则访问本机DNS缓存，再不存在则访问本地DNS服务器。
所以DNS也是开销，通常浏览器查找一个给定URL的IP地址要花费20-120ms，在DNS查找完成前，浏览器不能从host那里下载任何东西。
TTL(Time To Live)：表示查找返回的DNS记录包含的一个存活时间，过期则这个DNS记录将被抛弃。
******影响DNS缓存的因素******
1. 可以设置TTL值表示DNS记录的时间。DNS缓存将根据TTL值判断DNS记录什么时候抛弃，一般都不会很大，主要是考虑到快速故障转移的问题
2. 浏览器DNS缓存也有自己的过期时间，这个时间是独立于本机DNS缓存的，相对也比较短，例如chrome只有1分钟左右。
3. 浏览器DNS记录的数量也有限制，如果短时间内访问了大量不同域名的网站，则较早的DNS记录将被抛弃，必须重新查找。
即使浏览器丢弃了DNS记录操作系统的DNS缓存也有很大机率保留着该记录，这样可以避免通过网络查询而带来的延迟。
3.避免重定向
1、在定义链接地址的href属性的时候，尽量使用最完整的、直接的地址。
2、在使用Response.Redirect的时候，设置第二个参数为false
3、如果涉及到从测试环境到生产环境的迁移，建议通过DNS中的CNAME的机制来定义别名，而不是强制地重定向来实现
4.让Ajax可缓存
增加Expires头，Cache-Control头
5.延迟加载组件
react-lazy
const CreateProject = lazy(() => {
return new Promise(resolve => setTimeout(resolve, 2000)).then(
() =>import('../common/CreateProject.js')
)
})
6.预加载组件/懒加载组件
7.减少DOM元素的数量
8.跨域分离组件
9.尽量少用iframe
10.杜绝404
Css部分
11.避免使用CSS表达式
12.选择<link>舍弃@import
13.避免使用滤镜
14.把样式表放在顶部
Js部分
15.去除重复脚本
16.尽量减少DOM访问
17.用智能的事件处理器
18.把脚本放在底部
Javascript,Css
19.把JavaScript和CSS放到外面
20.压缩JavaScript和CSS
图片
21.优化图片
22.优化CSS Sprite
23.不要用HTML缩放图片
24.用小的可缓存的favicon.ico（P.S. 收藏夹图标）
Cookie
25.给Cookie减肥
26.把组件放在不含cookie的域下
移动端
27.保证所有组件都小于25K
28.把组件打包到一个复合文档里
服务器
29.Gzip组件
30.避免图片src属性为空
31.配置ETags
32.对Ajax用GET请求
33.尽早清空缓冲区
34.使用CDN（内容分发网络）
35.添上Expires或者Cache-Control HTTP头
