随笔分类 - Front-end technology series
摘要：模板的工作原理可以简单地分成两个步骤：模板解析（翻译）和数据渲染。这两个步骤可分别部署在前端或后端来执行。如果放在后端执行，则是像Smarty，FreeMarker这样的后端模板引擎，而如果放在前端来执行，则是我们要探讨的前端模板。 FreeMarker是一个模板引擎，一个基于模板生成文本输出的通用
阅读全文
摘要：一.设备像素比(device pixel ratio ) 视觉稿 在前端开发之前，我们会有一个psd文件，称之为视觉稿。对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点： 首先，选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480，现在更多的是iphone6
阅读全文
摘要：本文介绍了布局解决方案，主要分为三个部分来讲居中布局，多列布局，等列布局。每个部分又分为定宽和不定宽的讨论。
阅读全文
摘要：HTML页面的加载
HTML页面的加载实际上是基于http过程+浏览器对数据的解析渲染。
http协议的请求过程是基于TCP协议的。http是要基于TCP连接基础上，简单的说，TCP单纯建立连接，不涉及任何我们需要请求的实际数据，简单的传输。http基于TCP建立的连接来收发数据，即实际应用上来的。
一个HTML页面的加载的交互流程大致如下：
0.输入URL
1.解析URL
2.构造并发送HTTP请求
服务器的永久重定向响应（从 http://example.com 到 http://www.example.com）
浏览器跟踪重定向地址
3.HTTP报文传输过程
4.服务器接受并处理HTTP报文
5.服务器构造并发送响应报文（传输过程略）
6.浏览器接收报文，并开始构建页面
7.（可选）浏览器发送嵌入在 HTML 中的静态资源如图片、音频、视频、CSS、JS等等）
8.（可选）浏览器发送Ajax异步请求（处理过程略）
9.页面构建完成
阅读全文
摘要：常用的调试工具有Chrome浏览器的调试工具，火狐浏览器的Firebug插件调试工具，IE的开发人员工具等。它们的功能与使用方法大致相似。Chrome浏览器简洁快速，功能强大这里主要介绍Chrome浏览器的调试工具。包括Chrome调试工具Element的使用，Chrome调试工具Source的使用，Chrome调试工具TimeLine的使用，Chrome调试工具Profiles的使用，Chrome调试工具Resource的使用，Chrome调试工具Audits的使用，Chrome调试工具Console的使用以及Chrome手机等设备模式的使用。
阅读全文
摘要：常用的调试工具有Chrome浏览器的调试工具，火狐浏览器的Firebug插件调试工具，IE的开发人员工具等。它们的功能与使用方法大致相似。Chrome浏览器简洁快速，功能强大这里主要介绍Chrome浏览器的调试工具。包括Chrome调试工具Element的使用，Chrome调试工具Source的使用，Chrome调试工具TimeLine的使用，Chrome调试工具Profiles的使用，Chrome调试工具Resource的使用，Chrome调试工具Audits的使用，Chrome调试工具Console的使用以及Chrome手机等设备模式的使用。
阅读全文
