web性能优化

1、页面优化五大法则

    1.1、精简合并

            A、 html  去掉注释，回车符、无效字节可节省65K

            B、 css 利用gulp等工具压缩

            C、 JavaScript  利用 JSMin、YUI Compressor 工具（每个JS文件可降低26%文件大小）/采用webpack构建，压缩js代码。

                new webpack.optimize.UglifyJsPlugin({

                        compress: { warnings: false, drop_debugger: true,drop_console: true },

                        sourceMap: true

                    })

            D、 减少bundle数量    

                    使用构建工具(webpack、rollup等)将多个文件打成一个bundle，减少下载次数。

---

1.2、异步

A、 使用ajax请求数据

B、 提前加载,减少网络请求等待。

C、 延迟加载，使用async/defer

D、Javascript放置body底部：避免阻塞下载

E、 CSS放到header中：避免白屏

F、 CSS避免使用 @import

---

1.3 、图片优化

A、 图片地图

B、 CSS Sprite

    .no3 {

        background : transparent url( ../images/no713.jpg );

        background-position : 0 -30px;

        width : 15px;

        height: 15px;

    }

C、 Base64

inline images: 图片内嵌到网页文本中。

.sample-inline-png {

padding-left: 20px;

background: white;

url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMA

AAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrA

z3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTk

SuQmCC') no-repeat scroll left top; }

D、 Compress(压缩)

    图像种类：PNG8, PNG16, PNG256,

- 使用小且可缓存的favicon

网站图标文件favicon.ico，不管你服务器有还是没有，浏览器都会去尝试请求这个图标。所以我们要确保这个图标： 存在； 文件尽量小，最好小于1k； 设置一个长的过期时间。

---

1.4 、 网络优化

A、多域名增加并行下载数，提升整站下载时间

B、 广告与页面分离

D、开启Gzip压缩

         通常可以减少70%网页内容的大小，包括脚本、样式表、图片等文件。

        gzip比deflate更高效，主流服务器都有相应的压缩支持模块。

E、 减少Cookie大小

Cookie被用来做认证或个性化设置，其信息被包含在http报文头中，对于cookie

        我们要注意以下几点，来提高请求的响应速度：

            去除没有必要的cookie，如果网页不需要cookie就完全禁掉

            将cookie的大小减到最小

            注意cookie设置的domain级别，没有必要情况下不要影响到sub-domain

            设置合适的过期时间，比较长的过期时间可以提高响应速度。

F、 添加Expires或Cache-Control响应头

    Cache-Control

        cache-control: max-age=31536000

        cache-control: private

        cache-control: no-cache

    Expires

        expires: Sat, 04 Dec 2010 01:00:43 GMT

        修订文件名，将版本号加入其中，并设置长久的Expires