浏览器 on 月盾的博客

没想到iPhone浏览器Safari居然已经支持扩展了

Tue, 12 Dec 2023 10:43:56 +0800

使用电脑的人免不了使用浏览器，电脑端浏览器的一大特色是插件和扩展，等于是给浏览器添加外挂，增加一些额外的有用功能，比如：

广告拦截器
密码管理器
翻译工具
网页截图工具

我自己使用的一些插件具备以下功能：

保存和同步密码
下载网页视频
自定义网页样式
鼠标手势
破解功能

等等…… 然而，手机端的浏览器基本不支持插件功能。但是令我万万没有想到的是，苹果手机的浏览器居然已经支持扩展功能了。

设置 > Safari浏览器 > 扩展 > 更多扩展

目前支持的扩展数量还有限，但是也算有个好的开头，也有一些比较使用的扩展。

https://www.hopefly.top/article/65/

chrome开发者工具显示接口完整路径

Fri, 18 Feb 2022 16:23:26 +0800

chrome浏览器的开发者工具是前端开发必不可少的工具，其中接口查看是最常用的功能之一。默认情况下显示如下：

主要是红框内的接口显示只有很短的名称，并没有完整的显示出整个接口，这对于一些最后名称一样的接口就不能知晓是哪个接口了，只能点击查看详情。我们希望的当然是能够显示完整的接口，实际上也是能做到的。

在名称栏上右击：

可以显示很多选项，其中路径和网址就是我们先要的，点击以后就可以显示完整的接口路径了。

七牛在线管理图片预览chrome插件

Tue, 06 Jul 2021 19:32:15 +0800

七牛云图片存储有10G的免费额度，对于个人来说足够使用了。使用七牛图片存储涉及到图片上传，查看，管理的问题。为了能提高使用效率，我们可以利用好一些工具。

vscode插件上传图片到七牛

vsocode扩展市场有很多上传到七牛的插件，大家可以根据需要自己选择。

上传的图片多了以后，有时需要找一些已经上传的图片来使用，目前我所知道的方法还仅限于登录的七牛后台上查看。

可以看到，七牛的管理后台做的不能说很差，可以说是很气人。要预览图片必须点击“详情”，当你关掉预览窗口时却不知道查看的是哪张图片，也没有个高亮聚焦。而且也没有时间排序，只有名称排序，真的是很难用。

为了能够直观的看到图片，决定开发一款chrome插件，将图片直接显示出来，而不用再点击查看。

关于chrome插件开发的细节本文暂不细说，直接上代码。

代码展示

manifest.json

{
  "manifest_version": 2,
  "name": "chome-plugin",
  "version": "0.0.1",
  "description": "chrome示例插件",
  "icons": {
    "16": "images/icon-16x16.png",
    "48": "images/icon-48x48.png",
    "128": "images/icon-128x128.png"
  },
  "page_action": {
    "default_icon": {
      "48": "images/icon-48x48.png"
    },
    "default_popup": "html/popup.html",
    "default_title": "Hello yuedun"
  },
  "author": "yuedun",
  "background": {
    "scripts": [
      "scripts/jquery.min.js",
      "scripts/background.js"
    ]
  },
  "devtools_page": "html/devtools-page.html",
  "content_scripts": [
    {
      "js": [
        "scripts/jquery.min.js",
        "scripts/content.js"
      ],
      "css": [
        "styles/yuedun-insert.css"
      ],
      "matches": [
        "https://portal.qiniu.com/kodo/bucket/resource?bucketName=*"
      ],
      "run_at": "document_start"
    }
  ],
  "permissions": [
    "cookies",
    "*://*/*",
    "webRequest"
  ],
  "homepage_url": "https://www.hopefly.top"
}

background.js

firefox火狐新标签中打开书签

Tue, 02 Feb 2021 08:53:54 +0000

火狐浏览器新建标签总是在当前打开标签之后，而不是在最后一个标签后新建。 1.about:config 2.browser.tabs.insertAfterCurrent设为false。

新标签中打开书签 browser.tabs.loadBookmarksInTabs设置true。

新标签中打开搜索 browser.search.openintab设置true.

vscode远程开发应用场景

Fri, 20 Nov 2020 05:41:22 +0000

vscode远程开发

vscode远程开发功能在2019年5月份发布，到现在已经有一年半的时间了，但是周围的人很少提及此功能，并不是没有人使用vscode，而是对此没有强烈需求。

