• IT培训活动
  • IT培训就业
  • IT培训专区
  • IT培训就业
  • IT培训机构
  • IT培训学校
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

您当前位置:首页 > 睿峰资讯 > 睿峰动态 > Web前端性能优化|成都web前端培训

Web前端性能优化|成都web前端培训

时间:2017-08-17 15:54:50   来源:未知  作者:睿峰

处理静态资源对网站的性能影响,主要考虑两点:
减少请求次数和缩减内容的大小。

其中减少(HTTP)请求的次数更关键,特别是对移动端来说(通过蜂窝网络发起一次HTTP 请求的开销要高很多)。有两种办法可以减少请求的次数:合并资源和浏览器缓存。
 
合并资源主要是架构和前端问题:要尽可能多地将小图片合并到一个子画面中。然后用CSS 设定偏移量和尺寸只显示图片中需要展示的部分。推荐用SpritePad(http://wearekiss.com/spritepad)的免费服务创建子画面。它让子画面的生成容易得不可思议,并且还会生成CSS。
 
缩减静态资源的大小来提升性能。
无损的(不丢失任何数据就可以实现资源大小的缩减)
无损技术包括JavaScript 和CSS 的缩小化,以及PNG 图片的优化。
有损的(通过降低静态资源的品质实现资源大小的缩减)。

一、Web前端性能优化以下三方面是必须。
1、CSS优化
2、图片优化
3、JavaScript优化

二、Web前端性能优化的自动化构建工具
1、Grunt
2、Gulp

三、CSS优化规则
CSS优化规则有如下几条:
1、将 CSS样式放置在HTML文档顶部
2、避免某种 CSS 表达式
3、精简 CSS文件
4、删除所有不必要的空白(空行,缩进格式)、注释来减小CSS文件的大小
5、使用 <link> 而不是@import

1、Grunt实现
module.exports = function(grunt) {

    // 加载插件grunt.loadNpmTasks
    [
        ,'grunt-contrib-concat'
        ,'grunt-contrib-cssmin'
    ].forEach(function (task) {
        grunt.loadNpmTasks(task);
    });
// 配置
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        //合并 CSS 文件
        concat: {
            css: {
                src: ['public/stylesheets/*.css','less/main.css'],
                /* 根据目录下文件情况配置 */
                dest: 'public/stylesheets/dist/<%= pkg.name %>.css'
            },

            scripts: {
                src: ['public/javascripts/*.js'],
                /* 根据目录下文件情况配置 */
                dest: 'public/javascripts/dist/<%= pkg.name %>.js'
            }
        },

        //压缩Style CSS文件为 .min.css
        cssmin: {
            options: {
                // 移除 CSS 文件中的所有注释
                keepSpecialComments: 0
            },
            minify: {
                expand: true,
                cwd: 'public/vendor/bootstrap/dist/css/',
                src: ['bootstrap.css'],
                dest: 'public/vendor/bootstrap/dist/css/',
                ext: '.min.css'
            }
        },

    });

};

(未完待续)

以上文档由睿峰web前端培训杨老师提供,转载注明出处。



上一篇:零基础的大专毕业学UI设计难吗?成都UI培训  
下一篇:睿峰Java培训机构|深度分析 java 抽象类与接口
地址:环球中心S2-6栋-16楼-12号、13号、14号。(洲际酒店大堂右边电梯上16楼)

课程免费咨询热线:15828071040