影响用户访问的最大部分是前端的页面。网站的划分一般为二：前端和后台。我们可以理解成后台是用来实现网站的功能的，比如：实现用户注册，用户能够为文章发表评论等等。而前端呢？其实应该是属于功能的表现。
而我们建设网站的目的是什么呢？不就是为了让目标人群来访问吗？所以我们可以理解成前端才是真正和用户接触的。
除了后台需要在性能上做优化外，其实前端的页面更需要在性能优化上下功夫，只有这样才能给我们的用户带来更好的用户体验。不仅仅如此，如果前端优化得好，他不仅可以为企业节约成本，他还能给用户带来更多的用户，因为增强的用户体验。说了这么多，那么我们应该如何对我们前端的页面进行性能优化呢？
前端的页面主要包括xhtml,css,js。其实xhtml就是现实中所谈到的内容，页面的内容：文字，图片，flash,视频等。
而前端开发工作者可以控制的是什么呢？那就是xhtml，css，js的代码及相应的修饰（背景）图片。下面我就根据我自己的经验来说说：
一、提倡前端开发工程师在书写xhtml的时候做到结构语义化。
结构中主要包括了head和body两个部分，但是我们经常说的是结构语义化主要是body中的标签，但是我在这里还是简单的说一下head，head中其实包括了一些对于我们seo很有用的一些东西，比如title,Description,Keywords,这些东西在蜘蛛抓取的时候都是有帮助的，当然，还有其他的一些，我在此就不一一说明了，比如设置缓存等一些其他的信息。
那么body中的话，包括的标签就很多了，我觉得作为一个合格的前端开发人员你应该去熟悉他们，比如div,span,h,ul,ol,dl,p等等这类的标签的使用。应该非常合理，还有就是注意h标签的断层，及h1标签的使用，这些都是非常重要的。
同时在我们的结构中不要出现style和onclick这样的内联的样式和事件。希望大家能够注意结构与表现、行为的分离。
（PS：标签语义化的好处：1.有利于搜索引擎；2.结构清晰的HTML在团队合作中的作用，就不必说了吧；3.有利于盲人屏幕阅读器。至于如何做到标签语义化，就看个人的理解了，这方面我也觉得模糊，跟个人的习惯估计也有一定的关系。）
二、css，js文件数量及大小的优化
那么关于css、js的优化的话，一般情况下建议css和js采用外联式。但是如果你的页面内容比较多，设计师把整个效果做得比较花的话，恐怕css就非常多了，那么这种情况下，你一定要把你的css规划好，尽量的采用缩写，这样可以减少css文件的大小，那么对css做相应的规划也可以减少css的个数，减少http请求数，js同理。
（PS：减少重复性代码，代码重复利用，在这里显得特别重要）
三、背景图片数量及大小的优化

四、内容图片的大小的优化

转自blueidear:http://bbs.blueidea.com/thread-2936073-1-1.html

HBuilder调试夜神安卓模拟器方法

现在开发手机app的IDE很多，今天我就以我个人开发使用的HBuider开发工具讲一下手机app开发调试。HBuider支持真机调试，这个比较简单，只要安装好手机的驱动，把手机和电脑通过数据线连接就可以调试发布了，如果手机连接不上，可以在电脑和手机上都安装360手机助手基本上就可以了。今天重点说一下使用夜神安卓模拟器和HBuider的连接调试方法。
第一步：下载安装夜神模拟器，这个在百度搜索就可以找官网，下载 安装就可以了。
第二步：查找已经安装的夜神模拟的端口，这里说一下夜神模拟器默认端口是62001，但是有些版本可能不是这个端口，怎么查找到底是哪个端口呢？按照如下顺序进行就可以查找到你按装的夜神模拟器端口了。
1.打开夜神模拟器，确保正常启动后，出现安卓桌面。
2.打开夜神模拟器的安装文件夹，找到D:\YS\Nox\bin文件夹打开（D:\YS是夜神模拟器安装的路径根目录），找到【debugReport.bat】文件，双击启动该批处理文件。会显示如下图：
nox adb port:52001
already connected to 127.0.0.1:52001