那么远程开发还有什么用呢？下面我来举些列子。

关于vscode远程环境搭建本文不重复说明，网上有大量教程，大家只需要安装remote development插件基本都可以使用起来。

远程开发，顾名思义就是连接远端服务器进行开发，这样的场景确实不是很常见，但是有时候却是很有用，能够解决燃眉之急。

本地主机性能差

有一些大型项目对电脑的要求也较高，编译耗时，跑起来吃内存，我们的常规解决方案是升级电脑内存，升级硬盘，总之就是换高配电脑，如果是换一台也倒罢了，如果是一个团队都要使用更高配的电脑，那这样的成本还是挺高的。

此时利用远程开发功能，所有人共用一台8核16G服务器就足够了。能够解决编译耗时，吃内存等问题。

开发环境统一

现代大多数应用服务是跑在Linux上的，而开发环境则有Windows，Mac，有些服务在开发环境下无法顺利跑起来，这种情况就可以利用远程开发，不再需要虚拟机或WSL了，在Linux上部署应用，在Windows上开发。

远程调试

远程调试我想很多人都有过这样的需求，但是却从来没有过真正的实践，原因是太难搞了。线上出问题，本地无法复现，真希望能够直接调试线上代码，但是无奈无法实现。现在好了，有了vscode远程开发，调试就变得容易了。

远程编辑文件

在Linux上编辑文件时使用的vim编辑器对大多数人来说有些头大，能在vscode中编辑文本就舒服多了。只需要使用vscode连接远程服务可以很方便打开文件并编辑。

在家临时远程开发

作为开发的我们，每天下班都要背着电脑回家，主要原因就是防止线上有问题，能够打开电脑调试代码。一般来说并不是家里没有电脑，而是没有能够正常运行的开发环境。

而远程开发正好能解决该问题，我们需要的仅仅是一台装有vscode的普通电脑即可，不需要再操心开发环境，各种SDK，C++，Python，Nodejs等等八辈子不用的软件装了一大堆，还需要经常更新才行。

节省成本

大多数开发人员是不需要经常开发大型项目和远程调试代码的，但是不是完全没有，这样就需要为了不时之需而配置笔记本电脑，而笔记本电脑一般相对台式机是又贵性能还低，公司要为了应对偶发情况而给开发人员配备笔记本电脑，会造成资源浪费，成本升高。

如果有了远程开发环境，则能应对临时性工作，大大降低成本。

用iPad写代码

如果你觉得vscode远程开发还不够酷？那在iPad中写代码呢？

vscode远程开发虽好，但还有有局限性，毕竟还是需要一台可以安装vscode的电脑，还是不能随时随地的写代码。现在我要告诉你如何在iPad中写代码！

code-server是一个可以运行在服务器上的web项目，这下我们可以在浏览器中使用vscode了，可以在浏览器中打开vscode的，自然就可以使用iPad来写代码了。 Eclipse Theia https://gitpod.io/#https://github.com/eclipse-theia/theia

额，希望苹果能给我广告费！

再或者使用使用codespaces也可以在线编辑代码，https://mp.weixin.qq.com/s/Eutjgbx_nofmuhU2yBGhxg

最后

贴一篇带图的环境搭建教程真香！使用 VSCode 远程开发调试

postman使用技巧

Tue, 03 Nov 2020 06:29:57 +0000

postman是开发人员必备的接口测试工具，虽然经常使用，但是并不会使用到所有功能，除了简单的接口测试外，它还有很多实用的功能，如果充分利用起来，能使我们的工作事半功倍。

环境变量的使用
捕获请求和cookie
收藏接口与分享接口
批量测试
编写文档和示例

环境变量的使用

环境变量的作用是使用切换变量的方式代替频繁的环境修改。这样我们只需保存一次测试接口就可以在不同环境下使用。举例：

环境变量配置

环境变量使用

环境变量切换

捕获请求和cookie

能够直接将浏览器中的请求和cookie同步到postman，省去手动复制请求接口和cookie到postman中。同时，对于需要登录后使用的接口，postman可以直接使用浏览器的登录状态，而不必复制cookie。举例：

收藏接口与分享接口

将自己保存的接口分享与他人，直接拿来即可使用。如果安装了Chrome插件，则可以直接的浏览器中打开链接。使用客户端需要使用import来导入。

