目录存档: 因特网

CSS中的属性选择器

css 选择器 casperjs有句谚语叫“条条大路通罗马”,本意是说到一个城市可能有许多路径可选。对于CSS选择器也是一样。使用HTML元素中的不同特征点,可以组合出唯一确定某节点的许多种定位方案。有些CSS选择器可能在网页的CSS样式表中很少有机会出场,但在复杂页面的JS脚本中,有可能会用到这些选择器,来对网页的DOM树进行操作。比如网易股票网页(http://money.163.com/stock/#from=stock_index)中有这么一句代码:

继续阅读 »

用CasperJS抓取京东的价格数据

casperjs 瀑布流初学CasperJS,很多问题困惑不解。比如京东的价格数据采集。打开一个有商品的京东页面。在Chrome中检查元素,可以看到有价格数据。但如果选择查看页面源码,就会发现价格的位置是空的。查看页面源码功能可能只显示从服务器获得的HTML文件本身,所以这里价格数据为空也正常。但是CasperJS不是可以执行JS渲染吗?为什么在CasperJS里抓取这个价格数据,甚至在设置了几十秒的延迟之后,仍然是空呢?

继续阅读 »

CasperJS中querySelector使用的一些问题

casperjs phantomjs queryselectorCasperJS是PhantomJS(一个Webkit内核的无界面浏览器)和SlimerJS(对应于Gecko内核)的一个封装,用于简化一些操作和功能调用。虽然CasperJS主要应用场景是Web测试,但它也常常用于数据抓取。CasperJS有助于解决网页上JavaScript渲染的问题。因为JavaScript和Ajax常常用来改变HTML的DOM结构,导致实际页面内容和从Web服务器直接抓取到的HTML文件并不一致。这是很多HTML操作库难于彻底解决的问题。

继续阅读 »

浏览器中元素的定位类型

浏览器 定位网页中元素的定位用由position属性确定,分为绝对定位,相对定位。除此之外还有浮动定位。position的取值有staic,absolute,fixed,relative等几种,但static是默认值,而fixed值尚未支持。CSS的float属性用于指定网页元素浮动的方向,任何元素都可以浮动,而且浮动元素会生成一个block型的盒子。以下是几种定位的图例:

继续阅读 »

浏览器中CSS的盒模型

浏览器 盒 模型首先是CSS中画布的概念,根据CSS2规范,名词“画布”描述为“格式化的结构渲染所用的空间”—也就是浏览器绘制内容的地方。画布在空间的每个维度上都是无限的,但浏览器会基于视口的尺寸选择一个初始的宽度。根据http://www.w3.org/TR/CSS2/zindex.html,画布在嵌套时是透明的,否则会使用这个浏览器指定的颜色。

继续阅读 »

浏览器的绘制阶段

浏览器 绘制在浏览器的绘制阶段,会遍历渲染者树,并调用渲染者的“paint”方法在屏幕上显示内容。绘制需要用到UI基础组件。本章介绍有关UI的内容。象布局一样,绘制也可能是全局的—整棵树都被绘制–或者是增量的。在增量绘制过程中,某些渲染者发生了改动却没有影响整棵树。改变的渲染者在屏幕上重画它的客户区域。这会导致OS把它看成个“脏”区域,然后产生了“paint”事件。OS会聪明的完成它,把几个相连的区域一并处理。

继续阅读 »

浏览器的布局

浏览器 布局下来就是浏览器的布局过程。当渲染者被创建并且增加到树上时,它并没有位置和尺寸。计算这些值被称为布局或重排。HTML基于一个流式布局模式,意思是说大多数情况下计算位置会一遍通过。“流”中靠后的元素一般不会影响靠前的元素,所以布局可以沿文档从左到右,从上到下来处理。也有例外—例如,HTML的表格可能需要处理一遍以上。布局时的座标系统基于根框架。使用顶-左座标。

继续阅读 »

浏览器样式表的规则匹配和级联顺序

浏览器 样式 级联浏览器中CSS样式的匹配并非总是那么简单,某些情况下可能需要对规则加以处理以使匹配更容易。下面是几个样式规则的源码:一、 CSS规则,可能在外联样式表也可能在样式元素里面:p {color:blue} 二、 行内样式属性比如:<p style=“color:blue” /> 三、 HTML的可视化属性(这些属性会被映射到相应的样式规则):<p bgcolor=“blue” />。后两个很容易匹配到元素,因为元素拥有这些样式属性,HTML属性可以把元素作为键进行映射。

继续阅读 »

浏览器中使用规则树来计算样式

浏览器 样式 计算当计算某个元素的样式内容时,我们首先计算规则树里的一条路径或是使用一条已经存在的路径。接下来就开始应用路径中的规则来填充我们新的样式内容的结构。我们从路径的底部结点开始—优先级最高的(通常是最精确的选择器)并往上遍历树,直到结构填满。如果规则节点中没有找到结构的匹配,那么我们就能进行充份的优化—我们沿树而上直到发现一个节点完全匹配,然后指向它—这是最好的优化策略—整个结构都被共享。这能简化最终值的计算并能节约内存。

继续阅读 »

浏览器的样式计算

浏览器 样式建立渲染树时需要计算每个渲染对象的可视化属性。这是通过计算每个元素的样式属性来实现的。样式包含HTML中的各种来源的样式单,内联样式和可视化属性。后者被转换来匹配CSS样式属性。最基本的样式表是浏览器缺省样式表,这种样式表是页面设计者提供的。用户样式表—是由浏览器用户提供的(浏览器允许你定义你喜好的样式。例如在Firefox里,可以通过在”Firefox Profile”文件夹里放个样式文件来做到)。

继续阅读 »

第 1 页,共 4 页1234