<tbody id='2808b73x'></tbody>

  • <i id='nvcq2tum'><tr id='6ty0sdys'><dt id='skrn04r5'><q id='453kt1f7'><span id='tcu0s9rj'><b id='p7jwrpvt'><form id='6rd6mrrj'><ins id='qkwre0x7'></ins><ul id='6856il5h'></ul><sub id='z8tyd7iv'></sub></form><legend id='qpyukq84'></legend><bdo id='dttvd6bf'><pre id='xs7m92mo'><center id='48g0ircy'></center></pre></bdo></b><th id='mn9otna0'></th></span></q></dt></tr></i><div id='u4198fr2'><tfoot id='6t819x12'></tfoot><dl id='8o6yrvde'><fieldset id='pmy26ekl'></fieldset></dl></div>
    1. <small id='0ks6o5px'></small><noframes id='z7jh93zz'>

    2. <legend id='oblvm5jz'><style id='q48kzri7'><dir id='tzzor98l'><q id='thtq1dh5'></q></dir></style></legend>

      <tfoot id='3nznoave'></tfoot>
        网站建设公司当前位置 : 网站建设公司 > 知识普及

        网站优化篇

        发布时间:2021-09-17 14:48   浏览次数:次   
        最近公司要大力推广官方网站,但是发现不论是PC网站还是手机网站的打开响应速度都比较卡顿,而每个人都知道官方网站,一般是企业对外用户打造品牌,进行宣传的第一道门,如果用户访问网站时遇到了卡顿,很多用户会选择拒绝入门,这是个大问题,所以就这个问题,我做了相关的调研和实践,已达到我们这期的要求效果。那么接下来就介绍下,优化网站的步骤及方法,供有需要的人参考。
         
         
         
        l  前端工作
         
        l  后端工作
         
         
         
        一、前端工作
         
        首先,需要前端开发工程师优先过滤掉网站首页中不再使用的js/css文件。原因很明显,只要多一个js/css文件的加载,都会与服务端进行交互,造成一定的量的资源响应速度影响,所以该部分建议优先在首页进行(因为首页是用户进入门户网站的第一站)。
         
         
         
        其次,压缩优化网站中的css、js及图片是必要的。一般情况下,大图文件可以通过贵司的UI设计师进行裁剪压缩(一般指体量较大的图片),而一些相对小的图片可以实用压缩工具压缩。另外,像css及js文件的压缩是常见的,一般推荐使用一些网站静态资源优化工具操作,比如:gulp、webpack及类似工具。
         
         
         
        最后,将样式css文件的加载放在页面上面,脚本js文件的加载放在页面的下面。原因就是页面的加载一般是从上往下进行加载解析,优先加载css文件,就可以优先显示页面渲染;后加载脚本js文件,就是在页面样式基本正常时,再解析渲染js文件,一定程度做到不卡顿现象。
         
         
         
         
         
        二、后端工作
         
        在这里,后端所做的处理也十分重要,因为后端主要从两方面对前端请求过来的静态资源进行缓存压缩,另一方面则是处理如何减少前端与后端的交互次数,大家都知道频繁的与后端服务器交互,就会开启过多的IO操作,会给服务器造成压力,从而引起服务端响应变慢的问题,所以下面分别从这两方面介绍(Web服务器推荐Nginx)。
         
         
         
        1、缓存压缩静态资源
         
        这里我以Nginx服务器为例,来演示如何缓存和压缩网站请求的静态资源,具体步骤如下:
         
         
         
        A、缓存处理
         
        location ~.*\.(png|gif|jpg|jpeg|ico|css|js)$ {
         
            root /project/www.xxx.com/;
         
            expires 24h;
         
        }
         
         
         
        PS:配置文件为nginx.conf,放在的位置为server{…}区间。
         
         
         
        B、压缩处理
         
        gzip on;
         
        gzip_min_length 1k;
         
        gzip_buffers 4 16k;
         
        gzip_comp_level 2;
         
        gzip_types text/plainapplication/x-javascript text/css application/xml text/javascriptapplication/x-httpd-php image/jpeg image/gif image/png;
         
        gzip_vary off;
         
        gzip_disable "MSIE[1-6]\.";
         
         
         
        PS:具体Nginx的gzip内容这里不做介绍,请读者自行查阅资源,基本上上面配置为常规配置,配置文件为nginx.conf,放在的位置为http{…}区间,server{…}之外。
         
         
         
        2、减少静态资源请求
         
        减少前端页面静态资源对服务端的请求次数,我这里选用或推荐的是阿里开源的mod_concat项目,它能够支持前端页面将多个js或多个css或两者的结合放在一个<script />或<link />中,统一一次与服务器交互并渲染它们。那么,接下来我介绍下如何让Nginx支持mod_concat项目,并讨论下Nginx新旧版本中对mod_concat的特殊处理,具体如下实现:
         
         
         
        A、mod_concat的下载
         
        $cd  /usr       /local/nginxmodules
         
        $wget  https://github.com/alibaba/nginx-http-concat/archive/master.zip-O nginx-http-concat-master.zip
         
        $unzip  nginx-http-concat-master.zip
         
         
         
        B、Nginx新旧版本处理
         
        在较新的Nginx版本,如:我使用的nginx-1.8.1,默认支持的协议是application/javascript,而阿里的mod_concat默认支持的是application/x-javascript,所以我们需要修改下mod_concat,保持两者的协议相同,否则会包400 Bad Request错误,如下:
         
        $cd  /usr/local/nginxmodules/nginx-http-concat-master
         
        $vim  ngx_http_concat_module.c
         
         
         
         
         
        C、如何支持mod_concat
         
        这里要使Nginx支持mod_concat,那么就需要为Nginx添加mod_concat模块,并需要配置编译即可,具体如下:
         
        $cd  /opt/nginx-1.8.1
         
        $nginx  -V
         
        如上图,我已经添加过了,所以配置参数列表中就会支持mod_concat。而正常我们应该将nginx  -V显示的已有参数配置复制,并在下面中直接粘贴重新编译(make),如下:
         
        $./configure  --prefix=/usr/local/nginx --with-http_stub_status_module--add-module=/usr/local/nginxmodules/nginx-http-concat-master
         
        $make
         
         
         
        编译完成之后,在nginx的根据路径的objs中会生成新的二进制执行文件nginx,我们需要将其替换掉原来旧的nginx,重新启动即可,当然,在复制替换前必须将正在运行的nginx先停掉再行复制,如下:
         
        $cd  /opt/nginx-1.8.1/src
         
        $nginx  -s reload
         
        $cp  ./nginx /usr/local/nginx/sbin/
         
        $nginx
         
         
         
        D、如何配置Nginx
         
        我们以前端的静态资源(css/js/png…),存放地址为statics,那么配置情况如下:
         
        location /statics/ {
         
                   root /project/www.xxx.com/;
         
                   concat on;
         
                   concat_max_files 20;
         
                }
         
         
         
        PS:
         
        Concat  on   // 开启concat服务
         
        Concat_max_files   // 支持前端拼接文件最大个数
         
         
         
         
         
        E、如何验证是否启用
         
        首先,前端页面代码对js和css的拼接形式如下:
         
        JS部分:
         
        <script src="/statics/??jquery-3.1.1/jquery-3.1.1.min.js,vue/vue.js,site/lang-zh.js,site/lang-en.js,js/jquery.cookie.js,swiper/js/swiper.min.js,site/common.js,site/component.js,site/zh-en.js?v=123"></script>
         
         
         
        CSS部分:
         
        <link href="/statics/??bootstrap/css/bootstrap.min.css,swiper/css/swiper.min.css,css/main.min.css?v=321"rel="stylesheet">
         
         
         
        正如上面所示,分别将js和css的拼接分开,好处就是更加清晰拼接的结构,并且便于后续的维护操作。当然,也可以将js和css的拼接混合起来,实现形式与单个拼接相同,这里不再赘述。
         
        另外,细心的读者会发现上面拼接的最后有?v=123形式的内容,该内容为避免页面浏览器缓存而加的版本号,一般加与不加没太大区别,如果是频繁修改的话,建议加这个版本号区分。
         
         
         
        其次,让我们来看看这种拼接是否起作用,我们可以打开浏览器控制台查看
         
         
         
         
         
        原多个css/js的请求,现在只需要一次请求即可,这在高并发环境下,可以大大缓解前端多发访问,给服务器所带来的压力问题,所以也是很多大型网站的做法,比如:京东。
         
         
         

        <small id='eajm6rji'></small><noframes id='1o001vgk'>

        <legend id='q83sfn0g'><style id='3bo0tvjf'><dir id='utjp4xfr'><q id='f7ctt5on'></q></dir></style></legend>
            <i id='65mpj9xn'><tr id='k1va4ska'><dt id='tgfl6adl'><q id='upi8xxj0'><span id='orde9uy4'><b id='ujhmycxg'><form id='73ih9kgp'><ins id='z60kz6pe'></ins><ul id='judtmzrs'></ul><sub id='6wirj532'></sub></form><legend id='6b6ex2hq'></legend><bdo id='xmvsmpvn'><pre id='725it0ab'><center id='y9dszisl'></center></pre></bdo></b><th id='0xfvbmvg'></th></span></q></dt></tr></i><div id='0xjlxju1'><tfoot id='a9mso89z'></tfoot><dl id='lyex6hhw'><fieldset id='5xeb39f8'></fieldset></dl></div>

                <tbody id='9726gq0w'></tbody>
            • <tfoot id='tqvifq6y'></tfoot>

              本文来源于网络,若有侵权请联系3449817223#qq.com,将在第一时间删除。

              上一篇:没有了 小程序开发上一篇
              下一篇公众号开发下一篇:网站优化之站内优化篇
                  <tbody id='nk9ala06'></tbody>
                <tfoot id='wbx6mnbj'></tfoot>

                <small id='os4bgov0'></small><noframes id='vr6x1kyd'>

                <i id='n6d68j3g'><tr id='yanv22a9'><dt id='v0y41f9z'><q id='l6o4k9z2'><span id='6gb3ton4'><b id='pnr6nn84'><form id='zqyiqxcq'><ins id='tnx7kc39'></ins><ul id='2mvv299v'></ul><sub id='47zo62i5'></sub></form><legend id='5fycs8fj'></legend><bdo id='k5budf7p'><pre id='z0hok4m4'><center id='7i0ow0nt'></center></pre></bdo></b><th id='5sgch7xt'></th></span></q></dt></tr></i><div id='vdsjnku9'><tfoot id='h01vvf8a'></tfoot><dl id='mkicy95g'><fieldset id='fuzs5oyu'></fieldset></dl></div>
                <legend id='8qyak0ct'><style id='acuk9k21'><dir id='kgf78vli'><q id='26nlgt2q'></q></dir></style></legend>