批量测试

保存的多个接口批量测试。

编写文档和示例

对于团队协作很有用，接口交流利器。不仅有了请求参数，添加一个example还可以看到接口返回参数。

goquery 中文乱码

Mon, 27 Jul 2020 13:09:20 +0000

乱码的情况目前有两种可能：

常规乱码，网页非utf-8。
非常规乱码，代码导致的乱码。

关于常规乱码可参考issue获取中文网页有乱码的问题 #185 非常规乱码就像我遇到的一样，最开始以为是网页问题，使用了github.com/djimenez/iconv-go转换还是乱码，使用了golang.org/x/text/encoding/simplifiedchinese还是乱码。试试英文网页，还是乱码。最终一点点调试发现是由header引起的。 req.Header.Add("Accept-Encoding", "gzip, deflate") 这一行的作用是告诉服务器浏览器要接收的数据编码是gzip,dflate，到达浏览器后会自动解码。但是我们的代码并非浏览器，不会自动解码，所以接收到的就是非常规的压缩数据。

人人都值得学习的UI自动化

Wed, 15 Apr 2020 11:36:56 +0000

为什么需要UI自动化？

说起自动化，听着很厉害，可是也没见识过到底多厉害，基本是属于传说，没见过实战。但不能否认其价值，作者本人作为一个开发者也是偶然的机会接触到UI自动化，感受到了自动化的魅力，才不惜花时间来学习并使用在实际工作中。下面就来说一下为什么要做自动化。自动化有很多种，单元测试，接口测试，UI测试。所有测试过程可以形成这样一个金字塔：

（图片来自网络）

从图中看出底层测试简单快速，每个单元相对独立，测试成本也较低。而最顶层的UI层聚合了底层的很多接口服务，一个测试流程相对更长更复杂，也就导致了速度慢，成本高的问题。如果由人工来完成，一个完整的测试流程往往需要几分钟，而且是不停的重复这样一个流程。所以很多开发都不愿意完整的测试自己所开发的一套业务，只能由测试人员不厌其烦的循环往复。此时如果有自动化的话就非常nice了。口说无凭，一图胜千言：

是不是还没看清？没错，平时人工测试一个报名表单需要15秒左右，而自动化后几乎一瞬间即可完成，速度提升不言而喻。如果您对UI自动化已产生兴趣，请继续往下看。

哪些场景可以UI自动化？

UI自动化的目的不是为了自动化而自动化，也并不能覆盖所有测试。还是以测试金字塔来说明：

UI自动化虽然只能覆盖到约10%，但其价值却不可忽略，因为越往顶层消耗的人力成本越高，如果底层测试不够充分就只能靠顶层测试来保证。自动化虽好，但需要满足特定的场景才行，那么什么样的场景可以做UI自动化？

流程变化少。侧重UI的修改，而不是流程的修改。
频繁的回归测试。比如一个报名表单样式修改比较频繁，需要测试其报名是否可用。
界面稳定。样式可以频繁修改，但表单顺序和个数变化较少不能频繁变更。
维护周期长。如果只是使用一次那也不必自动化了，毕竟自动化是解决重复劳动。
开发与测试可相互配合。自动化需要程序有一定规范便于测试人员写测试程序。
测试人员具备编程能力。如果满足了上述的场景，那么UI自动化在人力消耗和效率上就有很大的提升。正确性上更有保证，手工录入会有输错重输的情况，而自动化则不会出现。再看一个流程比较长的页面：

上面动图并没与快进，一气呵成完成了一次下单流程，基本不需要停留即可进入下一步，相比起手动操作省时省力。

为什么UI自动化普及率低？

既然UI自动化能提高效率，但为什么却很少有人去使用？

开发自动化程序对测试人员的编程水平有一定要求，很少有人愿意花时间去写这个程序。
对于互联网公司，大多数业务需要快速迭代，一个页面的生存周期很短，也可能只是一次性的，自动化测试没有存在的必要性。
测试人员没有切实的感受到效率提升。

其实说白了，就是大家觉得投入和产出不值得。如果是迫于领导压力要写自动化程序，就会不停的对程序修修补补，自己用的话有问题大不了不用自动化，手动测试一下通过就行，如果是给别人用就会不停收到反馈和吐槽，自然也就没有写下去的动力了。所以个人觉得，自动化程序不应该成为一种流程和形式，而是应该由开发和测试人员自发的去将自身经常重复的工作做成自动化。因为自动化本身就不能覆盖所有场景，只有实际参与的人才能知道哪些是可以自动化的。

