前端之页面性能优化

提到页面性能优化，诸位老哥能想到哪些方式呢？
这篇文章我们就一下常用的页面性能优化的方式

 1.资源压缩合并，减少http请求

其实这种方法没什么好说的，因为http是无连接的协议，每请求一次就会断开，所以每次连接会花费时间，请求也会花费时间，页面响应就会变慢，资源压缩合并就会显著减少http请求次数，提升页面性能，css sprite就是这种原理

2.非核心代码异步加载

主要是用于js加载，因为js是单线程的，而大多数的网站的js文件就是跨域加载，就会比较缓慢，这时候就可以让核心js代码先执行，非核心代码异步执行，具体方法有哪些呢？

①动态script标签

使用document.createElement(‘script’)；来动态创建script标签实现

②defer

给script标签加入一个defer属性，这样这个script标签就会在页面全部加载完之后执行。

③async

给script标签加入一个async属性，他与defer不同的是，具有defer属性的script会根据先后顺序执行，而async则是哪个script加载完成哪个先执行，不会根据先后顺序。

3.http缓存

这应该是页面性能优化最有效的方法了，如果你没有给页面设置http缓存，那么其他的方法可能起到的方法微乎其微。
他的主要原理就是当你访问一个网页，浏览器会将资源缓存在本地，下次访问时不会再去访问服务器，这样就会大大加快页面响应
注意http缓存不是cookie，localstorage，这两个是存储方式
http缓存分为强缓存和协商缓存，强缓存就是在过期时间内不会再去访问服务器请求这些资源，协商缓存是在过期以后不知道服务器内容有没有发生改变，访问服务器，如果无改变就会执行本地资源
http缓存的关键字key都会在响应头中，我们打开一个网页看一下控制台

画红线的就是http缓存了，我们一个一个说，
Cache-Control 强缓存，max-age就是它的最大过期时间单位是s
Etag协商缓存，他就如同一个hash值，如果请求服务器的hash值改变，那么浏览器就会重新向服务器请求这些资源，如果未发生改变，则会执行本地资源。
Expires 强缓存，它的value值就是过期时间，这个时间是客户端本地时间，那么如果客户端时间与服务器时间不一致怎么办呢，所以Cache-Control就应运而生，两者都存在的情况会依照Cache-Control来执行
Last-Modified 协商缓存，最后修改时间，同Etag差不多
http缓存就说这么多，详细的内容可以去各种前端大牛的博客里看，专门有讲的。

4.CDN加速

因为国内有多个网络运营商，服务器地区与客户端地区如果相隔很远又不是一个运营商，那么请求这个网站资源速度就会很慢，cdn就可以让用户请求资源加快。

5，dns预解析

link rel=”dns-prefetch” href=”http://www.baidu.com”

这一句各位老哥应该很熟悉了，在head中加入这行代码就会实现dns预解析。

meta http-equiv=”x-dns-prefetch-control” content=”on”

这一句可能有人见过，在http1.0中，几乎所有的a标签连接都是预解析dns的，但是在http1.1中a标签没有预解析，所以这一行代码就是预解析开关。

好了页面性能优化就说到这，有很多大牛博客把每一种说的都很详细老哥们可以自己去找找看