这里面显示了夜神模拟器的adb port 端口为：52001，并且已经可以正常连接了，出现这个内容证明夜神模拟器已经正常工作了。
或者找到【debug.bat】文件，双击启动该批处理文件,也可以查看端口。
3.找到夜神模拟器的adb 端口后，打开HBuider开发工具，在【工具】-->【选项】打开界面如下图，选择【HBuider】，在最下方的" 第三方Android模拟器端口"中输入52001后【确定】就可以了，通过这些设置就可以在调试中看到夜神模拟器的选项了。
4.如果没有出现夜神模拟器的连接项，那就需要你在电脑和夜神模拟器上安装360手机助手了，安装完360手机助手后，启动360卫士和360手机助手后，在360手机助手中连接手机，找到夜神手机后连接成功就行了。如果找不到也没有关系，也可以正常连接，这时再打开HBuider开发工具，就可以了。

这是我个人的开发测试的过程，在此写出来仅供大家参考！
探索者 QQ：71804584

<script type="text/javascript">  
            mui.plusReady(function(){  
                countdown = localStorage.countdown;  
                if (countdown != "0") {  
                    $("#action_code").html("重新发送 ( " + countdown + " )");  
                    timedown();  
                }  
            });  
            function timedown(obj) {  
                countdown = localStorage.countdown;  
                if (countdown == 0) {  
                    $("#action_code").html("获取验证码");  
                    return clearTimeout();//清除定时，没有的话会导致后面每次减一越来越快  
                } else {  
                    $("#action_code").html("重新发送 ( " + countdown + " )");  
                    countdown = countdown-1;  
                    localStorage.countdown=countdown;  
                }  
                setTimeout(function() {  
                    timedown(obj);  
                }, 1000);//定时每秒减一  
            }  
            //手机验证,判断60s之后再发送验证码  
            function settime(obj) {  
                var phone = document.getElementById("phone");  
                var password = document.getElementById("password");  
                var password_confirm = document.getElementById("password_confirm");  
                var check_phone_number = /^1[3458]\d{9}$/;  
                if (phone.value.length == 0) {  
                    plus.ui.toast("手机号不能为空");  
                    return;  
                }  
                if (phone.value.length != 11) {  
                    plus.ui.toast("请输入有效的手机号！");  
                    return;  
                }  
                if (!phone.value.match(check_phone_number)) {  
                    plus.ui.toast("请输入有效的手机号");  
                    return;  
                } else {  
                    //短信发送  
                    // mui.getJSON("url", { phone: phone }, function(json){  
                    //  if(json.status == "error")  
                    //  {  
                    //      mui.toast(json.msg);  
                    //  }  
                    //  else  
                    //  {  
                    //      localStorage.setItem("msncode",json.code)  
                    //      mui.toast(json.msg);  
                    //  }  
                    // });  
                    localStorage.countdown="60";  
                    timedown(obj);  
                }  
            }  
</script>

依赖

• mui.js
• mui.lazyload.js
• mui.lazyload.img.js

在HBuilder中新建Hello mui示例工程中获取以上文件。
MUI在github上的开源地址最接近原生APP体验的高性能框架
在HBuilder中使用egit插件同步最新的MUI等资源

实现

以Hello mui示例工程中的lazyload-image.html例子为基础，做一些适当的调整即可。

初始化

初始化懒加载控件，设置占位图。注意，这里需要将autoDestroy属性设置为false（不自动销毁），以便后面继续调用。

var lazyLoad = mui('#list').imageLazyload({  
    placeholder: '../images/60x60.gif',  
    autoDestroy: false  
});

加载

新增一个按钮，用于新增图文信息。点击后直接调用原有的createFragment ()方法创建n个元素，并将新的元素添加至懒加载的容器中。

<!--html部分-->  
<button type="button" class="mui-btn mui-btn-blue mui-btn-block" id="get_list">加载图文信息</button>

// JavaScript部分  
var list = document.getElementById('list');  
document.getElementById('get_list').addEventListener('tap', function() {  
    list.appendChild(createFragment(5));  
});