有哪些工具可以选择？

目前市场上不仅提供了多种工具可以选择，还支持不同语言。 web端：selenium、webdriver、robotframework、puppeteer等。 APP端：Appium、Instrumentation、Robotium 、UIAutomator、Espresso、Calabash、Selendroid、Robolectric、RoboSpock、Cafe、Athrun等。

移动APP自动化测试框架

本文不对所有工具一一详解，可自行根据平台选择合适的工具和语言进行学习使用。只针对个别WEB端工具做简单说明。拿selenium来说，selenium是一款很多人比较熟悉的工具，支持的语言有Python，Java，JavaScript等，推荐使用Python。而且其支持的浏览器也很全面： Google Chrome Internet Explorer 7, 8, 9, 10, 11 Firefox Safari Opera HtmlUnit phantomjs Android iOS

一些常见问题

在自动化过程中最多的就是对元素进行定位，自动化工具常见的定位符有：

id
name
class name
tag
link text
partial link text
xpath
css selector

以上这些元素定位对于以前的网页来说还足以应对，因为以前开发的网页大多数元素会有id，class这些属性，定位起来也比较方便。但是对于react，vue，angular这类数据驱动的框架就不那么友好了。比如有这么一个元素：<div>{{element}}</div>结果为：

一次商业web网站搭建的取舍过程

Fri, 13 Dec 2019 04:00:37 +0000

最近为公司官网重构搭建项目，把遇到的问题总结一下。此处的“商业”并没有多神秘，说的有点夸张而已，不过是为了区分公司项目与个人项目罢了。在这之前，我自己搭建过的网站也不下于10个，其中有个人网站也有公司网站，那时候搭建的网站也能上线运行，也没有过多的条件限制，所以不会有什么纠结的地方。

所以搭建一个网站并不复杂，复杂的是让其满足很多要求。有业务需求，有领导喜好，有同事对技术的接受度。业务说网站要支持SEO，支持IE浏览器，领导说我们要前后端分离，同事说我想使用主流新技术。最后经过几轮商讨下来自然是业务第一，领导第二，同事第三的优先级进行选择了。

要支持SEO和IE浏览器，只能是服务端渲染，可选的技术就只有SSR和模板引擎。SSR能选择的也就同事熟悉的Vue技术栈nuxtjs，但是其只能首屏渲染，并不能完全满足整站的SEO需求，而且开发体验并不怎么好，编译时间长，调试难，占用内存高等缺点。最后只能选择一把刷技术jQuery和node模板引擎。

选择了jQuery和模板引擎还不够，前端的模块化怎么做？目前前端模块化方案还是少的可怜，但并不是没有好的方案，只是在技术潮流下显得有点暗淡失色。比如requirejs，seajs，fis等都可以做模块化，~~最后在内心斗争一番后选择了layui自带的模块化（主要是使用了这一套UI）。layui本身是一套UI框架，为了尽量减少引入第三方js就直接使用其提供的模块化。~~原网站使用的是fis3也很好，但是如果继续使用的话等于又回去了，而且fis3也不再维护了。好在改造难度不大，只需要重新包装一下即可，其实fis3最后生成的代码也是类似于AMD/CMD规范。

技术方案确定后就剩开发环境工程问题了，由于一些老项目的缘故，前端同事都习惯了使用less开发css，也需要引入。然后是公司项目不同于个人项目具有服务器完全管理权限，通常使用NGINX代理，这样会对前端文件进行缓存，而网站发布频率较大，前端文件变化了还有缓存，所以又需要对前端文件进行哈希处理，这样就有了编译过程，同时还有node服务需要同时运行，所以使用了gulp工作流。后续补充：layui在开发过程中没啥问题，但是要上线时对静态文件哈希处理不好，最终也放弃了,回归了最原始的开发方式。

这样一顿操作下来也耗时一周才完成，远比搭建个人项目一天内费事多了。

vue.js做的应用中点击搜索功能会改变URI

Thu, 04 Feb 2016 07:59:14 +0000

用vue.js做的后台管理系统，有一个列表搜索功能，正常登陆进去，直接点击搜索功能，页面就会刷新一遍，原因是url地址变化了

