页面重构

3 月，跳不动了？>>> 上周花了 3 天的时间和老大一起重构了一下小程序的样式开发，虽然说在开发的过程中遇到了一些问题，但是最终减少了不少样式代码，同时功能上也更加强大。进一步来说，如果在后面我们的小程序用户想要自己定制化主题，也可以很快的实现。 全局样式开发 之前的小程序开发中，我们全方面使用了 Component 构造小程序组件以及页面(页面也可以使用 Component 构造器来编写)。当然一方面是因为小程序 Component 的开发体验非常好，拥有类似于 Vue mixin, watch 的 behaviors 和 observers ，比 Page 构造器强大了很多。另一方面，对于业务较重的小程序来说, Component 也有性能优势。可以参照 滴滴开源小程序框架Mpx 中的 Page与Component setData性能对照 。 在开发过程中，有很多样式是可以复用的。如果在之前开发中经常使用 Bootstrap 之类的 ui 库，那么你就会习惯使用这种库的 utilities 类。但是默认情况下，自定义组件的样式只受到自定义组件 wxss 的影响。不会受到全局样式 app.wxss 的影响。所以我们只能通过增加 @import 语法来辅助各个组件进行开发。 @import "xxx.css"; 如果你使用 CSS 预处理器来辅助小程序开发的话，可能就需要通过

介绍 最近开始刷一些书和题,此系列是介绍在读 Web最佳实践 的一些收获和体会。 web前端发展现状 存在问题： 代码组织混乱 代码格式的问题突出 页面布局随意 网站整体性能差，没有意识到应用诸如缓存，动态加载，脚本压缩，图片压缩等提高性能技术 推荐做法： 压缩样式表和脚本文件 减少HTTP请求次数 简洁和符合W3C标准的HTML和CSS代码能减少浏览器解析的时间，加快渲染过程 页面请求数量越少，相对页面的加载速度更快 在JS代码中选择性能更好的实现方案，如延迟加载，动态加载等技术; 延迟加载 <script type=”text/javascript” src=”" id=”my”></script> <script type=”text/javascript”> setTimeout(“document.getElementById(‘my').src='include/php100.php'; “,3000);//延时3秒 </script> 最后加载 引入外部js脚本文件时，如果放入html的head中,则页面加载前该js脚本就会被加载入页面，而放入body中，则会按照页面从上倒下的加载顺序来运行javascript的代码，所以可以把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度 动态加载 <scrīpt src='' id="s1"><

项目现状 项目为单页web应用，只针对chrome浏览器，无开发文档。由于是追求进度的项目，开发约定极少，除了jquery、LAB.js、bootstrap以及一些UI组件外，没有使用其他开源组件。 项目简单封装了 ajax请求 , form表单信息获取 , 缓存 , 获取和渲染模板函数 以及一些UI组件，ajax请求没有按照restful api进行封装。 现在项目开发中所遇到的问题： 代码命名不规范，例如 action , do_action 代码结构不清晰，没有按照功能或mvc拆分成独立的文件，只能依靠dom去查找具体的业务代码在哪里 模板写的有问题，复用模板使用id来做dom索引，或混入javascript业务逻辑，也有整个模板只包含一行代码 工具类封装与引用不规范，主要是没有注释，没有规范的例子可做参照,导致出现错误的使用工具类 业务逻辑的流转依靠dom操作，例如，在实现数据联动的时候，往往需要手动点击刷新按钮或者$(...).click()。 模板渲染封装太薄，导致不同模块的模板渲染方法各异，且会渲染模板中的javascript代码 无法对代码进行代码测试，只能依靠人工测试确保代码质量 css文件过大，基本上所有的css都集中在一个css文件下 页面跳转策略是隐藏老页面，显示新页面。 重构项目方案 代码书写规范 css规范 : http://www.iteye.com

在了解什么是重构和回流之前，我们应该先看看浏览器是怎么渲染的？ 浏览器的渲染过程： 1.处理HTML脚本，生成DOM树（DOM树里包含所有的HTML标签，包括display:none和js动态添加的元素等） 2.处理CSS脚本，生成CSSOM树（DOM和CSSOM是独立的数据结构） 3.将DOM树和CSSOM树合并为渲染树,render树中不包含定位和几何信息。虽然，render树与dom树类似但还是有区别的。render树中不包含隐藏的节点 (比如display:none的节点，还有head节点)，因为这些节点不会用于呈现，而且不会影响呈现的，所以就不会包含到 render tree中。注意 visibility:hidden隐藏的元素还是会包含到 render tree中的，因为visibility:hidden 会影响布局(layout)，会占有空间。 4.对render树中的内容进行布局，计算每个节点的几何外观 5.将渲染树中的每个节点绘制到屏幕中. 什么是重构和回流 重构 ：当元素的某些属性发生变化，这些属性又只影响元素的外观和风格，而不改变元素的布局、大小比如颜色、背景。此时触发的浏览器行为称作重构。 回流 ：当元素的布局、大小规模和显示方式发生改变时，触发的浏览器行为叫回流。而且，每个页面都会在第一次加载时触发回流。 注意：回流必将引起重绘，而重绘不一定伴随回流。同时