作者 | 开课吧无忧

编辑 | 开三金

来源 | 开课吧前端团队（ID:KKBWeb）

三金有话说：

为了满足前端萌新粉丝的需求，这篇文章还是非常非常的接地气，很适合新手前端阅读~前端基础较为扎实的“老前端”玩家不要心灰意冷，三金会继续为大家带来实用有效的深层前端干货！

一、Selenium 的介绍

Selenium 是一个 Web 自动化测试工具，最初是为网站自动化测试而开发，Selenium 可以直接调用浏览器，它支持所有主流的浏览器（包括 PhantomJS 这些无界面的浏览器），可以接收指令，让浏览器自动加载页面，获取需要的数据，甚至页面截屏等。

jQuery 的选择器可谓之强大无比，这里简单地总结一下常用的元素查找方法

$("#myELement") 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素

$("div") 选择所有的div标签元素，返回div元素数组

$(".myClass") 选择使用myClass类的css的所有元素

CSS选择符分类

1.标签选择器(如：body,div,p,ul,li)

本节我们来学习

1-选择器，CSS选择器用于选择你想要的元素的样式的模式；

2-选择器位置，在head标签包裹，title结束标签后；

3-基础选择器：

3-1标签-选择器：

浏览器显示如下图：

代码内容如下图：

3-2类-选择器

浏览器显示如下图：

CSS选择器（选择符）就是根据不同需求把不同的标签选出来，这就是选择器的作用。 简单来说，就是选择标签用的。

选择器分为基础选择器和复合选择器两个大类，这里先介绍一下基础选择器。

• 基础选择器是由单个选择器组成的
• 基础选择器又包括：标签选择器、类选择器、id 选择器和通配符选择器

前言

在工作中，有时会遇到需要一些不能使用分页方式来加载列表数据的业务情况，对于此，我们称这种列表叫做长列表。比如，在一些外汇交易系统中，前端会实时的展示用户的持仓情况(收益、亏损、手数等)，此时对于用户的持仓列表一般是不能分页的。

在高性能渲染十万条数据(时间分片)一文中，提到了可以使用时间分片的方式来对长列表进行渲染，但这种方式更适用于列表项的DOM结构十分简单的情况。本文会介绍使用虚拟列表的方式，来同时加载大量数据。