谈谈css的加载及加载循序
前言关于前端css性能优化，网上很多类似文章，我之前也写过，《网站前端性能优化之javascript和css》，感兴趣的可以去看下。今天我们旧事重提，再来谈谈css的加载，及加载循序。通常的css加载循序一般情况下，我们css样式表是放在头部，同时为了减少请求，我们通常对css进行一个合并压缩。目前我们css一般是如下加载的：
jQuery 插件 Magnify 开发简介（仿 Windows 照片查看器）
前言因为一些特殊的业务需求，经过一个多月的蛰伏及思考，我开发了这款jQuery图片查看器插件Magnify，它实现了Windows照片查看器的所有功能，比如模态窗的拖拽、调整大小、最大化，图片的缩放、旋转，平移、键盘控制等。插件的样式都是最基础的CSS，定制非常容易，可以轻松修改成自己喜欢的样式。随后会陆续发布React及Vue相关版本的插件。本文主要介绍插件的特点及使用方法，而关于插件开发的细节将会在之后的具体文章中说明。Github:https://github.com/nzbin/magnifyWebsite:https://nzbin.github.io/magnify开发小记由于最近工作繁忙，几乎每天都是晚上十点到家，然后开始编写插件，睡觉时已过凌晨，如今身心俱疲。因为没有找到相关的插件，所以很多问题都是绞尽脑汁独立思考，比如以鼠标为中心缩放图片、改变弹窗大小时对图片移动的限制、图片旋转之后的缩放、平移等问题，而开发插件最让人头疼的就是细节，甚至大部分时间是在修复单一功能的bug。另外，开发
JavaScript和jQuery如何判断select是否被选中并获取select选中的值
JavaScript部分varmySelect=document.getElementById("testSelect");//定位id（获取select）varindex=mySelect.selectedIndex;//选中索引（选取select中option选中的第几个）vartext=mySelect.options[index].text;//获取选中文本varvalue=mySelect.options[index].value;//获取选中值mySelect.options[index].selected//判断select中的某个option是否选中，true为选中，false为未选中js例子如下：
vue源码之响应式数据
分析vue是如何实现数据响应的.前记现在回顾一下看数据响应的原因.之前看了vuex和vue-i18n的源码,他们都有自己内部的vm,也就是vue实例.使用的都是vue的响应式数据特性及$watchapi.所以决定看一下vue的源码,了解vue是如何实现响应式数据.本文叙事方式为树藤摸瓜,顺着看源码的逻辑走一遍,查看的vue的版本为2.5.2.目的明确调查方向才能直至目标,先说一下目标行为:vue中的数据改变,视图层面就能获得到通知并进行渲染.$watchapi监听表达式的值,在表达式中任何一个元素变化以后获得通知并执行回调.那么准备开始以这个方向为目标从vue源码的入口开始找答案.入口开始来到src/core/index.js,调了initGlobalAPI(),其他代码是ssr相关,暂不关心.进入initGlobalAPI方法,做了一些暴露全局属性和方法的事情,最后有4个init,initUse是Vue的install方法,前面vuex和vue-i18n的源码分析已经分析过了.i
webpack从零开始第6课:在Vue开发中使用webpack
webpack目录第1课:安装webpack和webpack-dev-server第2课:配置文件第3课:做为node的一个模块来使用第4课:插件篇第5课:模块篇第6课:在Vue开发中使用webpack本文参考文档vue vuex vue-router vue-loader awesome-vue精彩的vue vue-cli写在前面vue官方已经写好一个vue-webpack模板vue_cli，原本自己写一个，发现官方写得已经够好了，自己写显得有点多余，但为了让大家熟悉webpack，决定还是一步一步从0开始写，但源文件就直接拷贝官方的准备工作新建文件夹D:\03www2018\study\vue2017，下面根目录指的就是这个目录生成package.json，根目录>
jquery查找元素
一：查找元素*所有元素element该名称的所有元素（p，input）#id拥有指定id属性的元素.class拥有所有指定class属性的元素selector1，selector2能匹配多个选择器的元素二：基本选择器divp一个元素是另一个元素的后代div>p（parent>child）一个元素是另一个元素的直接子节点（可以在p后面使用*来指定元素的所有子元素）div1+div2（previous+next）相邻的兄弟选择器，只会选择紧跟在前一个元素之后的那一个元素div1~div2（previous+siblings）兄弟选择器会选中前一个元素的所有兄弟元素三：基本筛选器：not（selector）除选择器之外的所有元素（比如div：not（“#summary”））：first除去元素中的第一个元素：last除去元素的最后一个元素：even选中元素中索引编号为偶数的元素：odd选中元素中索引编号为奇数
个人博客开发系列：文章实时保存
前言一般用来写东西的网站都会有一个编辑实时保存的功能。对于使用者来说是一个非常实用的功能。作为一个个人博客来说，虽然用处没那么明显，但是还是想实现一下这个功能，就当是练练手吧。实现思路使用WebSocket来进行浏览器与服务器的实时通信；服务端使用Redis来缓存实时编辑的文章（编辑时文章改动频繁，频繁读写数据库操作不是个好的方案）；服务端使用定时任务（如每天凌晨3点），将Redis缓存的数据存储到MySQL数据库中；浏览器端初次进入新增文章页面时，使用WebSocket从服务端获取数据（先从Redis中查找，如果没有则再从MySQL数据库中查找）；浏览器端初次进入编辑文章页面时，不需要从服务端获取数据；使用Vue.js的watch来监听文章的变化，变化时使用WebSocket向服务端传送数据。文章保存时清空Redis和MySQL中实时保存的数据。源码Talkischeap.Showmethecode.说明本功能只是个人博客后台使用，没有多账户体系，所以Redis和MySQL中都是保存一条记录。如果需要
vue@2.0源码学习---从hello world学习vue的内部做了什么
vue@2.0源码学习---从helloworld学习vue的内部做了什么源码版本为2.0.0接前文。前文讲到下面五个函数扩展了Vue的原型initMixin(Vue)stateMixin(Vue)eventsMixin(Vue)lifecycleMixin(Vue)renderMixin(Vue)我画了一个图，是执行这几个mixin之后，Vue原型挂载的方法一个简单的例子window.app=newVue({data:{msg:'helloworld',},render(h){returnh('p',this.msg)}}).$mount('#root')setTimeout(()=>{app.msg='hiworld'},2000)毫无疑问屏幕上会先渲染helloworld，隔两秒后变为hiworld。本文将从这个简单的例子追本溯源，看看Vue究竟做了什么。init我们沿着
瞎折腾：把JS,CSS任意文本文件加密成一张图片
这篇文章发布于2017年12月24日，星期日，16:04，归类于js实例。阅读264次,今日264次byzhangxinxufromhttp://www.zhangxinxu.com/wordpress/?p=6661本文可全文转载，但需得到原作者书面许可，同时保留原作者和出处，摘要引流则随意。一、这是一张包含特殊信息的加密图片64像素*64像素原始加密图：放大5倍呈现后：这张64*64见方的图片实际上包含了一段4K大小的JavaScript脚本的信息。相信如果不知道这张图片的加密算法，就算是爱因斯坦也很难短时间破解之。二、JavaScript代码的图片加密与解密加解密的原理如下：加密：获取文本字符的Unicode编码，范围是0–65535之间的整数。然后把这个整数转化成RGB色值，每一个字符对应一个像素值颜色，然后绘制成图片。解密：读取图片的像素信息，转化成对应的Unicode编码，再转换成对应字符。加解密的媒介canvas加密的图片生成，解密的图片信息读取，都是借助c
vue@2.0源码学习---组件究竟是什么
vue@2.0源码学习---组件究竟是什么本篇文章从最简单的情况入手，不考虑prop和组件间通信。Vue.componentvue文档告诉我们可以使用Vue.component(tagName,options)注册一个组件Vue.component('my-component',{//选项})毫无疑问这是一个全局API，我们顺着代码最终可以找到Vue.component是这样的Vue.component=function(id,definition){definition.name=definition.name||iddefinition=Vue.extend(definition)this.options[type+'s'][id]=definitionreturndefinition}Vue.component实际上是Vue.extend的封装，Vue.extend如下：Vue.extend=function(extendOp
.NET Core容器化之多容器应用部署@Docker-Compose
1.引言紧接上篇.NETCore容器化@Docker，这一节我们先来介绍如何使用Nginx来完成.NETCore应用的反向代理，然后再介绍多容器应用的部署问题。2.WhyNeedNginx.NETCore中默认的WebServer为Kestrel。KestrelisgreatforservingdynamiccontentfromASP.NET,howeverthewebservingpartsaren’tasfeaturerichasfull-featuredserverslikeIIS,ApacheorNginx.Areverseproxy-servercanallowyoutooffloadworklikeservingstaticcontent,cachingrequests,compressingrequests,andSSLterminationfromtheHTTPserver.Kestrel可以很好的用来为A
Vue异步组件Demo
Vue异步组件Demo在大型应用中，我们可能需要将应用拆分为多个小模块，按需从服务器下载。为了进一步简化，Vue.js允许将组件定义为一个工厂函数，异步地解析组件的定义。Vue.js只在组件需要渲染时触发工厂函数，并且把结果缓存起来，用于后面的再次渲染。下面是我写的一个简单Vue异步组件Demo。index.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</titl
.NET作品集：linux下的.net mvc cms
cms程序架构本程序是主要是用于企业网站开发的，也可以做博客程序，程序是从之前上一篇的.net博客程序改进过来的，主要技术由webform转成.netmvc了，由于是很早之前的项目，12年还是mvc3版本，当然还是跑在linux下的。技术栈.netframework4.0sqlite数据库monolinux运行环境以及mono下的sqlite库razor模板引擎dapper轻量级orm框架vs2017社区版本这次的开发工具比较新了吧，上次用vs2010发的，跨度比较大，这个项目之前也是在10下开发出来的，虽然用2017，其实没什么影响的。razor引擎比nvelocity的易用性高很多，而且跟后端集合的比较好。而且这次的项目完全使用dapperorm，整个数据库访问层操作看起来也清爽很多了。代码结构左侧主要分为三个文件夹，Jqpress.web是存放web路由入口、模板皮肤、静态文件，上传文件夹，后台管理程序通过Areas域管理来实现的，整个项目结构还是比较清晰的。路由设计路由入口为HomeContr
浅谈Handler
前言积土成山，风雨兴焉；积水成渊，蛟龙生焉；积善成德，而神明自得；Handler消息传递机制出于性能优化考虑，Android的UI操作并不是线程安全的，这意义着如果有多个线程并发操作UI组件，则可能导致线程安全问题。为了解决这个问题，Android制定了一条简单的规则:只允许UI线程修改Activity里的UI组件。在实际开发中，需要让新启动的线程周期性地改变界面组件的属性值，这就需要借助于Handler的消息传递机制来实现了。Handler类简介Handler类的主要作用有两个。在新启动的线程中发送消息。在主线程中获取、处理消息。Handler类的功能看似简单，似乎只要在新启动的线程中发送消息，在主线程中获取、处理消息。但这个过程涉及两个问题：新启动的线程何时发送消息呢？主线程何时去获取并处理消息呢？为了让主线程能在适当的时机处理新启动的线程所发送的消息，显然只能通过回调的方式来实现——需要重写Handler类中处理消息的方法。Handler类包含如下方法用于发送、处理消息。voidhandleMessage(Messagemsg):处理消
IT人喝酒不同岗位不同姿态 最服程序员
万丈红尘三杯酒，千秋大业一壶茶酒文化在我国可谓博大精深没有什么事情是一顿酒解决不了的如果有那就用两顿在职场中喝酒是职场中的必备技能无论聚餐、谈事、年会都少不了咱IT人更是对酒有深刻的认识和喜爱细数不同类型IT人在酒席上的姿势还真是“眼花缭乱”呢！一、程序员别看程序员平时一幅见人躲着走的表现，可是一旦到了酒桌上，霸气十足，一副喝不到桌子底下不罢休的态势！二、运营人员这是某些运营人员的写照：他们不是二逼，而是被逼无奈，酒量不好还要陪客户喝好，为了产品和朋友，可以两肋插刀，只能喝了吐，吐了喝！三、产品经理产品经理为了让程序员认可他们的产品，逮着机会就给程序员们进行洗脑，到了酒桌上也是不断的哔哔哔哔……四、系统运维工程师需要24小时不间断查看系统运行情况，以防谁再宣布个女朋友，带来系统的故障，别说喝酒不能专心了，结婚流程都得预留查服务器的时间。五、测试工程师测试们的工作都是一丝不够，干什么事情都是实实在在的，有错就报告，毫不掩饰，喝酒也是，实实在在的喝，
QQ 相册后台存储架构重构与跨 IDC 容灾实践
作者简介：xianmau，2015年加入腾讯TEG架构平台部，一直负责QQ相册平台的维护和建设，主导相册上传架构重构和容灾优化等工作。主要研究方向为口语对话系统、分布式系统架构设计和优化，发表对话系统相关学术论文3篇，系统架构相关专利2篇。写在前面QQ相册作为重量级资深业务，稳定运营、有效容灾，一直是相册团队追求的目标。QQ相册架构一直在演变进化，本文重点介绍相册最新的一次重构细节。重构进行了大规模的存储搬迁、功能模块合并，抽象了图片上传“两阶段”，并在此之上设计了轻量级的容灾方案。新架构精简了大量模块，优化了图片上传流程，减轻了运维工作，从实际运营效果看，系统稳定达到4个9的服务质量，并具备跨IDC容灾的能力。项目背景QQ相册在之前已经上线了索引异地容灾，当时容灾的设计和实施，受限于人力和设备资源以及保守的升级策略，我们在原有的相册架构和业务流程上进行非常轻量的设计，从过去一年的实际运营情况看，虽然在各种波动和故障中起到了一定的作用，但是由于容灾场景有限，相册体量庞大，存储和索引分布在很多
【微服务】之六：轻松搞定SpringCloud微服务-API网关zuul
通过前面几篇文章的介绍，我们可以轻松搭建起来微服务体系中比较重要的几个基础构建服务。那么，在本篇博文中，我们重点讲解一下，如何将所有微服务的API同意对外暴露，这个就设计API网关的概念。本系列教程【微服务】轻松搞定SpringCloud微服务目录本系列为连载文章，阅读本文之前强烈建议您先阅读前面几篇。网关名称解释网关(Gateway)又称网间连接器、协议转换器。网关在网络层以上实现网络互连，是最复杂的网络互连设备，仅用于两个高层协议不同的网络互连。网关既可以用于广域网互连，也可以用于局域网互连。网关是一种充当转换重任的计算机系统或设备。使用在不同的通信协议、数据格式或语言，甚至体系结构完全不同的两种系统之间，网关是一个翻译器。API网关名词解释APIGateway（APIGW/API网关），顾名思义，是出现在系统边界上的一个面向API的、串行集中式的强管控服务，这里的边界是企业IT系统的边界。在微服务流行之前，APIGW的实体就已经诞生了，这时的主要应用场景是OpenAPI，也就是开放平台，面向的是企业外部合作
SpringMVC 中配置 Swagger 插件
一、简介Swagger的目标是为RESTAPI定义一个与语言无关的标准接口，允许用户发现和理解计算机服务的功能，而无需访问源代码。当通过Swagger正确定义时，用户可以用最少量的实现逻辑理解远程服务并与之交互。类似于低级编程所做的接口。二、实现步骤1、添加Maven依赖
Otter实现数据双A同步搭建入门教程
1.准备阶段1.1环境虚拟机A：192.168.0.130虚拟机B：192.168.0.131系统：Ubuntu16.04LTSJRE：OpenJDK1.8.0_151（A、B都要安装）DB：MySQL5.7.20（A、B都要安装）ZooKeeper：3.4.11（只装A机）OtterManager：4.2.14（只装A机）（4.2.15启动Node时感觉有Bug，没有使用）OtterNode：4.2.14（A、B都要安装）1.2安装环境1.2.1JRE安装sudoapt-getinstalldefault-jre1.2.2MySQL安装sudoapt-getinstallmysql-serversudovim/etc/mysql/mysql.conf.d/mysqld.cnfcharacter-set-server=utf8log-bin=mysql-binbinlog-format=ROWserver-id=1#A,B需要设置成不一样
MySQL启动失败报1067错误解决
最近做项目使用MySQL数据库，因为卸载了鲁大师造成了数据库文件缺失。重装MySQL数据库后启动出现了1067错误，详情如下在网上查了错误原因，将my.ini文件下的默认搜索引擎换成了myisam修改地址大概在84行左右default-storage-engine=innodb原默认方式是innodb将innodb改为myisam后保存文件重新运行mysql启动正常接下来在操作数据库时报了Unknownstorageengine'InnoDB'无奈又将默认搜索引擎换为了INNODB继续在启动时报1067错误在网上查找方法也没有可以成功的后在配置文件中查看配置参数发现在my.ini文件的74行处发现datadir="C:/ProgramData(x86)/MySQL/MySQLServer5.5/Data/"资料目录所指向的目录和安装目录不一样改成对应的目录后保存重启成功，问题解决。本文永久更新链接地址：http://www.linux