原本地址是：
http://www.mydomain/#!/index
点击搜索以后就变成了
http://www.mydomain/?#!/index

在#!前面自动加了?，导致页面刷新一遍，这样第一次搜索就没意义了.

经过初步排查后发现点击其他按钮不会改变URL地址，对比后发现搜索按钮的type=“submit”，可能是提交表单导致跳转了，那么将type改为button或者直接去掉试试，结果还是不行，干脆也改为标签（加了bootstrap按钮样式），结果好了。为什么将button type改为button不行呢，原因是在标签内标签type会被默认当做submit，（IE浏览器默认type=button）

vue.js中使用focus，blur事件

Sun, 10 Jan 2016 04:08:19 +0000

在线示例

使用focus，blur可对表单进行验证，除了这两个事件，还有一个watch属性可监听data属性值得变化，具体可打开浏览器控制台看属性值得变化情况，代码可直接在浏览器中查看源码

vue.js在chrome浏览器下输入汉字会带出拼音

Fri, 01 Jan 2016 10:19:53 +0000

本想写篇vue.js的教程的，但牵扯的知识点比较多，最近又没时间，就记录下过程中遇到问题吧。开发过程中用的360极速浏览器，也没什么问题，但是其他人测试的时候用的是chrome浏览器，输入汉字的时候会连拼音也带进去，比如输入的是“你好”，结果却成了“nihao你好”。

按理说360极速浏览器也用的是chrome内核，不应该出现这两种不同的情况，这个问题先不追究了。还是说说为什么vue.js的输入框会出现拼音的问题。我本以为是浏览器的差异造成这种现象，但是也不是所有输入框都会出现，那一定是程序的问题。

这是一种双向数据绑定常见写法，但是由于我的理解不够透彻，写成了这样：

我的理解是更新的时候要先显示数据，所以就在input里加了value来初始化数据，也是因为加了这个value导致输入汉字出现拼音，也与浏览器有点关系，就是输入的时候chrome浏览器会把输入的汉字拼音拼写也放进输入框，那么数据模型就接收了输入，敲击空格键的时候又输进了汉字，所以就都带进来了。但其实只需要v-model就能实现数据的接收和输出。

js prototype的理解【转】

Wed, 25 Nov 2015 02:28:52 +0000

prototype属性可算是JavaScript与其他面向对象语言的一大不同之处。 prototype就是“一个给类的对象添加方法的方法”，使用prototype属性，可以给类动态地添加方法，以便在JavaScript中实现“ 继承”的效果。

具体来说，prototype 是在 IE 4 及其以后版本引入的一个针对于某一类的对象的方法，当你用prototype编写一个类后，如果new一个新的对象，浏览器会自动把prototype中的内容替你附加在对象上。这样，通过利用prototype就可以在JavaScript中实现成员函数的定义，甚至是“继承”的效果。

对于javascript本身而言是基于对象的，任何元素都可以看成对象。然而类型和对象是不同的，而我们所讲的prototype属性即是基于类型的一种属性。对于prototype的基本使用就如对象的创建及属性赋值一样的简单。直接通过赋值操作即可完成属性的创建。


/**
 * 
关于prototype,
理解这个很有必要

可以在类型上使用proptotype来为类型添加行为。这些行为只能在类型的实例上体现。

JS中允许的类型有Array,
Boolean,
Date,
Enumerator,
Error,
Function,
Number,
Object,
RegExp,
String

以后这样分，没有实例化的类称为类型，实例化的类称为对象实例简称实例

 */
Object.prototype.name = "zhangsan";

Object.prototype.nihao = function () {

    alert("i can method name is " + this.name);

}

var obj = new Object();

obj.nihao();

alert(obj.name);



// 在实例上不能使用prototype，否则会发生编译错误

obj.prototype.sex = "男"; //error,无法给一个实例prototype
var o = {

    name: "zhangsan"

}

o.prototype.age = 30; //error,无法给一个实例prototype
//可以为类型定义“静态”的属性和方法，直接在类型上调用即可
alert(Object.name);

Object.nihao();

//实例不能调用类型的静态属性或方法，否则发生对象未定义的错误。
Object.class = "三年二班"; //类静态属性
var ob = new Object();

alert(ob.class); //error 实例不能调用类型的静态属性和方法
//可以在外部使用prototype为自定义的类型添加属性和方法。
function Mytest() {

    this.name = "zhangsan";

    this.age = 20;

}

