分类目录归档：WEB开发

2015
12-11

哪些JavaScript IDE最好用？

阅读本文之前，分享大家一张图片，看图会发现JavaScript开发需求最高，占比达到42.84%，因此掌握JavaScript语言好工作就不愁啦，工欲善其事必先利其器，那么选择IDE来开发是至关重要的，本文指出常用的几款JavaScriptIDE，分析其优缺点，如有不完善的请大家补充WebStorm优点：1.关键字提示使用WebStorm开发时，它会自动提示JS变量，关键字，方法，函数或参数名，可帮助你快速输入，避免一些低级的输入... 继续阅读 >

2015
12-08

对抗拖库 —— Web 前端慢加密

0x00前言天下武功，唯快不破。但密码加密不同。算法越快，越容易破。0x01暴力破解密码破解，就是把加密后的密码还原成明文密码。似乎有不少方法，但最终都得走一条路：暴力穷举。也许你会说还可以查表，瞬间就出结果。虽然查表不用穷举，但表的制造过程仍然需要。查表只是将穷举提前了而已。密码加密，用的都是单向散列计算。既然单向，那就是不可逆，那只能穷举。穷举的原理很简单。只要知道密... 继续阅读 >

2015
12-07

浏览器 HTTP 缓存原理分析 推荐

以前项目中遇到了很多浏览器缓存相关的问题，也在网上查过资料，搞过服务器的配置，来确保客户端加载服务器资源的速度和资源有效性。最近仔细看了下http协议中和缓存相关的一些属性，总结一下。浏览器缓存原理文字版描述①浏览器第一次访问服务器资源/index.html在浏览器中没有缓存文件，直接向服务器发送请求。服务器返回 200OK，实体中返回index.html文件内容，并设置一个缓存过期时间，一个文件修改时间，一个根... 继续阅读 >

2015
12-02

web前端规范

1.规范说明此为前端开发团队遵循和约定的代码书写规范，意在提高代码的规范性和可维护性。此规范为参考规范，不全是硬性要求，部分硬性约定见下一条书写规范，统一团队编码规范和风格。让所有代码都是有规可循的，并且能够得到沉淀，减少重复劳动。1.1结构说明--项目结构----|----CSS文件结构----|----JS文件结构2.书写规范2.1样式与内容分离2.1.1项目结构---|----index.html入口页|----... 继续阅读 >

2015
11-27

中小型网站架构分析及优化

先看网站架构图：以上网站架构广泛运用中大型网站中，本文从架构每一层分析所用主流技术和解决手段，有助于初入网站运维朋友们，进一步对网站架构认识，从而自己形成一套架构概念。第一层：CDN国内网络分布主要南电信北联通，造成跨地区访问延迟大问题，对于有一定访问量网站来说，增加CDN（内容分发网络）层可有效改善此现象，也是网站加速的最好选择。CDN把网站页面缓存到全国分布的节点上，用户访问时从最... 继续阅读 >

2015
11-21

web 页面内容优化管理与性能技巧 HOT

回想一下，以前我们不得不花费大量时间去优化页面内容（图片、CSS等等），如今用户有更快速的互联网链接，我们似乎能够使用更大的图像或更大的闪存文件，里面包含的有视频或者图片。然而，随着移动开发的兴起，我们又回到了过去的窘状。网站优化是十分重要的，需要下载的内容少，反应速度快，就能使我们加载应用程序更快速。图片：控制在合适的尺寸大小很多时候我们在不同的网站使用同样的图像，例如一个网上商店，... 继续阅读 >

2015
11-20

前端程序员应该知道的 15 个 jQuery 小技巧

通过使用jQuery中的animate 和scrollTop 方法，不用插件就可以创建一个滚动到顶部的简单动画：//Backtotop$('.top').click(function(e){e.preventDefault();$('html,body').animate({scrollTop:0},800);});<!--Createananchortag--><aclass="top"href="#">Backtotop</a>改变scrollTop 的值可以更改你想要放置滚动条的位置。所有你真正需要做的是在800毫秒的时间内设置文档主体的动画，直到... 继续阅读 >

2015
11-19

微信红包的技术实现原理 HOT

以下内容来源于QCon某高可用架构群聊天记录整理背景：有某个朋友咨询微信红包的架构，在官方或非官方同学的解释和讨论中得出以下讨论内容，在此期间有多个同学发红包做现网算法测试。抢红包过程当有人在群里发了一个N人的红包，总金额M元，后台大概发生的事情如下：一、发红包后台操作：在数据库中增加一条红包记录，存储到CKV，设置过期时间；在Cache（可能是腾讯内部kv数据库，基于内存，有落地，有内核态网络... 继续阅读 >