不过，这样仅仅将元素添加至容器内，是不会实现懒加载的。简单测试下，从结果可以看到，图片信息并未加载。

刷新

每次添加新的图文信息，需要刷新懒加载控件。也就是通知懒加载容器，有新的元素进来了，需要加载一下图片信息。
那么，按钮tap事件的回调函数，需要调整为以下代码：

list.appendChild(createFragment(5));  
lazyLoad.refresh(true);

此时，再进行测试，就可以看到所预期的懒加载效果。

附件

修改后的lazyload-image.html，见附件lazyload-image.zip。

方法一

open -a "Google Chrome" --args --disable-web-security --user-data-dir=~/ChromeUserData/

方法二

1.打开 Terminal 进入终端状态，默认的提示符应该是 $；

2.进入 Chrome.app 目录；

$ cd "/Applications/Google Chrome.app/Contents/MacOS/"

3.将原先的启动脚本改个名字；

$ sudo mv "Google Chrome" Google.real

4.使用管道操作创建新的启动脚本，注意其中加入你所需要的启动参数，这里的例子是启用内置的 Flash；

sudo printf '#!/bin/bash\ncd "/Applications/Google Chrome.app/Contents/MacOS"\n"/Applications/Google Chrome.app/Contents/MacOS/Google.real" --disable-web-security "$@"\n' > Google\ Chrome

5.给新的脚本加上运行权限；　

$ sudo chmod u+x "Google Chrome”

MUI的窗口管理是通过预加载解决切页白屏问题，根据这个思路我们不妨把MUI的解决思路再扩展下：
就是我新建一个webview窗口的时候，同时在后台偷偷再新建一个空白的webview界面留待备用，然后每次新建webview都把这个空白的界面ID设置为新建的webview的ID，同时在后台再偷偷建个空白的webview，这样的好处是每次都是直接拿空白的webview界面来渲染新界面，而在后台偷偷创建一个空白的webview，省去了创建webview的时间。

这两天做了App的版本升级功能，发现官方文档下很多同学都在问App资源在线升级后版本号为什么不改变。官方同学也似乎没有回答到点上，这里给大家补充说明一下。

应用升级有三种方式：

• 整包升级：适用于大版本更新，runtime发生变化时（模块、配置、版本等变化）必须使用此更新方法
• 应用资源升级：适用于小版本更新 。runtime不变，前端页面整体压缩包更新
• 应用资源差量升级：适用于小版本更新 。runtime不变，前端页面仅需要更新的部分更新。
  传送门：http://ask.dcloud.net.cn/article/431

应用的版本号有两种：
1、应用版本号

plus.runtime.version

2、应用资源版本号

// 获取本地应用资源版本号  
    plus.runtime.getProperty(plus.runtime.appid,function(inf){  
        wgtVer=inf.version;  
        console.log("当前应用版本："+wgtVer);  
    });

所以官方文档说明的很清楚，只有在整包升级时，应用的版本号才会改变。而当应用资源升级时，应用的版本号是不会改变的，改变的是应用资源版本号。两种版本号的获取方式参照上述代码。

但是有两个版本号，似乎更新的时候有点困难。我的做法是将两个版本号统一，更方便处理。场景如下：
1、0.0.1版本的应用发布到了应用市场，已经有人下载了
2、开发同学发现有bug，紧急fix掉后将版本号改为了0.0.2，发布了应用资源包，同时也发布了整包到应用市场
3、由于应用市场需要审核应用，所以还没有人下载到最新的0.0.2版本
4、出现bug的用户在重启应用或收到升级推送后成功升级到0.0.2版本，修复了bug
5、第二天，应用市场审核通过0.0.2版本的应用。新用户下载了0.0.2版本。老用户使用的0.0.1版本但是应用资源包已经将App升级到0.0.2版

注：用户在检测版本的时候传最高的版本到服务器，避免重复升级。

加载过多：preloadLimit:12， 数值可以改大一点，不填的话好像默认是十个。
undifine的原因应该是点击太快，页面未加载完成就被点击了。