Mytest.prototype.hello = function () {

    alert(this.name);

}

var m = new Mytest();

m.hello();

//在外部不能通过prototype改变自定义类型的属性或方法。
//该例子可以看到：调用的属性和方法仍是最初定义的结果。
Mytest.prototype.name = "lisi";

var mm = new Mytest();

alert(mm.name);

//可以在对象实例上改变或增加属性。（这个是肯定的）
//也可以在对象上改变或增加方法。（和普遍的面向对象的概念不同）
mm.name2 = "lisi";

mm.hello = function () {

    alert(this.name2);

}

//mm.hello();
//继承，这个例子说明了一个类型如何从另一个类型继承。
function Mytest2() { }

Mytest2.prototype = new Mytest;

var m2 = new Mytest2();

alert(m2.name);

//这个例子说明了子类如何重写父类的属性或方法。
Mytest2.prototype.name = "wangwu";

Mytest2.prototype.hello = function () {

    alert('i can mytest2 extend Mytest save method hello');

}

var m3 = new Mytest2();

m3.hello();

//子类中的name属性值不会被父类覆盖
function Mytest3() {

    this.name = "子类中的name属性值不会被父类覆盖";

    this.age = 20;

}

Mytest3.prototype = new Mytest();

var m4 = new Mytest3();

alert(m4.name);

    Object.prototype.name = "zhangsan";

    Object.prototype.nihao = function(){

        alert("i can method name is "+this.name);

    }

    var obj = new Object();

    obj.nihao();

    alert(obj.name);



    / / 在实例上不能使用prototype，否则会发生编译错误

obj.prototype.sex = "男"; //error,无法给一个实例prototype
var o = {

    name: "zhangsan"

}

o.prototype.age = 30; //error,无法给一个实例prototype
//可以为类型定义“静态”的属性和方法，直接在类型上调用即可
alert(Object.name);

Object.nihao();

//实例不能调用类型的静态属性或方法，否则发生对象未定义的错误。
Object.class = "三年二班"; //类静态属性
var ob = new Object();

alert(ob.class); //error 实例不能调用类型的静态属性和方法
//可以在外部使用prototype为自定义的类型添加属性和方法。
function Mytest() {

    this.name = "zhangsan";

    this.age = 20;

}

Mytest.prototype.hello = function() {

    alert(this.name);

}

var m = new Mytest();

m.hello();

//在外部不能通过prototype改变自定义类型的属性或方法。
//该例子可以看到：调用的属性和方法仍是最初定义的结果。
Mytest.prototype.name = "lisi";

var mm = new Mytest();

alert(mm.name);

//可以在对象实例上改变或增加属性。（这个是肯定的）
//也可以在对象上改变或增加方法。（和普遍的面向对象的概念不同）
mm.name2 = "lisi";

mm.hello = function() {

    alert(this.name2);

}

//mm.hello();
//继承，这个例子说明了一个类型如何从另一个类型继承。
function Mytest2() {}

Mytest2.prototype = new Mytest;

var m2 = new Mytest2();

alert(m2.name);

//这个例子说明了子类如何重写父类的属性或方法。
Mytest2.prototype.name = "wangwu";

Mytest2.prototype.hello = function() {

    alert('i can mytest2 extend Mytest save method hello');

}

var m3 = new Mytest2();

m3.hello();

//子类中的name属性值不会被父类覆盖
function Mytest3() {

    this.name = "子类中的name属性值不会被父类覆盖";

    this.age = 20;

}

Mytest3.prototype = new Mytest();

var m4 = new Mytest3();

alert(m4.name);

来源：http://my.oschina.net/tongjh/blog/265209

检测网站中未使用的css样式

Wed, 28 Oct 2015 06:23:43 +0000

网站的css样式文件在多次修改后会有很多样式废弃不再使用，使得维护起来困难，还可能出现重名样式，后面的覆盖掉前面的效果，所以有必要清除掉不再使用的样式。可以使用的工具很多，不过在使用了Dust-Me Selectors觉得足够了。

https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/

打开上面网址安装

直接点击这个小扫把会检测当前页面没有使用的样式，不过这样的结果还不是我们想要的，因为当前页面没有使用不代表其他页面也没有使用。我们更需要的是找出整个网站中未使用的样式。

选择第一项“Spider Sitemap”，就像是百度蜘蛛爬取整个网站数据一样。

