json 于 1年前发表 4228 6 1
用户在浏览器的地址栏中敲入了网站的网址 ,会发生哪些事情呢? * 用户在浏览器的地址栏中敲入了网站的网址 * 浏览器查找域名的IP地址 * 找到ip地址后,浏览器给web服务器发送一个HTTP请求 * 服务器“处理”请求 * 服务器发回一个HTML响应 * 浏览器开始显示HTML 大概就是这样的过程,下面我们来仔细的分析下浏览器是如何查找到域名对应的ip地址的。 DNS域名解析过程 当用户在浏览器中输入ke.qq.com并按下回车键后: * 第1步,查找 浏览器缓存 。 浏览器会检查缓存中有没有这个域名对应的解析过的IP地址,如果缓存中有,这个解析过程就将结束。浏览器缓存域名也是有限制的,不仅浏览器缓存大小有限制,而且缓存的时间也有限制,通常情况下为几分钟到几小时不等。这个缓存时间太长和太短都不好,如果缓存时间太长,一旦域名被解析到的IP有变化,会导致被客户端缓存的域名无法解析到变化后的IP地址,以致该域名不能正常解析,这段时间内有可能会有一部分用户无法访问网站。如果时间设置太短,会导致用户每次访问网站都要重新解析一次域名。 * 第2步,查找 系统缓存 。
1年前
HTTP网络
helondeng 于 2年前发表 4217 1 0
React-Native 基于目前React来开发IOS原生应用,Android版本将在年底推出。 为什么需要REACT-NATIVE 目前主流的应用大体分成三类:Native App, Web App, Hybrid App.texingfenxi [https://cloud.githubusercontent.com/assets/3880323/8510235/3706bf10-230c-11e5-8eb1-52eeb31cf6bf.png] Native App优点 * 性能好,性能好,还是性能好 缺点 * 开发成本高,无法跨平台 * 升级困难 Web App优点 * 跨平台,Write Once , Run Anywhere * 版本升级容易 缺点 * 无法系统系统级的API * 临时入口,用户留存度低 * 性能差 Hybrid AppNative App 和 Web App 折中的方案,保留了 Native App 和 Web App 的优点。但是最受吐槽的还是性能差。页面渲染效率低,在Webview中绘制界面,实现动画,资源消耗都比较大。
2年前
移动开发
江源 ,非常让人头疼…… 于 1年前发表 4207 3 0
上手 mac 之前,我调查了好久, mac 比起 windows 到底有什么优势?我想说的是,调查并没有什么软用,只有上手一台体验才有意义。 这会是一个系列,作为我折腾 mac 的知识备忘,同时也给想买却犹豫不决的同学吃一个定心丸,买,没错。 mac 相比 windows 有一个大优势,那就是美。在开发者眼中,这体现在开发工具的主题搭配上,废话不多说,上图。 * Terminal[http://7tszky.com1.z0.glb.clouddn.com/Fsx0rHmQpDQ-qcyRTtMiunmx7SDV] * iTerm2 和 terminal 一样。[http://7tszky.com1.z0.glb.clouddn.com/Fjtb-cLILNUujjIMwN3QxKzAPUNh] * idea > webstorm[http://7tszky.com1.z0.glb.clouddn.com/Fnvs_Mk0egVQQhi9vpP1K1OiLTMw]
1年前
工具建设
yangchunwen 于 1年前发表 4183 7 0
相信很多人都试过这样的经历,浏览一个正常的网站时,右下突然角弹出一堆小广告,而且这些广告的内容和你浏览的网站格格不入: taobaodns [http://i12.tietuku.com/1dd0edf962adb967.jpg] 前几天还有某微博用户爆料访问github时居然也有广告: githubhijack [http://i12.tietuku.com/b1adbbdfaa71501f.jpg] 又或者,你有没有试过因为不小心输错了某个网站的网址,出来一堆不堪入目的广告内容? 我今天还特意在家里试了一把,故意输入一个乱七八糟的网址,出来的页面让我无语,各种小广告,而且连续故意输错几个网址,都是这样: wrongname [http://i12.tietuku.com/7b8d35c48dfd23cf.jpg] 上面说的几个事情,未必但很有可能就是 运营商DNS劫持 。事实上,运营商劫持几乎到了明目张胆的地步,尤其是一些N级小电信运营商。对运营商劫持的一些实际例子的危害,感兴趣可以看看这篇 文章 [http://www.75team.com/archives/350]
1年前
Web安全
莫卓颖 于 1年前发表 4119 3 1
背景 相信大家在做项目的过程中会经常遇到这样的一个需求,鼠标hover到某个元素的时候为这个元素添加边框,这个简单的需求仅需注意添加边框后不会对原有的位置造成布局的影响从而造成布局跳动。本文将会试图探讨完成这个简单需求的方法。 方案一 实现思路:为元素中预先设置边框,边框的颜色与元素所在父元素背景色一致,边框大小与hover时候的边框大小一致,鼠标hover过元素的时候只需要设置边框颜色便可。 兼容问题:无 实现代码: HTML结构 <ul class="parent"> <li></li><li></li></ul> CSS .parent{ width: 500px; background: #000; overflow: hidden; } .parent li{ width: 200px; background: red; border: 2px solid #000; margin-right: 2px; height: 200px; float: left; } .parent li:hover{
1年前
CSS/重构
coverguo 于 9个月前发表 4064 3 7
前言: 什么是手Q天气 手Q天气是在手Q 6.0版本以上新增的功能,页面会展现当天的气温情况,已经五天温度折线图以及24小时温度图表等。 并且为了更好的交互效果,天气页面会根据8种不同的天气信息,展现相应的天气动画。如下雨下雪,飘云,日光闪烁等动画效果。 [http://7tszky.com1.z0.glb.clouddn.com/FlotQEJG8iBwvFjCTlw3g_FuPEqr] 在开发手Q天气的时候,学习到许多,发现有许多地方值得写一下。以下是我的总结。 -------------------------------------------------------------------------------- 一、REM整体布局 我们知道对于移动端来说,分辨率适配是个常见的问题,设计师往往给与我们的是iphone6(750px)的视觉稿。而对于天气页面来说 采用REM来整体布局 是个十分不错的选择。 REM 是什么
9个月前
移动开发
coverguo 于 1年前发表 3837 5 3
在业务中,页面滚动的场景十分常见, 因此对于滚动的充分了解,可以让我们提高开发的效率! 滚动的几种场景 * 只有window窗体滚动 * 内滚动布局 * 窗体滚动+DIV内滚动 这时候,台下观众会问,什么是内滚动布局,什么是window滚动呢? 让我们来了解下哈 只有WINDOW窗体滚动 即页面只含有浏览器窗体默认的滚动条,窗体滚动条随页面内容而不断增长。 如手Q吃喝玩乐的站点首页, 在 android机 上就是使用window滚动 [http://7tszky.com1.z0.glb.clouddn.com/Fip_ikOJPGeTWIUSzzwfRLqpLAJL] 内滚动布局 什么是内滚动布局呢? 个人认为,内滚动布局就是主滚动条是在页面内部,而不是浏览器窗体上的布局。 故内滚动布局是相对传统的window窗体滚动而言的。 (具体为什么ios上和android上会使用不同的滚动方式,可以去了解下=。=) 内滚动布局什么时候会使用了? * ios 页面顶部带有fixed输入框(解决软键盘弹出导致页面错位的问题) 例如,手Q吃喝玩乐的站点首页, 在 ios机 上便是内滚动布局
1年前
javascript技术
link ,除了分享,也是知识管理。 于 1年前发表 3784 1 0
[http://7tszky.com1.z0.glb.clouddn.com/Fsr16Kjav3pmGPgpSDgbtFJH9qaK] 10月17号,IMWeb团队跟广州前端圈合作,在腾大二楼多功能厅,进行了一次十分成功的分享沙龙!一、一句话总结 【影响力范围】 * 听众来自欢聚时代、唯品会、37游戏、迅雷、金山、平安科技、金蝶软件、网易、魅族等 超过70家 珠三角互联网公司。 * 超过160名 同学参加了这次分享沙龙。 * 而本次分享沙龙在腾讯课堂开设的线上直播课程中,报名人数也 超过140人 。【活动效果】 * 会后反馈中 100% 的同学表示自己学到了东西。 * 会后反馈中 超过96% 的同学对本次分享沙龙的组织、通知形式感到满意。 二、沙龙现场
1年前
运营
结一 于 10个月前发表 3772 3 3
首先,本文是普通入门知识篇,主要说的是断点的设置。 很多想接触响应式的同学都会有以下疑惑: * 为什么要做响应式? * 怎么入门响应式,是不是很难? * 分辨率那么多,响应式断点怎么设置? 所以本文简单说下下手响应式的一些基础,包你入门响应式,没学会的话再手把手教。 为什么要学响应式 这个问题呢就跟女神有多面一样,比喻在家是睡衣,上班是职业装,团建参加活动什么的就是休闲运动装了。网页呢,对于pc,平板,手机当然也得有不同的打扮排版才吸引用户,提升体验。 不然如中国移动手机端的表现是这样的(整个大小被等比例缩放到适应移动端的device-width),根本没法提用户体验: 中国移动移动端表现 [http://7tszky.com1.z0.glb.clouddn.com/FtN1lC_cKmEXPUkFBaU8tFEkq0Lw] 当然还有个更俗的原因就是你要全方位无死角伺候好你的各种平台的用户,让他们用得爽,然后你每个月才有白花花的银子。 响应式是什么 简单来说,响应式就是在不同的分辨率下,都要让内容以最佳的展现形式呈现给你用户,提升用户体验。如下图:
10个月前
CSS/重构
json 于 1年前发表 3770 0 0
SWIG的简单介绍 swig是JS模板引擎,它有如下特点: * 根据路劲渲染页面 * 面向对象的模板继承,页面复用 * 动态页面 * 快速上手 * 功能强大SWIG的使用 SWIG的变量 {{ foo.bar }} {{ foo['bar'] }} //如果变量未定义,输出空字符。 SWIG的标签 EXTENDS 使当前模板继承父模板,必须在文件最前 参数: file 父模板相对模板 root 的相对路径,将在后面介绍如何实现模板继承。 BLOCK 定义一个块,使之可以被继承的模板重写,或者重写父模板的同名块 参数: name 块的名字,必须以字母数字下划线开头 PARENT 将父模板中同名块注入当前块中 INCLUDE 包含一个模板到当前位置,这个模板将使用当前上下文 参数: file 包含模板相对模板 root 的相对路径 {% include "a.html" %} {% include "template.js" %} //将引入的文件内容放到被引用的地方 RAW 停止解析标记中任何内容,所有内容都将输出 参数: file
1年前
javascript技术
杨文坚 ,首席吹牛工程师 于 1年前发表 3694 1 0
The only limits in our life are those we impose on ourselves. 弱爆的 ES6 IN BROWSER 注意是在浏览器,怎么弱法?简单的说: 几乎是语法糖, async function 这些很有用的东西要依赖一个巨型 Polyfill 才可使用。
1年前
javascript技术
vienwu 于 2年前发表 3663 2 0
-------------------------------------------------------------------------------- react是facebook推出一个用来构建用户界面的js库。官方介绍的三大特性如下: JUST THE UI 把react只当作一个ui组件就好,等同于传统mvc中的view。 VIRTUAL DOM react在编程模型和传统dom之间添加了一层,称之为虚拟dom。好处非常多,性能更好,可以在node环境下完成渲染(解决seo问题),可以更好的用于开发native apps。 DATA FLOW 反应式的单向数据绑定,比传统数据绑定更简单,简单的使用js事件触发改变组件状态也可以实现双向绑定的效果。 什么是ANGULARJS angularjs是google推出的一个前端js框架,面世已有几年时间,非常成熟,目前已经有非常多的第三方模块,基本上可以解决前端工程领域的各方面的问题。网上的资料也非常多,这里就不做过多介绍。 REACTJS和ANGULARJS
2年前
性能