ios的沉浸模式默认是开启的，是由配置文件apple节点下的UIReserveStatusbarOffset属性设置的；
但是偷偷听说是创建了一个webview在状态栏位置，所以切换页面的时候并不会跟着打开的webview一起滑动，只能通过plus.navigator.setStatusBarBackground("#e3393c");或者init方法的statusBarBackground参数去设置背景颜色，切换加载webview后才会去执行修改背景颜色的方法，就会有一定的延迟，切换不和谐。

故尝试了放弃UIReserveStatusbarOffset，设置值为false，果然页面整体顶上去了，那么接下来就简单了，ios的状态栏高度固定为20px，剩下的就跟安卓的沉浸模式差不多的做法了， ios中mui会给body添加固定的class：mui-plus mui-ios mui-ios-8 mui-ios-8-4 mui-statusbar，那么写几个.mui-ios 下的样式（如：.mui-ios header{ padding-top:20px;}）就轻松预留了状态栏的高度，这样header是什么背景就是状态栏的背景了。

如果需要不同页面去修改状态栏文字颜色就只能通过：plus.navigator.setStatusBarStyle("UIStatusBarStyleDefault");

以及init方法的beforeback:function(){plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");} 配合变换；

目前这样使用很流畅，基本无延迟，类似原生（ios原生为渐变）

看问答里面很多人在求滚动到一定位置固定某个结构的方法，分享个简单的方法。

官方给的iscroll获取滚动条高度的在浏览器是有效的，在安卓手机上就无效了，获取transform transitionY同样的问题获取不到，所以放弃获取高度，直接通过固定目标元素距离顶部的距离去判断位置。

// 滚动固定  
            var headH = document.querySelector('header').offsetHeight,  //头部高度  
                tab = document.getElementById('userTab'),   //目标元素  
                fixed = document.getElementById('fixedNav'); // 浮动元素，默认隐藏，当然也可以直接浮动目标元素  

            window.addEventListener('scroll', function(e) {  
                //原理：滚动时判断固定元素的top距离头部的位置  
                if(himall.hasClass(fixed, 'hidden')) {  
                    if(tab.getBoundingClientRect().top <= headH) {  
                        himall.removeClass(fixed, ' hidden');  
                    }  
                }else if(!himall.hasClass(fixed, 'hidden')){  
                    if(tab.getBoundingClientRect().top >= headH){  
                        fixed.className += ' hidden';  
                    }  
                }  
            });

himall.removeClass = function(el,name) {  
        if(!el)  
            return;  
        if(el.className.indexOf(name)>=0)  
            el.className=el.className.replace(name,'');  
    }  

    himall.hasClass = function(el,name) {  
        return (el.className.indexOf(name)>=0);  
    }

--

屏幕适配一直是困扰工程师的重要课题，各种解决方案层出不穷，百分比布局、响应式设计（媒体查询）、媒体查询与rem结合等方案都各有所长，综合而言，媒体查询与rem、Javascript配合使用的方案最优，但是将px转换为rem需要不停的计算，对一个大型项目会有很多的样式代码，转换的工作量是巨大，有没有一种自动化的解决方案呢？
Hublider提供了解决方法：可在工具>>选项或右键项目>>属性下的代码助手设置中配置。参阅http://ask.dcloud.net.cn/article/982
开发实践中经历了从最初的PC固定布局、手机端固定布局（两端留白）到响应式设计（媒体查询、百分比布局等），直到最终选择rem+Javascript的模式，但是在项目开发中需要将大量的样式由px转换为rem，单位之间的换算虽然不复杂，但是工作量却很大。
这里的参数选择和你在项目中的设计图尺寸和根元素字体大小相关，至于border的处理是因为在安卓下使用rem单位的支持性特别差，你可能写2rem或者3rem都没用默认会变成1px，所以在使用border属性时很多时候不建议处理border。
Javascript控制根元素大小的代码如下图所示，读者可以将代码放在公共的Js文件中，确保每个HTML文件都引用到。