输入网址，本地网址和网络地址都可以检测，点击“Start”后很快就有结果了，如果页面较多会费时些。

可以看到有橘黄色部分就是没有使用的样式，但是这也不能完全代表就是没有使用过，上面三个未使用的样式是我对于博客内容的图片和引用块使用的样式，因为本地的测试内容中的确没有使用这三个样式，但是线上的网站却使用了，遇到这种情况就需要仔细甄别了。

再看一下扫描的页面日志

基本的页面都有扫描过了。此时可以手动删除掉没有使用的样式，这个插件对于简单的网站够用了，但是大型网站就不准确了，当然有些其他工具还可以导出检测后的结果。有必要的可以去下载。

一次简单的前端页面优化

Mon, 31 Aug 2015 05:38:08 +0000

公司之前的产品管理对于小编们的使用情况及其糟糕，每次打开一个页面都要等待好久，这也是由于时间紧张，开始做的时候就只管进度没有时间优化。我大概看了下，光是登录页和一个空白首页就有78个请求，1.1M的数据。其他功能页面不少于这个数，这是因为所有页面共用了一个头文件，而这个头文件把所有有用没有的css文件和js文件都加载进来了，所以这次做的新后台管理系统绝不能这么做了。

首先，css按需加载，当然有一些css是每个页面必须的就放到一个公共页面中include进来，对于一些新增的插件就在需要的时候添加到对应的页面。

其次，js的加载方式也进行特别优化，一种方式是把js放在body结束标签之前，可以避免js的加载阻塞页面渲染，还有可以使用异步加载方式 defer是针对IE浏览器的，async是其他非IE内核浏览器异步加载属性。但是，我还是使用了requirejs来加载js，一方面是为了页面加载更快，另一方面是可以做到js模块化。

初步结果显示，所有页面加载速度平均在0.5秒，有些页面几乎看不出来重新加载过程，瞬间完成。优化也算是有一定的效果了。其中要说一下requirejs的一些优缺点，requirejs优点是可以实现js异步加载和模块化开发，不过让我有点不适应的是在HTML页面中不能使用onclick=func这种方式的事件处理，会提示找不到函数，只能在页面加载完成后用jquery进行事件监听，一些动态加载的页面数据也需要在加载以后重新绑定事件。

2015-11-08日更新

自从使用了requirejs后，凡是做页面需要js的时候首先想到的就是requirejs，感觉入坑跳不出来，反而弄巧成拙了。requirejs本意是异步加载多个js文件以防止页面阻塞，在一个网站或项目中也尽量合并多个文件里的内容以减少网络请求，一次加载一个大的文件比多次加载多个小文件来的划算的多，还有，requirejs虽然有好处但是并不是任何时候都有，比如页面很简单，js内容也很少的时候就完全不该用它。最后有一个不得不说的缺点，在上面已经提过，就是事件绑定，因为不能使用onclick=func()这种方式调用函数，只能用$(function(){})这种方式绑定事件，那么在网络不好的情况下，有些文件加载缓慢，导致不能绑定事件，如果一个按钮是这种方式绑定的事件，结果就是非要等到页面加载完才能点击，很让人着急。

前端工具gulp的用途和使用方法

Tue, 07 Jul 2015 13:38:18 +0000

在接触前端开始就听说过grunt和gulp是很叼的前端构建工具，但不知道到底有多叼，只是听说可以自动编译less，sass为css，目前还没有使用less和sass，所以也就没有尝试使用grunt和gulp。但是作为一个技术爱好者还是经不住诱惑，照着网上的教程简单使用了一下，总算是知道有什么用处了，因为都说gulp比grunt更简单好用，就以gulp的使用方法为例来说明一下。

文件合并：关于文件合并很多人存在这样的疑惑，在前端开发中到底该把所有js和css写在一个文件里还是各个页面分开写，我的建议是开发的时候分开写，上线的时候合并为一个，这样的好处是对于浏览器来说，不同页面中相同的文件默认会请求一次缓存下来，其他页面请求相同文件时就直接从缓存中读取，减少文件的网络请求可以提高网页速度，所以文件合并的是很有必要的。

2.文件压缩：既然都合并了，何不再压缩一下呢

3.语法检查：这个功能一般会和下面第4条功能配合使用，当文件修改的时候检查是否有语法错误，并在命令行中输出错误信息。

