前端框架

这段时间对项目做了一次整体的优化，全站有了20%左右的提升（本来载入速度已经1.2S左右了，优化度很低），算一算已经做了四轮的全站性能优化了，回顾几次的优化手段，基本上几个字就能说清楚： 传输层面：减少请求数，降低请求量 执行层面：减少重绘&回流 传输层面的从来都是优化的核心点，而这个层面的优化要对浏览器有一个基本的认识，比如： ① 网页自上而下的解析渲染，边解析边渲染，页面内CSS文件会阻塞渲染，异步CSS文件会导致回流 ② 浏览器在document下载结束会检测静态资源，新开线程下载（有并发上限），在带宽限制的条件下，无序并发会导致主资源速度下降，从而影响首屏渲染 ③ 浏览器缓存可用时会使用缓存资源，这个时候可以避免请求体的传输，对性能有极大提高 衡量性能的重要指标为首屏载入速度（指页面可以看见，不一定可交互），影响首屏的最大因素为请求，所以请求是页面真正的杀手，一般来说我们会做这些优化： 减少请求数 ① 合并样式、脚本文件 ② 合并背景图片 ③ CSS3图标、Icon Font 降低请求量 ① 开启GZip ② 优化静态资源，jQuery->Zepto、阉割IScroll、去除冗余代码 ③ 图片无损压缩 ④ 图片延迟加载 ⑤ 减少Cookie携带 很多时候，我们也会采用类似“时间换空间、空间换时间”的做法，比如： ① 缓存为王，对更新较缓慢的资源&接口做缓存（浏览器缓存

效果图 对该页面的总结： 1、前端框架layui layui官网: https://www.layui.com/ ,下载之后，简单配置就可使用 2、layui模块引用与使用的方式 <script> layui.use(['form'], function(){ var form = layui.form; //监听提交 form.on('submit(formDemo)', function(data){ layer.msg(JSON.stringify(data.field)); return false; }); }); </script> 3图标的使用，图标样式的类选择器是layui-icon layui-icon-username,如果想要自定义所引用的图标样式，在其后加上自己的样式类选择器就好 <!-- 账号--> <div class="layui-form-item"> <i class="layui-icon layui-icon-username myIcon" style="top: 80px;"></i> <input class="layui-input myInput" type="text" name="title" required lay-verify="required" placeholder="账号" autocomplete="off"> <

前言 最近很久没有写文章，不忙也忙的生活节奏，博客相关的东西也没法做成文章来详细讲，最多就是SEO相关，倒也没多少人会真正用到，所以过了一段时间，就目前开发完的学院实训系统web网页项目做个回顾，整个团队就我一个前端开发，所以我负责了需求分析、原型设计、UI/UE设计等工作。团队其他成员和老师都是负责java web后台。个人从用框架开发浅谈对框架开发的效率和效果的意义。 前端页面开发框架 常见web页面框架 web页面开发的框架，可能常用并且熟悉也就那几个. 页面布局框架： Bootstrap 、 Materialize JS框架： Jquery 一眼看过去似乎有点少哦，其实开发web网站只要需求不是特别多的，基本就够了，有些甚至JS都用的少。 开发中 前台页面开发最简单，因为需求的不多，其实如果复杂了，也就会多用到H5和CSS3的一些东西外加JS和Ajax。 框架浅谈 Bootstrap 这个框架确实厉害，我也不多介绍了。就跟它的宣传语一样。 Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。所有开发者、所有应用场景而设计。 Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。 确实目前很多网页都用了这个框架，确实为开发省力不少

第一阶段： HTML+CSS: HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、 JavaScript基础： Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。 JS基本特效： 常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。 JS高级特征： 正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础、 JQuery：基础使用 悬着器、DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件基本使用。 第二阶段：HTML5和移动Web开发 HTML5： HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、Web Socket、Canvas. CSS3: CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作。 Bootstrap: 响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS。 移动Web开发： 跨终端WEB和主流设备简介、视口、流式布局、弹性盒子、rem

重复优化的思考 这段时间对项目做了一次整体的优化，全站有了20%左右的提升（本来载入速度已经1.2S左右了，优化度很低），算一算已经做了四轮的全站性能优化了，回顾几次的优化手段，基本上几个字就能说清楚： 传输层面：减少请求数，降低请求量执行层面：减少重绘&回流 传输层面的从来都是优化的核心点，而这个层面的优化要对浏览器有一个基本的认识，比如： ① 网页自上而下的解析渲染，边解析边渲染，页面内CSS文件会阻塞渲染，异步CSS文件会导致回流 ② 浏览器在document下载结束会检测静态资源，新开线程下载（有并发上限），在带宽限制的条件下，无序并发会导致主资源速度下降，从而影响首屏渲染 ③ 浏览器缓存可用时会使用缓存资源，这个时候可以避免请求体的传输，对性能有极大提高 衡量性能的重要指标为首屏载入速度（指页面可以看见，不一定可交互），影响首屏的最大因素为请求，所以请求是页面真正的杀手，一般来说我们会做这些优化： 减少请求数 ① 合并样式、脚本文件 ② 合并背景图片 ③ CSS3图标、Icon Font 降低请求量 ① 开启GZip ② 优化静态资源，jQuery->Zepto、阉割IScroll、去除冗余代码 ③ 图片无损压缩 ④ 图片延迟加载 ⑤ 减少Cookie携带 很多时候，我们也会采用类似“时间换空间、空间换时间”的做法，比如： ① 缓存为王，对更新较缓慢的资源&接口做缓存