2015
11-17

Web应用程序遭黑客入侵的五大征兆

大多数针对Web应用程序的攻击都非常隐蔽，不容易发现。从2015威瑞森数据泄漏调查报告来看，攻击者平均可以在网络上潜伏205天不被发现。许多组织都是从其他人那里发现安全受到了威胁。近日，InfoWorld资深编辑FahmidaY.Rashid在一篇文章中分析了Web应用程序遭黑客入侵的五大征兆，并提出了一些确保应用程序安全的建议。征兆1：应用程序行为反常应用程序监控是发现可疑行为的最好方式。Fahmida提到了以下几种异常... 继续阅读 >

2015
11-17

如何给网页内容上所有的img标签加上alt属性

如何给网页上所有的img标签加上alt属性给img标签加上alt属性是为了更好的让搜索引擎识别，告诉它这是什么东西，但有时页面内容非常多的时候，有些img标签的alt属性就会漏写，检查起来非常烦，或者想让页面上布局更多的关键词，这就可以利用Jquery的一段代码来填补这些不足了，原理是这样的，先得出页面上所有的img标签的总数量，然后用一个for循环去查找每个img标签中有没有alt属性，如果没有，则就加上自己定义的alt属性，如果存... 继续阅读 >

2015
11-17

当你输入一个网址后按回车，实际会发生什么? HOT

英文原文：WhatreallyhappenswhenyounavigatetoaURL，编译：寒冬星空作为一个软件开发者，你一定会对网络应用如何工作有一个完整的层次化的认知，同样这里也包括这些应用所用到的技术：像浏览器，HTTP，HTML，网络服务器，需求处理等等。本文将更深入的研究当你输入一个网址的时候，后台到底发生了一件件什么样的事～1.首先嘛，你得在浏览器里输入要网址: 2.浏览器查找域名的IP地址导航的第一步是通过访问... 继续阅读 >

2015
11-16

移动端web开发技巧 HOT

这是一个最好的时代，因为我们站在潮流中；但也是一个最坏的时代，因为我们站在潮头上。META相关1.添加到主屏后的标题（IOS）<metaname="apple-mobile-web-app-title"content="标题">2.启用WebApp全屏模式（IOS）当网站添加到主屏幕后再点击进行启动时，可隐藏地址栏（从浏览器跳转或输入链接进入并没有此效果）<metaname="apple-mobile-web-app-capable"content="yes"/><metaname="apple-touch-fullscreen"conte... 继续阅读 >

2015
11-16

JavaScript与PHP中正则写法 推荐

一、JavaScript有个在线调试正则的工具，点击查看工具。下面的所有示例代码，都可以在codepen上查看到。1.创建正则表达式varre=/ab+c/;//方式一正则表达式字面量varre=newRegExp("ab+c");//方式二RegExp对象的构造函1）正则表达式字面量在脚本加载后编译。若你的正则表达式是常量，使用这种方式可以获得更好的性能。2）使用构造函数，提供了对正则表达式运行时的编译。当你知道正则表达式的模式会发生改变，或... 继续阅读 >

2015
11-12

为什么要提升web性能？ HOT

为什么要提升web性能？Web性能黄金准则：只有10%~20%的最终用户响应时间花在了下载html文档上，其余的80%~90%时间花在了下载页面组件上。web性能对于用户体验有及其重要的影响，根据著名的`2-5-8`原则：当用户在2秒以内得到响应，会感觉系统的响应非常快当用户在2-5秒之内得到响应，会感觉系统的响应速度还可以当用户在5-8秒之内得到响应，会感觉系统的响应非常慢，但还可以接受当用户在8秒之后都没有得到响... 继续阅读 >

2015
11-11

JavaScript 各种遍历方式详解，有你不知道的黑科技 推荐

