说在前面

上午给大家分享的个人认为比较全,比较官方,比较清晰的grunt使用教程,被挪出首页了,不过没关系,毕竟不是原创,大家想看,我现在贴出地址:

http://www.cnblogs.com/sybboy/p/4877055.html

下面可是我自己的东西,算是这段时间搞前端架构的总结吧:

目录

1.遇到的问题

2.目标

3.如何解决

4.结果分析

5.尚未解决

遇到的问题

问题1----脚本混乱,没有层次和固定代码位置

问题2----脚本和css请求较多,请求未压缩,文件未压缩合并

问题3----代码目录混乱,引用不清晰

问题4----脚本和css没有添加版本号管理

目标

1.整理页面的代码,必要的代码模块化

2.文件合并压缩,外部引用的脚本要加密混淆

3. 网站目录下,所有脚本 样式 图片统一存放

4. 添加版本号

如何解决

问题1----脚本混乱,没有层次和固定代码位置

使用seajs 将代码模块化,用define关键字定义模块,用require调用外部脚本类库及插件,模块内部使用json形式将文件中的代码按业务以及功能分类梳理

使用说明:

1.页面首先引用seajs库

2.按照固定格式 ,封装代码模块

    define([“jquery”,‘../index-plugin.min’],function(require){
//方括号中的为依赖项 var $=require(‘jquery’); //require 调用依赖项 require(‘../index-plugin.min’)($); //插件调用方式 var MOD = { 方法A:function(参数){},方法B…..}; return MOD; });

3.页面配置seajs以及引用模块代码

现全站配置统一放于config.js

具体配置说明:http://liuxiaofan.com/2013/12/11/1547.html

引用:

seajs.use([‘jquery’,‘business/index.min’],function($,I){  //1.这里是方法内容  2.方括号中的为引用的类库以及模块文件  3. 参数中分别对应相应的引用             } )

问题2----脚本和css请求较多,请求未压缩,文件未压缩合并

页面的脚本和样式处理统一使用的grunt来处理,使用很简单:

安装过程内容比较多,具体看下我的技术博客:

http://www.cnblogs.com/sybboy/p/4877055.html

注意使用grunt,个人感觉配置很重要,命令就一个grunt,这是我用到的配置:

   module.exports = function(grunt) {

     // 配置

      grunt.initConfig({

         pkg : grunt.file.readJSON('package.json'),

         // uglify : {

             // options : {

                 // banner : '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'

             // },

             // build : {

                 // src : 'src/js/index.js',

                 // dest : 'dest/js/index.min.js'

             // }

         // }

   // concat : {

             // domop : {

                 // src: ['src/index-plugin.min.js','wow.min.js'],

                 // dest: 'dest/index-plugin2.min.js'

             // }

         // }

     // cssmin: {

       // add_banner: {

   // // options: {

     // // banner: '/* index css file by peng 20151009*/'

   // // },

   // files: {

     // 'dest/css/index.min.css': ['src/css/**/*.css']    // 合并并压缩 path/to 目录下(包含子目录)的所有css文件

   // }

      // }

     // combine: {

   // files: {

     // 'path/to/output.css': ['path/to/input_one.css', 'path/to/input_two.css']

   // }

     // },

     // minify: {

   // expand: true,        // 启用下面的选项

   // cwd: 'src/css/',    // 指定待压缩的文件路径

   // src: ['*.css', '!*.min.css'],    // 匹配相对于cwd目录下的所有css文件(排除.min.css文件)

   // dest: 'dest/css/',    // 生成的压缩文件存放的路径

   // ext: '.min.css'        // 生成的文件都使用.min.css替换原有扩展名,生成文件存放于dest指定的目录中

     // }

   //}

   // uncss: {

     // dist: {

   // // options: {

     // // ignore: ['#added_at_runtime', '.created_by_jQuery']

   // // },

   // files: {

     // 'src/css/index_base.css': ['src/html/index.html']

   // }

     // }

     // },

     imagemin: {

             /* 压缩图片大小 */

             dist: {

                 options: {

                     optimizationLevel: 3 //定义 PNG 图片优化水平

                 },

                 files: [

                         {

   expand: true,

   cwd: 'src/img/activity',

   src: ['**/*.{png,jpg,gif}'], // 优化 img 目录下所有 png/jpg/jpeg 图片

   dest: 'dest/img/activity' // 优化后的图片保存位置,覆盖旧图片,并且不作提示

                        }

                     ]

                 }

             }

     });

     // 载入concat和uglify插件,分别对于合并和压缩

     //grunt.loadNpmTasks('grunt-contrib-concat');

     //grunt.loadNpmTasks('grunt-contrib-uglify');

   //grunt.loadNpmTasks('grunt-contrib-cssmin');

   //grunt.loadNpmTasks('grunt-uncss');

   grunt.loadNpmTasks('grunt-contrib-imagemin');

     // 注册任务

     grunt.registerTask('default', ['imagemin']);

 };

结果分析

之前:

首页样式与脚本的请求

结合yslow,可以看出首页总共有74个请求,总共1882kb,其中脚本11个请求,180kb左右,加载脚本需要2.68s;样式8个请求,占324kb,加载样式所需35ms,大部分请求在图片

之后:

首页样式与脚本的请求

结合yslow,可以看出优化后的首页总共有63个请求,总共1631kb,其中脚本9个请求,150kb左右,加载脚本需要2.2s;样式2个请求,占200kb,加载样式所需8ms,大部分请求在图片

结论:页面请求减少11个,请求总量减少250多kb,请求时间减少0.5s左右

尚未解决

很明显通过上次优化,请求量以及时间还是个问题,效果不太明显,下面是使用page speed分析的结果:

  问题一:

  网站的请求没有进行gzip压缩,预计压缩后请求尺寸至少小一半

问题二:

  图片过大,可以适当压缩

  问题三:

  页面的HTML代码压缩

【PC网站前端架构探讨系列】结合公司网站首页,谈前端模块化开发与网站性能优化实践的更多相关文章

  1. 【PC网站前端架构探讨系列】关于中小型PC网站前端架构方案的讨论与实践

    目   录 1.遇到的问题 2.目标 3.探讨 4.架构设想 5.流程 6.初步实现 7.存在问题 8.最后 遇到的问题 我在这个系列上篇文章 已经讲解并开始逐步应用模块化思想,不知大家还记不记得,题 ...

  2. Go RPC 框架 KiteX 性能优化实践 原创 基础架构团队 字节跳动技术团队 2021-01-18

    Go RPC 框架 KiteX 性能优化实践 原创 基础架构团队 字节跳动技术团队 2021-01-18

  3. web富客户端应用下,前端架构、系列(二)。

    序 我们在上面的文章中已经建立起来一个比较简单的 前端架构 虽然这个看上去很简陋. 不过毕竟也是思想的结晶. 从这一篇文章开始,我将陆续完善这一个前端架构.. 重新构思 上一篇我们把前端架构分为3个模 ...

  4. 前端监控系列4 | SDK 体积与性能优化实践

    背景 字节各类业务拥有众多用户群,作为字节前端性能监控 SDK,自身若存在性能问题,则会影响到数以亿计的真实用户的体验.所以此类 SDK 自身的性能在设计之初,就必须达到一个非常极致的水准. 与此同时 ...

  5. 前端性能优化实践-gzip

    一名优秀的前端工程师必备技能之一就是要会性能监控,并且能相应的进行性能优化.最近,有需求将项目做一些优化,提升用户的体验.看了一下项目并没有开启gzip,于是着手实现gzip压缩,下面就是具体的实践过 ...

  6. 架构相关:组件化/模块化/工程化/性能优化/开发规范与团队协作/组件间调用与通信(flex/redux)/调试与测试

    https://github.com/fouber/blog http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html htt ...

  7. 王下邀月熊_Chevalier的前端每周清单系列文章索引

    感谢 王下邀月熊_Chevalier 分享的前端每周清单,为方便大家阅读,特整理一份索引. 王下邀月熊大大也于 2018 年 3 月 31 日整理了自己的前端每周清单系列,并以年/月为单位进行分类,具 ...

  8. Asp.net Mvc模块化开发系列(目录)

    模块化开发是非常重要的,模块化开发是个系统性问题,为此我觉得有必须要写一个系列的文章才能基本说的清楚 那又为什么要写一个目录呢? 其一.是对我昨天承诺写一个系列新的文章的回应 其二.是先写出一个大纲, ...

  9. 阿里巴巴 web前端性能优化进阶路

    Web前端性能优化WPO,相信大多数前端同学都不会陌生,在各自所负责的站点页面中,也都会或多或少的有过一定的技术实践.可以说,这个领域并不缺乏成熟技术理论和技术牛人:例如Yahoo的web站点性能优化 ...

随机推荐

  1. ReactiveCocoa源码拆分解析(六)

    (整个关于ReactiveCocoa的代码工程可以在https://github.com/qianhongqiang/QHQReactive下载) RAC为了实现优雅的信号绑定,可谓使尽浑身解数,不仅 ...

  2. 【Android学习】android布局中几个距离单位的区别:px、dp、sp

    一.px 像素,我们经常说的400*800这种的就是像素,这个比较好理解. 二.dp 要理解dp,首先要先引入dpi这个概念,dpi全称是dots per inch,对角线每英寸的像素点的个数,所以, ...

  3. word201612012

    I/O (input/output) port / 输入/输出端口 IAS, Internet Authentication Service / Internet 验证服务 ICMP, Interne ...

  4. 无法识别的属性“targetFramework

    出现这个错误的原因是NET Framework 版本版本号不对应,iis和网站使用的一致版本就可以了.

  5. js中选定元素slice()

    选定元素slice() slice() 方法可从已有的数组中返回选定的元素. 语法 arrayObject.slice(start,end) 参数说明: 1.返回一个新的数组,包含从 start 到 ...

  6. java面试题及答案(转载)

    JAVA相关基础知识1.面向对象的特征有哪些方面 1.抽象:抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方面.抽象并不打算了解全部问题,而只是选择其中的一部分,暂时 ...

  7. 根据字符长度动态确定UIlabel宽高

    iOS7中用以下方法 - (CGSize)sizeWithAttributes:(NSDictionary *)attrs; 替代过时的iOS6中的- (CGSize)sizeWithFont:(UI ...

  8. web前端学习部落22群 明白何谓Margin Collapse

    明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较 ...

  9. Ubuntu 配置有线网 IP

    方法1: 最直接的办法,就是在右上端的网络那里点设置,然后add,选以太网,然后IPV4里,手动设置 -- add IP -- 填入IP地址.网关.子网掩码,OK. 方法2,3见网上教程: Ubunt ...

  10. centos6.6 安装cacti监控服务器

    整理一份cacti的安装步骤.留作笔记和以后参考用. 环境: centos 6.6 -x64 cacti-0.8.8b-cn.tar.gz mysql yum安装即可 yum服务使用centos自带的 ...