标签目录：浏览器

2014
11-11

浏览器的渲染原理简介

看到这个标题大家一定会想到这篇神文《HowBrowsersWork》，这篇文章把浏览器的很多细节讲得很细，而且也被翻译成了中文。为什么我还想写一篇呢？因为两个原因，1）这篇文章太长了，阅读成本太大，不能一口气读完。2）花了大力气读了这篇文章后可以了解很多，但似乎对工作没什么帮助。所以，我准备写下这篇文章来解决上述两个问题。希望你能在上班途中，或是坐马桶时就能读完，并能从中学会一些能用在工作上的东西。浏览器工... 继续阅读 >

2014
11-11

Javascript 装载和执行

一两个月前在淘宝内网里看到一个优化Javascript代码的竞赛，发现有不少的人对Javascript的执行和装载的基础并不懂，所以，从那天起我就想写一篇文章，但一直耽搁了。自上篇《浏览器渲染原理简介》，正好也可以承前启后。首先，我想说一下Javascript的装载和执行。通常来说，浏览器对于Javascript的运行有两大特性：1）载入后马上执行，2）执行时会阻塞页面后续的内容（包括页面的渲染、其它资源的下载）。于是，如果有多个js文件... 继续阅读 >

2014
11-11

如何在浏览器端加密——使用Javascript加密解密

在创建Opal网站时，我们所面临的挑战，是寻找在浏览器中加密解密的可靠方法。这篇文章描述了浏览器端加密所面临的难题，并指出了近期的科技进步所提供的一种解决方案。在Web应用中加密的三种选择只有JavaScript才是所有浏览器都支持的语言。与Opal同类的Web应用使用JavaScript编写，以便于在任何现代浏览器上运作。如果这些应用要使用加密函数，那么JavaScript必须能够访问到它们。目前，要把加密函数暴露给浏览... 继续阅读 >

2014
11-11

如何利用 Bootstrap 进行快速 Web开发

入门下载已编译的Bootstrap数据包（可以去这里下载）。我在本文中使用的是V2.3.2。下载内容包括Bootstrap的关键元素CSS，以及一些有用的图像和JavaScript文件。您可以根据我在文中的描述为Web页面提供HTML。Bootstrap文档中不包含框架支持的许多设计选项的样例HTML。但是Bootstrap文档页面（尽管其本身已说明了Bootstrap的灵活性）还不足以解释真正起作用的基本设计原则。响应式Web设计查看Web页面的设备... 继续阅读 >

2014
11-11

Web 开发者必备的 14 个 JavaScript 音频库

网页设计可能是现在最有趣的领域之一了。这块的东西对所有的人，不管是知识储备里有料没料的，都敞开大门，机会多多。 其最大的特点就是随着时间的推移，实践的深入，你可以慢慢学习着成为一个大鸟。 涉足这个领域，Google将会是你最好的导师，同时她也将毫无偏颇的对你的水平进行评价。设计并不全是铁定的要为应用程序的创建或者编程语言的一些逻辑应用进行大量的编码工作。她更像是创造力同逻辑代码的结合，从而可以使您开发出... 继续阅读 >

2014
11-11

如何在电脑上测试手机网站（一）—— Chrome 篇

chrome模拟手机总共有四种方法，原理都一样，通过伪装User-Agent，将浏览器模拟成Android设备。以下标星的为推荐方法。1.新建Chrome快捷方式右击桌面上的Chrome浏览器图标，在弹出的右键菜单中选择“复制”，复制一个图标副本到桌面。右击该副本，选择“属性”，打开相应的对话框，在“目标”文本框的字符后面添加以下语句：“–user-agent=”Android””，如下图：意user前面是两个“-”，并且“chrome.exe”与“–user”之间... 继续阅读 >

2014
11-11

如何在电脑上测试手机网站（二）—— Firefox 篇

