瑶一瑶 发布的文章
-
有关http缓存的一些请求头的探索
你是否遇到过请求返回statu code：304，你是否注意过状态码为200(from memory cache)，那么让我们好好探索一下它们是怎么出现的吧。 最近在研究http请求的时候接触到一些http与缓存相关的请求头部信息： eTag/if-not-match expires/cache-control:max-age last-modified/ if-modified-since 缓存策略 当浏览器请求资源时，会默认将资源存入缓存中，有两种读取缓存的方式from disk cache 和 from memory cache，当第一请求的时候会在内存和硬盘中同时备......
-
屏幕尺寸、分辨率、倍率到底是什么鬼
目前我们做移动端项目几乎不需要考虑为什么要这样写样式，为什么设计稿上100px我们直接写成1rem，移动端的屏幕尺寸那么多变，为什么能轻松兼容？那我们得从移动端的屏幕尺寸来探索一下其中的原理，首先就得了解这些费解的概念。 我在网上收集了很多资料，众说纷芸，我按自己的理解整理了这篇文章，如果有理解不当的地方，请指正。 屏幕尺寸 即我们通常说的尺寸是多少多少英寸啦，指的是屏幕对角线的长度。比如iphone6的屏幕尺寸是4.7英寸 设备像素DP(device-pixels) 很多地方又叫设备屏幕尺寸、设备物理像素、屏幕分辨率等等，我感觉是一个概念。比如iphone6是1334*7......
-
用requestAnimationFrame来代替setInterval
用requestAnimationFrame来代替setInterval 在高级浏览器中，我们用requestAnimationFrame这个方法来代替setInterval和setTimout来做定时器。 requestAnimationFrame的执行机制 目前的显示器大部分的PSF都是60帧/秒，即每1000/60 = 16.7ms刷新一次，如果setTimeout/setInterval设置的时间间隔小于16.7，那么就会出现过度绘制的问题。而requestAnimationFrame正是为了这个而出现的，它会跟着浏览器的绘制走，浏览器每次重绘会通知requestAnim......
-
CSS3的3D转换
在做新版本的3d轮播插件的时候，使用到CSS3中的3D转换属性，对各种3D属性做了一些深入一点的了解。 transform-style 官方解释：transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。 我的理解是它是用在一个3D空间的父元素上，其所有子元素处于同一个3d空间坐标内，如果子元素之间有相互交错的层级关系时我都会给父元素加上这个属性，让它们处于同一坐标系中。（以下讨论均基于这个前提） 来一张空间坐标系示意图： 3D转换的层级关系 因为轮播中会有slide叠加的情况，正常情况是后面的层级低于前面的，在这个时候我们的z-index属性将会失去作用......
-
HTML5的history API和浏览器历史记录管理
之前的天下手游移动官网还有一个功能就是左右切换页面内容时 功能介绍 history的HTML5 API可以更改当前页面的url但是不刷新页面，同时将路径记录到历史页面中，可通过浏览器后退按钮来返回到上一状态。这样可以轻松帮我们实现在ajax动态局部刷新页面后，通过后退按钮来回来前一状态，而保证页面不跳转。 API 1、存储当前历史记录点 window.history.pushState(stateObj, title, url) 三个参数： stateObj——一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null......
-
模仿网易新闻首页的滑屏切换
网易新闻移动版,试试左右滑动来切换新闻栏目，是不是如丝般顺滑？ 天下手游首页，也是模仿这种效果来做的，是不是也还可以（捂脸） 我们需要绑定touchstart,touchmove,touchend三个事件。支持H5的浏览器（移动端当然是都可以的）都支持以下绑定事件的方式——用handleEvent方法去区分不同的事件。 注：我们是在touchend事件触发的时候才会有左右滑屏。 //滑屏切换内容页 $("#main_container")[0].addEventListener('touchstart', touchHandle, f......
-
横屏页面注意事项
最近做了一个全横屏的页面—— 劲舞团移动官网 分享一些要注意的地方。 1、根节点字体 当前我们移动端的根节点的字体大小是312.5%， 即16px*3.125=50px，此时编写css时，1rem=50px，网页100%宽度为7.5rem（375px/50）。我们是以屏幕的宽度为基准来计算的，可以用媒体查询来控制不同屏幕尺寸下的根节点字体大小，但是横屏时在部分手机上，媒体查询的高度和宽度仍然是以长的一边为高短的一边为宽，所以媒体查询失效。我们需要用js去控制根节点字体大小; if(window.orientation==90||window.orientation==......
-
关于代码结构的一些总结
前段时间做图库，因为算是一个小的项目了，所以在做之前就考虑要周到一些，不能像做单页面一样，代码堆砌也可以正常运行。功能稍微复杂一些，就要考虑可维护性与可扩展性了，我就自己在做的过程中遇到的一些问题做一些总结吧。没有大片的代码贴，只是写一些体会而已。 数据分离 我们很早就会听说MVC之类的设计模式，目的也是为了实现代码的拆分，加强代码的可读性可维护性。图库的接口比较多，在开发以及维护过程中，为了方便适应接口的频繁更改（你懂的），组长很久以前提醒过我要把接口集中放在一个文件里面（当时我并没听进去，因为懒 T0T，但是我记住了），这时就派上用场了，如下： var HOST = &qu......
-
元素在页面中的尺寸和定位
在平时开发过程中经常会遇到要获取元素的各种尺寸或者定位，什么offset，scroll，client，什么x，y，很晕有木有，从来没分清楚过有木有,于是决定花点时间把它理一理，分享给大家。 1、原生JS获取元素尺寸的方法 1.1、偏移量(offset) 包括元素在屏幕上占用的所有可见的空间，包括内边距、滚动条、和边框（不包括外边距）有四个属性——offsetHeight、offsetWidth、offsetLeft、offsetTop：如下图示意 1.2、客户区大小(client) 指元素内容及其内边距所占据的空间大小(不包括滚动区域)，有两个属性——clientHeight......
-
CSS3动画的一些小总结
总结的内容有的是一些平时自己遇到过的容易被忽略的，有的是个人觉得简单实用的，特此分享！ 1、过渡 简单的状态变化只用transition就可以方便地实现： transition-property： 规定应用过渡的 CSS 属性的名称； transition-duration：定义过渡效果花费的时间，默认是 0； transition-timing-function ： 规定过渡效果的时间曲线。 transition-delay： 规定过渡效果何时开始，默认是 0 在用的时候遇到一个问题，就是transition在动画退场时会有退场动画，相当于......
