摘要：
渲染引擎渲染引擎的职责是……渲染，也就是把请求的内容显示到浏览器屏幕上。默认情况下渲染引擎可以显示HTML，XML文档以及图片。 通过插件（浏览器扩展）它可以显示其它类型文档。比如使用PDF viewer插件显示PDF文件。我们会在一个专门的章节讨论插件与扩展。在这一节我们将专注渲染引擎的主要用途——显示用CSS格式化的HTML与图片。各种渲染引擎我们提到的Firefox, Safari两种浏览器构建于两种渲染引擎之上：Firefox使用Gecko —— Mozilla自家的渲染引擎；Safari 和 Chrome 都使用 Webkit。Webkit 是一个开源的渲染引擎，它源自Linux平台 阅读全文
随笔分类 - 前端工具、优化、安全
页面呈现、重绘、回流。
2014-02-12 11:17 by sniper007, 381 阅读, 收藏, 编辑
摘要：
页面呈现流程 在讨论页面重绘、回流之前。需要对页面的呈现流程有些了解，页面是怎么把html结合css等显示到浏览器上的，下面的流程图显示了浏览器对页面的呈现的处理流程。可能不同的浏览器略微会有些不同。但基本上都是类似的。 1. 浏览器把获取到的html代码解析成1个Dom树，html中的每个tag都是Dom树中的1个节点，根节点就是我们常用的document对象( tag)。dom树就是我们用firebug或者IE Developer Toolbar等工具看到的html结构，里面包含了所有的html tag，包括display:none隐藏，还有用JS动态添加的元素等。 2. 浏览器把... 阅读全文
什么是 dynaTrace Ajax
2014-02-12 11:16 by sniper007, 1555 阅读, 收藏, 编辑
摘要：
随着 jQuery、Dojo、YUI 等框架的兴起让构建 Web2.0 应用更加容易，但随之带来的定位等应用问题也越来越难，尤其是与性能相关的。dynaTrace Ajax Edition是一个强大的底层追踪、前端性能分析工具，该工具不仅能够记录浏览器的请求在网络中的传输时间、前端页面的渲染时间、DOM 方法执行时间以及 JavaScript 代码的解析和执行时间，还可以跟踪 JavaScript 从执行开始，经过本地的 XMLHttpRequest、发送网络请求、再到请求返回的全过程。dynaTrace Ajax 目前有两个版本，免费版和商业版，它们之间的区别可查看版本比较，本文主要是针对免 阅读全文
zz VS2010配色方案
2013-11-07 11:01 by sniper007, 277 阅读, 收藏, 编辑
摘要：
http://studiostyles.info这个网站专门为vs 2005, vs 2008, vs2010提供配色方案下载。网站首页罗列出大量的配色方案，都附有缩略图以及rated(评估)，dls(下载数)，views(浏览数)。可以方便的找到优秀的配色方案。当然，自己喜欢的才是最优秀的。配置方法： 进入喜欢的方案后，如决定要下载，注意选择自己的vs版本。 下载的是一个vssettings文件。 导入步骤： 工具------------导入和导出设置------------导入选定的环境设置------------否，仅导入新设置------------然后“浏览”选刚 刚下载的vsset 阅读全文
HTML&CSS 学习网站收藏【转】
2013-10-26 17:29 by sniper007, 276 阅读, 收藏, 编辑
摘要：
转自:http://lab.linxz.de/some_url.htmlhtml & CSShttp://www.adobe.com/devnet/html5/articles/css3-regions.htmlhttp://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/http://www.maratz.com/blog/archives/2013/01/15/offsetting-an-html-element-in-a-flexible-container/http://www.jon 阅读全文
前端开发中，对图片的优化技巧有哪些？（比如淘宝首页的图片）
2013-10-15 18:06 by sniper007, 445 阅读, 收藏, 编辑
摘要：
1. 去掉无意义的修饰。嗯，我会瞎说吗？除了内容图片，其他的图片的作用是修饰，也就是对于传达信息来说并非本质性的。最大的优化就是压根不要图片！所以在优化之前要做的，首先是确认设计，设计本身是否需要用那么多图片？还是说可以更简洁？2. 不用图片。嗯，切图是一件扯淡的事情！不要隔靴搔痒了少年，直接使用CSS替代图片来实现修饰效果吧！如半透明、边框、圆角、阴影、渐变等，在当前主流浏览器中都可以用CSS达成。将来CSS滤镜得到广泛支持后，还可以做到alpha混合、正片叠底等各种效果。3. 使用矢量图替代位图。对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SVG了， 阅读全文
毫秒必争，前端网页性能最佳实践【转】
2013-10-10 17:06 by sniper007, 277 阅读, 收藏, 编辑
摘要：
原文出处： 微软互联网开发支持你愿意为打开一个网页等待多长时间？我一秒也不愿意等。但是事实上大多数网站在响应速度方面都让人失望。现在越来越多的人开始建立自己的网站，博客，你的网页响应速度如何呢？在这篇文章中我们来介绍一下提高网页性能的最佳实践，以及相应的问题解决方案，让站长或者即将要成为站长的朋友了解如何去测试和提高网站响应速度，对自己的网站更有信心。最佳实践最佳实践我们引用的来自yahoo前端性能团队总结的35条黄金定律。原文猛击这里。下面我们分门别类将每条的关键点总结一下。网页内容减少http请求次数减少DNS查询次数避免页面跳转缓存Ajax延迟加载提前加载减少DOM元素数量根据域名划分. 阅读全文
【http】HTTP请求方法 之 OPTIONS
2013-10-08 14:19 by sniper007, 3066 阅读, 收藏, 编辑
摘要：
OPTIONS方法是用于请求获得由Request-URI标识的资源在请求/响应的通信过程中可以使用的功能选项。通过这个方法，客户端可以在采取具体资源请求之前，决定对该资源采取何种必要措施，或者了解服务器的性能。 该请求方法的响应不能缓存。 如果这个OPTIONS请求包含一个 正文（有Content-Length或Transfer-Encoding存在），则必须有Content-Type来指定媒体类型。虽然规范里没有定 义这种正文的用法，但是HTTP将来的扩展可能会用它来查询服务器上更详细的信息。不支持该扩展的服务器可以忽略该请求正文。 如果该URI是一个星号（“*”），OPTIONS... 阅读全文
一月收集几个有用的谷歌Chrome插件
2013-09-12 10:54 by sniper007, 405 阅读, 收藏, 编辑
摘要：
谷歌Chrome自推出以来已经从一个简单的浏览器演变成一个复杂的浏览器，这得益于根据浏览器写出的非常有用和强大的扩展。作为一名开发人员，我们关注的是网页设计和开发部分的那些插件对我们有帮助，几个比较熟悉的插件像Firebug Lite和Web Developer大家都知道，我就不扯了，今天扯一下那些你可能不知道的对于开发非常有帮助的插件，在此做个总结，看看你用过几个，我敢肯定你会发现它们非常有用。Refresh Monkey在设定的时间间隔自动刷新页面。监视页面的变化，如果有变化的会通知你。KodingKoding（又名Kodingen）是一个在线的开发环境程序，功能包括代码编辑器，云主机，数 阅读全文
【前端工具】 在 Windows 下安装 GruntJS——教程（译）
2013-07-19 11:23 by sniper007, 334 阅读, 收藏, 编辑
摘要：
在你安装 Grunt.js 之前你需要先安装 Node.js。对于本教程而言，我已经安装好了node.js v0.10.0。我将要安装Grunt.js v0.4.1。警告：如果你已经安装了 Grunt.js 0.3.x 或者更低的版本，请先卸载它。Grunt 的命令行界面为了安装 grunt.js，我们需要要安装好全局的 Grunt 命令行界面（CLI），当前的 CLI 版本是 1.0.6。打开 Windows 命令窗口（CMD）并输入以下指令：1 npm install grunt-cli -g这条指令会把 grunt 添加到你的系统环境变量，然后你就可以在任何目录运行 grunt 了。Wi 阅读全文
【前端安全】 web前端安全编码（模版篇）【转】
2013-07-18 17:51 by sniper007, 197 阅读, 收藏, 编辑
摘要：
在web的开发的开发过程中，前端总是在处理后端打的各种变量，变量可以包含着中的各种各样的字符，如果不对这些字符进行”特殊“处理的话，轻者导 致页面不正常的显示，潜入了其他的东西，亦即页面挂了，或者弹出不应该弹出的东西，这些都是我们不期望看到的，重者可能导致密码泄露，网站的访问量突然猛 增，服务器挂掉。 在前端的开发中，涉及到以下几种语境： 1）直接显示在页面上， eg：{%username%}, 2）在script 标签中，eg ： 3）在页面事件中，eg:334455 4）在innerHTML 的语境中，eg: 5）在页面链接的url中：eg： 6）提交url参数处理 7）... 阅读全文
【前端工具】seajs打包部署工具spm的使用总结
2013-07-15 16:27 by sniper007, 478 阅读, 收藏, 编辑
摘要：
相信使用seajs的好处大家都是知道的，接触seajs好像是在半年前，当时还不知道页面阻塞问题，这里不带多余的话了。seajs实现了模块化的开发，一个网站如果分了很多很多模块的话，等开发完成了，发现有很大一堆的js需要加载，即使使用了seajs优化加载 了，但是过多的http请求会造成服务器的压力，影响加载等等。这时候我们需要将模块进行压缩和合并。这时候spm工具派上用场了。1.安装spmspm工具是基于node（nodejs的服务平台）的,因此我们需要先安装 node 和 npm 下载地址：http://nodejs.org/#download.下载完成后安装即可。node安装完成后，找到c 阅读全文
【前端工具】 git windows下搭建全过程
2013-07-15 16:23 by sniper007, 478 阅读, 收藏, 编辑
摘要：
1、 Git，Windows下的Git，地址：http://msysgit.googlecode.com/files/Git-1.7.9-preview20120201.exe（方便下载）2 、SSH，可以用CopSSH，地址：http://sqmcc2.newhua.com/down/Copssh_4.1.0_Installer.zip（方便下载）3、git、CopSSH安装可以参照（注意：看图片就好了其它的无视）：http://www.codeproject.com/Articles/296398/Step-by-Step-Setup-Git-Server-on-Windows-with- 阅读全文
【前端工具】[转载]Sublime Text 2 快捷键用法大全
2013-05-13 18:45 by sniper007, 217 阅读, 收藏, 编辑
摘要：
Ctrl+D 选词 （反复按快捷键，即可继续向下同时选中下一个相同的文本进行同时编辑） Ctrl+G 跳转到相应的行 Ctrl+J 合并行（已选择需要合并的多行时） Ctrl+L 选择整行（按住-继续选择下行） Ctrl+M 光标移动至括号内开始或结束的位置 Ctrl+T 词互换 Ctrl+U 软撤销 Ctrl+P 查找当前项目中的文件和快速搜索；输入 @ 查找文件主标题/函数；或者输入 : 跳转到文件某行； Ctrl+R 快速列出/跳转到某个函数 Ctrl+K Backspace 从光标处删除至行首 Ctrl+KB 开启/关闭侧边栏 Ctrl+KK 从光标处删除至行尾 Ctrl+KT 折叠属 阅读全文
【前端工具】[转载]sublime Text2破解方法.
2013-05-13 18:44 by sniper007, 200 阅读, 收藏, 编辑
摘要：
Sublime Text 2 是一款非常不错的代码编辑器，特别是UI界面和速度。但这也意味着这款软件的售价达到了50美元左右。虽然它也是一款免费的软件，但免费版的会不定期弹出付费购买页面。最近在网上找到一些资料，介绍一下Sublime Text 2 2181版本的破解及注册方法。1.将sublime_text.exe文件复制一份并重命名为sublime_text_backup.exe做一个备份2.用Sublime Text 2打开sublime_text_backup.exe文件，搜索 3342 并修改为 3242 然后保存3.将原来的sublime_text.exe文件删除，将修改保存过的s 阅读全文
Webstorm快捷键
2013-03-20 14:21 by sniper007, 185 阅读, 收藏, 编辑
摘要：
1.ctrl+shift+n:打开工程中的文件(类似于eclipse中的ctrl+shift+R)，目的是打开当前工程下任意目录的文件。2.ctrl+j:输出模板3.ctrl+b:跳到变量申明处4.ctrl+alt+T:围绕包裹代码(包括zencoding的WrapwithAbbreviation)5.ctrl+[]:匹配{}[]6.ctrl+F12:可以显示当前文件的结构7.ctrl+x: 剪切(删除)行，不选中，直接剪切整个行，如果选中部分内容则剪切选中的内容8.alt+left/right:标签切换9.ctrl+r:替换10.ctrl+shift+up:行移动11.shift+alt+u 阅读全文
github报错 please open the options menu from the dashboard and update your name and email
2013-03-08 17:19 by sniper007, 338 阅读, 收藏, 编辑
摘要：
只用GitHub做代码共享以来，深深地沉醉于它所提供的便利，今天换了一台电脑，在重新安装GitHub完，然后提交代码的时候，提交失败了，提示了“please open the options menu from the dashboard and update your name and email”的提示，是不是很莫名其妙？我明明已经登陆了啊? 其实问题出在新安装的github上，你需要制定提交人的名字和邮箱，点击这里然后填写name和email 阅读全文
【http】301、404、200、304等HTTP状态
2012-09-19 17:24 by sniper007, 324 阅读, 收藏, 编辑
摘要：
在网站建设的实际应用中，容易出现很多小小的失误，就像mysql当初优化不到位，影响整体网站的浏览效果一样，其实，网站的常规http状态码的表现也是一样，Google无法验证网站几种解决办法，提及到由于404状态页面设置不正常，导致了google管理员工具无法验证的情况，当然，影响的不仅仅是这一方面，影响的更是网站的整体浏览效果。因此，比较清楚详细的了解http状态码的具体含义，对于一个网站站长来说，这是很有必要俱备的网站制作基础条件。如果某项请求发送到您的服务器要求显示您网站上的某个网页（例如，用户通过浏览器访问您的网页或 Googlebot 抓取网页时），服务器将会返回 HTTP 状态码响应 阅读全文
【http】使用浏览器Cache和http状态码304实现的客户端缓存
2012-09-19 17:22 by sniper007, 955 阅读, 收藏, 编辑
摘要：
Cache就是浏览器的缓存技术，大家肯定不陌生，浏览器在每次加载一个文件的时候，都要去自己的缓存文件夹里面去查找是否存在可用缓存，如果存在，则不 再去服务器下载而直接使用本地内容，这是一个很好的节省服务器性能和流量的方式，在网站不做任何设置的情况下，浏览器会根据用户的设置来确定是否使用缓 存，可见浏览器的“Internet选项”的“浏览历史纪录”的“设置”部分。 304是一个用处和Cache相同的东西，这个状态码的含义是“服务器端没有更新”，也就是说客户端的文件版本是最新的，他的用法是这样的： 1.当用户首次请求该文件的时候，通过HTTP HEAD的Last-Modified字段将该文件的.. 阅读全文
【IETESTER】ietester已停止工作_BUG修复
2012-09-04 14:22 by sniper007, 728 阅读, 收藏, 编辑
摘要：
在弹出的IETester己停止工作的下面有一个“查看详细”，下面会报告出错误的详细信息。其中故障模块名称为"jsproxy.dll".而jsproxy.dll是负责http代理处理的。所以问题应该发生在代理上。解决方法： 打开浏览器中，点击菜单：工具>Internet选项>连接>局域网设置去掉“自动检测设置”√，即可！ 阅读全文