web性能优化

作者: 小小_绿 | 来源:发表于2019-08-08 00:38 被阅读22次

    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

    相关文章

      网友评论

        本文标题:web性能优化

        本文链接:https://www.haomeiwen.com/subject/gviylctx.html