4.监听文件变化：监听某个目录下文件是否修改，修改的话就执行特定的操作，比如上面几个操作。以上4点是比较常用的功能，更多功能根据自己需要添加

var gulp = require('gulp');
var jshint = require('gulp-jshint');//语法检查
var concat = require('gulp-concat');//合并文件
var uglify = require('gulp-uglify');//压缩代码
var rename = require('gulp-rename');//重命名
 
// 语法检查
gulp.task('jshint', function () {
return gulp.src('public/javascripts/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
 
// 合并文件之后压缩代码
gulp.task('minify', function (){
return gulp.src('public/javascripts/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('public/javascripts/dist'))
.pipe(uglify())
.pipe(rename('all.min.js'))
.pipe(gulp.dest('public/javascripts/dist'));
});
 
// 监视文件的变化
gulp.task('watch', function () {
gulp.watch('public/javascripts/*.js', ['jshint', 'minify']);
});
 
// 注册缺省任务
gulp.task('default', ['jshint', 'minify', 'watch']);
// gulp.task('default', ['jshint', 'minify']);

目录结构:

让你的Node.js应用跑得更快的10个技巧

Thu, 23 Oct 2014 04:20:40 +0000

Node.js 受益于它的事件驱动和异步的特征，所以已经很快了。但是，在现代网络中只是快是不行的。如果你打算用 Node.js 开发你的下一个Web应用的话，那么你就应该无所不用，让你的应用更快，异常的快。本文将介绍10条经过检验得知可大大提高Node速度的应用技巧。废话不多说，让我们逐条来看看。

**1.**并行

创建 Web 应用的时候，你可能要多次调用内部 API 来获取各种数据。比如说，假设在 Dashboard 页面上，你要执行下面这几个调用：

用户信息 -getUserProfile().
当前活动 -getRecentActivity().
订阅内容 -getSubscriptions().
通知内容 -getNotifications().

为了拿到这些信息，你应该会为每个方法创建独立的中间件，然后将它们链接到 Dashboard 路由上。不过问题是，这些方法的执行是线性的，上一个没结束之前下一个不会开始。可行解决案是并行调用它们。

如你所知由于异步性，Node.js 非常擅长并行调用多个方法。我们不能暴殄天物。我上面提到的那些方法没有依赖性，所以我们可以并行执行它们。这样我们可以削减中间件数量，大幅提高速度。

我们可以用 async.js 来处理并行，它是一个专门用来调教 JavaScript 异步的 Node 模块。下面代码演示怎样用 async.js 并行调用多个方法的：

如果你想更深入了解 async.js ，请移步它的 GitHub 页面。

2. 异步

根据设计 Node.js 是单线程的。基于这点，同步代码会堵塞整个应用。比如说，多数的文件系统 API 都有它们的同步版本。下面代码演示了文件读取的同步和异步两种操作:

不过要是你执行那种长时间的阻塞操作，主线程就会被阻塞到这些操作完成为止。这大大降低你应用的性能。所以，最好确保你的代码里用的都是异步版本 API，最起码你应该在性能节点异步。而且，你在选用第三方模块的时候也要很小心。因为当你想方设法把同步操作从你代码中剔除之后，一个外部库的同步调用会让你前功尽弃，降低你的应用性能。

3. 缓存

如果你用到一些不经常变化的数据，你应该把它们缓存起来，改善性能。比如说，下面的代码是获取最新帖子并显示的例子:

如果你不经常发贴的话，你可以把帖子列表缓存起来，然后一段时间之后再把它们清理掉。比如，我们可以用 Redis 模块来达到这个目的。当然，你必须在你的服务器上装 Redis。然后你可以用叫做 node_redis 的客户端来保存键/值对。下面的例子演示我们怎么缓存帖子：

看到了吧，我们首先检查 Redis 缓存，看看是否有帖子。如果有，我们从缓存中拿这些帖子列表。否则我们就检索数据库内容，然后把结果缓存。此外，一定时间之后，我们可以清理 Redis 缓存，这样就可以更新内容了。

4. gzip 压缩

开启 gzip 压缩对你的 Web 应用会产生巨大影响。当一个 gzip 压缩浏览器请求某些资源的时候，服务器会在响应返回给浏览器之前进行压缩。如果你不用 gzip 压缩你的静态资源，浏览器拿到它们可能会花费更长时间。