第一阶段： HTML+CSS: HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、 JavaScript基础： Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。 JS基本特效： 常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。 JS高级特征： 正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础、 JQuery：基础使用 悬着器、DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件基本使用。 第二阶段：HTML5和移动Web开发 HTML5： HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、Web Socket、Canvas. CSS3: CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作。 Bootstrap: 响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS。 移动Web开发： 跨终端WEB和主流设备简介、视口、流式布局、弹性盒子、rem

之前把大学做的项目给翻新了一遍，放弃使用了jsp，采用Ajax对前端页面进行渲染，大概的技术栈是：springboot+Mysql+Redis+Thymeleaf+Ajax,当然前端框架JQuery和Bootstrap也是要的了。后续会逐渐一点点把之前做的当经验写成博客分享出来啦，先暂时展示一下博客页面效果。(Ps：不知道为啥只能上传两张，其他上传失败了，嗯，那暂时就先这样吧，改天另起文再附图发了) 来源： oschina 链接： https://my.oschina.net/u/4247262/blog/3191996

　　　　　　springmvc这个框架真的非常简单，感觉比struts2还更简单，好好沉淀下来学习~ 　　　　　　　　　　　　　　　　　　　　　　--WH 一、什么是springmvc？ 　　　　　　我们知道三层架构的思想，并且如果你知道ssh的话，就会更加透彻的理解这个思想，struts2在web层，spring在中间控制，hibernate在dao层与数据库打交道，而前面刚写的mybatis跟hibernate一样，与数据库打交道在dao层的另一个框架，而今天所要讲解的springmvc是在web层的另一个框架。 　　　　　　springmvc全名是spring web mvc，springmvc是spring的一个模块，并且看名字即可知道，springmvc是一个基于mvc设计模式的前端web框架。 　　　　　　mvc：m(model模型)、v(view视图)、c(control控制) 　　　　　　mvc的运用概念图 　　　　　　　　　　 二、springmvc的入门程序 　　　　　　通过这个来快速了解springmvc大概的开发流程，其实通过上面的mvc分析图，差不多就知道了如何开发了。重点就是三步。 　　　　　　　　1、在web.xml中配置一个serlvet，用来控制， 　　　　　　　　2、编写一个handler(controller)类，用来做业务处理。 　　　　　　

Serverless 是当下炙手可热的技术，被认为是云计算发展的未来方向，拥有免运维、降低开发成本、按需自动扩展等诸多优点。尤其是在前端研发领域，使用 Node 开发云函数，可以让前端工程师更加专注于业务逻辑，实现全栈工程师的角色转变。但现有的开发模式、工具、脚手架已经标准化、流程化，存量业务正在线上稳定运行，如何将 Serverless 融入到现有开发模式和工具中？如何将 Serverless 和当前的业务进行结合落地？本文将尝试给出解答。 本文内容整理自腾讯 Serverless 技术专家王俊杰在 GMTC 2019 深圳站的演讲。 前端与 Serverless 的不解之缘 目前很多前端同学都在学习 Serverless，很多文章和教程对 Serverless 都有不同方式的解读，今天我们首先来回顾三个问题： 究竟什么是 Serverless？ Serverless 是否等于 FaaS 加 BaaS？ 我们所说的 FaaS 是什么？ 加州大学伯克利分校 2019 年 3 月份发表过一篇论文，名为《Cloud Programming Simplified: A Berkeley View on Serverless Computing》，文中对“Serverless 是什么”进行了一些描述： Put simply,serverless computing = FaaS +

　　前文讲到了CSI技术，这就说明网站静态化技术的讲述已经推进到了浏览器端了即真正到了web前端的范畴了，而时下web前端技术的前沿之一就是前后端分离技术了，那么在这里网站静态化技术和前后端分离技术产生了交集，所以今天我将讨论下前后端分离技术，前后端分离技术讨论完后，下一篇文章我将会以网站静态化技术的角度回过头来重新审视下前后端分离技术，希望通过这种审视来加深我们对两套技术的理解。 　　前后端分离技术我个人认为是web前端被专业化以后的必由之路，而nodejs的出现是前后端分离技术的一个强兴的催化剂，原因是nodejs的出现削平了前端技术和服务端技术之间的鸿沟，使得前后端两套不同技术体系进行真正意义的解耦提供了无限的可能性。但是如果我们把nodejs技术的使用认为就是实现了前后端分离，这种理解又实在太肤浅了，下面我将讲讲我研究过的前后端分离技术方案，以及这些技术方案隐藏在背后思考，希望这些思考能给大家以一个新的思路来理解前后端分离技术。 　　我们要深刻理解前后端分离技术有一个重要的前提，那就是要把前后端分离技术认为是传统的web 应用里的MVC 设计模式的进一步演进 。那么我们首先来看看MVC的定义，下面的内容摘录于维基百科的解释，具体如下： MVC模式（Model-View-Controller）是软件工程中的一种软件架构模式，把软件系统分为三个基本部分：模型（Model）、视图