ldjking

摘要： 三种行为 地址栏回车 F5 ctrl+F5一、地址栏回车，观察Chrome下的行为，由于该页面已经访问过，而且设置了cache-control，所有资源文件在network一栏都是200 from cache，注意这个200不是服务器返回的。对于本页面则会得到一个304，说明浏览器会对地址栏的地址无论如何发送一个请求，并在header里带上if-modified-since。二、按下F5，该行为会触发浏览器对所有资源重新请求，并在header里带上if-modified-since，因为资源没有变化，得到的响应式304。三、Ctrl+F5,Ctrl+F5要的是彻底的从Server拿一份新的资源 阅读全文

摘要： CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。总结成一句话就是就近获取资源，优点很明显，缺点也很明显一是只能对静态内容加速二是内容更新时需要分发到其它节 阅读全文

摘要： 刚刚在Node.js环境下使用gzippo模块进行了测试。使用gzip的压缩率惊人的好，达到了50%以上。再加上express的staticCache，配合cache-control max-age 阅读全文

摘要： JavaScript 不同浏览器之间的差异还是很大，所以js库才这么有需求，需要解决各种兼容性问题。其实反过来，既然存在js库能解决这些兼容性问题，说明底层大部分功能还是相通的。首先想到的是事件模型，IE最早只支持冒泡，不支持捕获，event是全局变量再想到的都是一些API接口上的差异，比如event.srcElement与event.target再比如getComputedStyle与currentStyle再有就是ActiveXObject与XMLHttpRequest再能想到的就是ES3与ES5的差异，String、Array的API差异cookie localStorage基本上能想到 阅读全文

摘要： CSS3的兼容性，除了前缀、还有参数格式的区分，因为仍在变化中，不在这篇文章中讨论。很想总结一下IE 6 7 8 9 10的兼容性问题，但是我实在不喜欢IE 6 7 8，在Web开发上也很少再调整到IE 67 模式下观察，先说几点能想到的吧。IE6的一些问题，浮动间距double,不支持png透明，IE8开始支持box-sizing after伪类，遵循ES3标准，开始表现的更接近标准。IE9开始支持border-radius仍然不支持transform transition animation，flexbox开始支持SVG、Canvas，放弃了VMLIE10开始全面支持CSS3,更多的设计. 阅读全文

摘要： 前端性能优化http://www.zhangxinxu.com/wordpress/2013/04/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/总结几点：一、最最基本的CSS顶部, JS底部YUI compressor/Gzip 可替换成UglifyJsCDN 有必要的CSS Sprite Ajax可缓存二、CSS渲染、页面重绘以及回流三、降低静态资源请求数 四、资源的复用 CSS三角形 base64小图像 webFonts五、js/HTML交互相关六... 阅读全文

摘要： 参考张鑫旭博客：http://www.zhangxinxu.com/wordpress/2010/01/%E5%9B%9E%E6%B5%81%E4%B8%8E%E9%87%8D%E7%BB%98%EF%BC%9Acss%E6%80%A7%E8%83%BD%E8%AE%A9javascript%E5%8F%98%E6%85%A2%EF%BC%9F/CSS编写的误区，避免重绘，尽可能地降低回流。避免table布局,因为table布局需要进行回溯，重新计算单元格元素的高度和宽度。 阅读全文

摘要： HTML默认的表格样式之间有间隙，每次为了解决这些问题，总要在table标签里添加cellspacing和cellpadding，你是否也很厌倦这样的写法，那么有没有对应的CSS属性能达到相同的效果呢？1 2 答案是肯定的，cellspacing属性对应table的border-spacing CSS属性，但是cellpadding属性对应td的padding属性1 table{2 border-spacing:0; 3 }4 td{5 padding:0; 6 }table还有很多CSS属性可以控制，比如table-layout,border-collaspse如果你使用... 阅读全文

摘要： 某些场景需要读取 css3 transform的属性例如 transform:translate(10px,10px) rotate(-45deg);这该怎么读取呢，正则表达式？毫无疑问这很坑爹试试浏览器getComputedStyle得到的style对象中有没有这些属性，得到的只有matrix(0.866025, 0.5, -0.5, 0.866025, 0px, 0px) 这种格式没有tranlate和rotate这些细节，但是所有的transform都可以在matrix数据里运算出来，下面是代码var values = tr.split('(')[1].split( 阅读全文

摘要： 所以jser们，写代码更仔细些吧。http://www.cnblogs.com/codemood/p/3213459.html 阅读全文