1.修改user-agent和chrome一样安装插件修改user-agent的方法（参考上一篇文章：如何在电脑上测试手机网站（一）——Chrome篇）1）下载firefox。点击菜单，工具-〉附加组件-〉获取附加组件。2）查询安装三个组件：wmlbrowser、XHTMLMobileProfile以及UserAgentSwitcherwmlbrowser、XHTMLMobileProfile是用来兼容解析WAP网页格式的组件。UserAgentSwitcher是模拟UserAgent(UA)的组件，就是让浏览器假装成手机UA头... 继续阅读 >

2014
11-11

如何在电脑上测试手机网站（三）—— Opera 篇

1.修改user-agent和chrome和firefox类似，可自行安装插件，自opera12之后，opera改用webkit内核，故可安装chrome的插件，也可自行在opera的商店中搜索插件UserAgentChanger下载： https://addons.opera.com/zh-cn/extensions/details/user-agent-changer/?display=en2.OperaMobileEmulator+dragonfly*下载适合自己的版本，安装完毕会开如下界面：左侧选择平台，右侧选择参数，选择完毕点击启动，如下的几面，用过手机... 继续阅读 >

2014
11-11

Opera 16——功能优秀性能出众的小众网页浏览器

Chrome 最近春风得意，搞得Firefox和Opera显得黯淡了很多。虽然Opera并不大众，但它也并没有就此气馁，而是一直保持在创新与努力。网络在进化，你的浏览器也需要进化，你准备好了吗？Opera 是一款高性能且完全免费的浏览器，除了支持Windows之外，还支持 Linux 以及苹果 Mac 操作系统以及 Android、iOS 版本。它拥有众多创新特性，速度快、安全性高，提供了便捷的鼠标手势与快捷键，整合搜索引擎、多标签页、网页拨号... 继续阅读 >

2014
11-11

Jay Huang：我的亚马逊面试经验

这一切都从我还在SAP工作的时候开始。几个同行注意到亚马逊在耶鲁镇开了一家新办公室。我记得应该是在2013年1月左右吧。最初我并不是很感兴趣，但是当我听别人说了好几次之后，我仔细考虑了一下，觉得应该没什么坏处。我将在四月底离开SAP，而如果亚马逊比较合适的话，我可能会去那。网站上的职位列表很少，所以我申请了在温哥华的“Web开发工程师”职位，因为我觉得这个职位最为符合我的技能和经验。当时我并不那么积极的寻找工... 继续阅读 >

2014
11-11

为什么浏览器User-agent总是有Mozilla字样——User-agent String里的历史故事

你是否好奇标识浏览器身份的User-Agent，为什么每个浏览器都有Mozilla字样？Mozilla/5.0(WindowsNT6.1;WOW64)AppleWebKit/537.36(KHTML,likeGecko)Chrome/27.0.1453.94Safari/537.36Mozilla/5.0(Linux;U;Android4.1.2;zh-tw;GT-I9300Build/JZO54K)AppleWebKit/534.30(KHTML,likeGecko)Version/4.0MobileSafari/534.30Mozilla/5.0(WindowsNT6.1;WOW64;rv:20.0)Gecko/20100101Firefox/20.0Mozilla/5... 继续阅读 >

2014
10-16

DIV+CSS兼容所有浏览器的技巧大全

DIV+CSS兼容所有浏览器的技巧大全CSS技巧1.div的垂直居中问题vertical-align:middle;将行距增加到和整个DIV一样高line-height:200px;然后插入文字，就垂直居中了。缺点是要控制内容不要换行? 2.margin加倍的问题?设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;?例如：?<#divid=”imfloat”>?相应的css为?#IamFloat{?float:left;?margin:5px;... 继续阅读 >

2014
10-16

CSS中各个浏览器兼容的解决办法

1.CSS中几种浏览器对不同关键字的支持，可进行浏览器兼容性重复定义 !important可被FireFox和IE7识别 *可被IE6、IE7识别 _可被IE6识别 *+可被IE7识别区别IE6与FF： background:orange;*background:blue; 区别IE6与IE7： background:green!important;background:blue; 区别IE7与FF： background:orange;*background:green; 区别FF，IE7，IE6： background:orange;*b... 继续阅读 >