【PC网站前端架构探讨系列】结合公司网站首页,谈前端模块化开发与网站性能优化实践
说在前面
上午给大家分享的个人认为比较全,比较官方,比较清晰的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网站前端架构探讨系列】结合公司网站首页,谈前端模块化开发与网站性能优化实践的更多相关文章
- 【PC网站前端架构探讨系列】关于中小型PC网站前端架构方案的讨论与实践
目 录 1.遇到的问题 2.目标 3.探讨 4.架构设想 5.流程 6.初步实现 7.存在问题 8.最后 遇到的问题 我在这个系列上篇文章 已经讲解并开始逐步应用模块化思想,不知大家还记不记得,题 ...
- Go RPC 框架 KiteX 性能优化实践 原创 基础架构团队 字节跳动技术团队 2021-01-18
Go RPC 框架 KiteX 性能优化实践 原创 基础架构团队 字节跳动技术团队 2021-01-18
- web富客户端应用下,前端架构、系列(二)。
序 我们在上面的文章中已经建立起来一个比较简单的 前端架构 虽然这个看上去很简陋. 不过毕竟也是思想的结晶. 从这一篇文章开始,我将陆续完善这一个前端架构.. 重新构思 上一篇我们把前端架构分为3个模 ...
- 前端监控系列4 | SDK 体积与性能优化实践
背景 字节各类业务拥有众多用户群,作为字节前端性能监控 SDK,自身若存在性能问题,则会影响到数以亿计的真实用户的体验.所以此类 SDK 自身的性能在设计之初,就必须达到一个非常极致的水准. 与此同时 ...
- 前端性能优化实践-gzip
一名优秀的前端工程师必备技能之一就是要会性能监控,并且能相应的进行性能优化.最近,有需求将项目做一些优化,提升用户的体验.看了一下项目并没有开启gzip,于是着手实现gzip压缩,下面就是具体的实践过 ...
- 架构相关:组件化/模块化/工程化/性能优化/开发规范与团队协作/组件间调用与通信(flex/redux)/调试与测试
https://github.com/fouber/blog http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html htt ...
- 王下邀月熊_Chevalier的前端每周清单系列文章索引
感谢 王下邀月熊_Chevalier 分享的前端每周清单,为方便大家阅读,特整理一份索引. 王下邀月熊大大也于 2018 年 3 月 31 日整理了自己的前端每周清单系列,并以年/月为单位进行分类,具 ...
- Asp.net Mvc模块化开发系列(目录)
模块化开发是非常重要的,模块化开发是个系统性问题,为此我觉得有必须要写一个系列的文章才能基本说的清楚 那又为什么要写一个目录呢? 其一.是对我昨天承诺写一个系列新的文章的回应 其二.是先写出一个大纲, ...
- 阿里巴巴 web前端性能优化进阶路
Web前端性能优化WPO,相信大多数前端同学都不会陌生,在各自所负责的站点页面中,也都会或多或少的有过一定的技术实践.可以说,这个领域并不缺乏成熟技术理论和技术牛人:例如Yahoo的web站点性能优化 ...
随机推荐
- ReactiveCocoa源码拆分解析(六)
(整个关于ReactiveCocoa的代码工程可以在https://github.com/qianhongqiang/QHQReactive下载) RAC为了实现优雅的信号绑定,可谓使尽浑身解数,不仅 ...
- 【Android学习】android布局中几个距离单位的区别:px、dp、sp
一.px 像素,我们经常说的400*800这种的就是像素,这个比较好理解. 二.dp 要理解dp,首先要先引入dpi这个概念,dpi全称是dots per inch,对角线每英寸的像素点的个数,所以, ...
- word201612012
I/O (input/output) port / 输入/输出端口 IAS, Internet Authentication Service / Internet 验证服务 ICMP, Interne ...
- 无法识别的属性“targetFramework
出现这个错误的原因是NET Framework 版本版本号不对应,iis和网站使用的一致版本就可以了.
- js中选定元素slice()
选定元素slice() slice() 方法可从已有的数组中返回选定的元素. 语法 arrayObject.slice(start,end) 参数说明: 1.返回一个新的数组,包含从 start 到 ...
- java面试题及答案(转载)
JAVA相关基础知识1.面向对象的特征有哪些方面 1.抽象:抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方面.抽象并不打算了解全部问题,而只是选择其中的一部分,暂时 ...
- 根据字符长度动态确定UIlabel宽高
iOS7中用以下方法 - (CGSize)sizeWithAttributes:(NSDictionary *)attrs; 替代过时的iOS6中的- (CGSize)sizeWithFont:(UI ...
- web前端学习部落22群 明白何谓Margin Collapse
明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较 ...
- Ubuntu 配置有线网 IP
方法1: 最直接的办法,就是在右上端的网络那里点设置,然后add,选以太网,然后IPV4里,手动设置 -- add IP -- 填入IP地址.网关.子网掩码,OK. 方法2,3见网上教程: Ubunt ...
- centos6.6 安装cacti监控服务器
整理一份cacti的安装步骤.留作笔记和以后参考用. 环境: centos 6.6 -x64 cacti-0.8.8b-cn.tar.gz mysql yum安装即可 yum服务使用centos自带的 ...