为了方便例子讲解，现有数组和json对象如下vardemoArr=['Javascript','Gulp','CSS3','Grunt','jQuery','angular'];vardemoObj={aaa:'Javascript',bbb:'Gulp',ccc:'CSS3',ddd:'Grunt',eee:'jQuery',fff:'angular'};for可以直接看示例，用得太多了，很简单(function(){for(vari=0,len=demoArr.length;i<len;i++){if(i==2){//return;... 继续阅读 >

2015
11-10

纯 CSS 创建各种不同的图形形状

介绍今天，我们要学习如何使用简单的CSS来创建不同类型的平面图形。使用代码矩形.rectangle{width:250px;height:150px;background-color:#6DC75F;}<div></div>三角形.triangleUp{border-left:75pxsolidtransparent;border-right:75pxsolidtransparent;border-bottom:150pxsolid#6DC75F;width:0;height:0;... 继续阅读 >

2015
11-09

HTML5的这些api你知道吗？ HOT

以下是之前学习的一些HTML5API的总结，在HTML5中有许多功能和接口很值得我们去了解和学习。页面可见性API--pageVisbility全屏API--fullScreen获取MediaAPI--getUserMedia电池API--battery资源预加载API--linkPrefetchingPageVisibility页面可见性API该API可以用来检测页面对于用户的可见性，即返回用户当前浏览的页面或标签tap的状态变化。在最小化浏览器、切换tap页面时生效.(如需对app... 继续阅读 >

2015
11-09

css设计中的不变与可变 推荐

“人活一世,有人成了面子,有人成了里子,都是时势使然。”——《一代宗师》如果重构分里子与面子的话，那么html应该是负责里子的，而css就是负责面子了。在上篇html结构的拆与合说了html之后，我们继续来说下css，这次我们从可变与不变的角度分析。一个面试题首先这是一个面试题，其次反正我是没做过这个面试题，最后忘了是哪个厂的面试题。具体的要求我忘了，大概的意思就是要这个内容在视窗内垂直方向居中，以图片为参考，文... 继续阅读 >

2015
11-08

UI设计师该如何学习前端？ 推荐

笔者的经历在知乎就可以看到，大学专业是数字媒体艺术，大一实习过动效设计师，大二拿到了人生第一个大公司的offer是交互设计师，后来转岗到淘宝旅行的前端团队，现在在微信电影票做前端研发。也是走过了不少野路子，不过还好有小右哥@尤雨溪这样艺术/设计转前端的大神在前面做典范，也证明这条路是玩的通的接下来就说说自己的学习建议吧，一个小教程，也是自己走过的流程，仅供参考哈————背景篇在这个时代学习新东西... 继续阅读 >

2015
11-07

PHP的curl常用的5个例子

1，抓取无访问控制文件<?php$ch=curl_init();curl_setopt($ch,CURLOPT_URL,"http://localhost/mytest/phpinfo.php");curl_setopt($ch,CURLOPT_HEADER,false);curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);//如果把这行注释掉的话，就会直接输出$result=curl_exec($ch);curl_close($ch);?> 2，使用代理进行抓取 为什么要使用代理进行抓取呢？以google为例吧，如... 继续阅读 >

2015
11-05

我们程序员为什么要关注 JavaScript ？

受这周我在企业中看到的JS现状的启发，我写了这篇文章。10年之前，我从来没有想过现在的JavaScript竟然会变得几乎无处不在。下面是几个你之所以要关注JavaScript的原因。首先，我认为JavaScript能够得到普及的主要原因之一是，JavaScript非常易于接近。学习JavaScript，对于初学者而言，相对比较容易，对于高级用户而言，又非常强大，可以用它来构建复杂又可靠的系统。其次，之所以要关注JavaScript是因为现今的Jav... 继续阅读 >

2015
11-05

前端工程师的兴起

前端工程师的兴起 在很久很久以前，是没有前端工程师的，那时候，前后端是不分离的，页面由JSP、PHP等工程师在服务端生成，浏览器负责展现。基本上是服务端给什么浏览器就展现什么。有时候甚至由设计师直接用dreamweaver拖出一张网页来。但这种前端开发模式局限性太大，而且性能差，代码冗余。不适合开发大型项目。随着互联网的极速发展，业务变得越来越复杂，传统的前端开发模式已经无法胜任需求。各... 继续阅读 >

2015
11-04

使网站显得业余的10个错误 HOT

使网站显得业余的10个错误网页设计中有一些低级错误，细微的差异就可能导致网站看起来很不专业。创建自己的网站对于资金拮据的企业主似乎是个好主意。可以以后再找设计师，等你的创业项目取得了一定的地位，那时你才会开始考虑这些无意义的事情。是这样吗？事实证明，对于初具雏形的业务，设计远比你想象得重要。当你运营线上业务时，访客的判断往往取决于设计中的小细节。顾客都是三心二意的。他们对一... 继续阅读 >

2015
10-28

人人都会的35个Jquery小技巧

收集的35个jQuery小技巧/代码片段，可以帮你快速开发.1.禁止右键点击$(document).ready(function(){$(document).bind("contextmenu",function(e){returnfalse;});});2.隐藏搜索文本框文字Hidewhenclickedinthesearchfield,thevalue.(examplecanbefoundbelowinthecommentfields)$(document).ready(function(){$("input.text1").val("Enteryoursearchtexthere");textFi... 继续阅读 >