作者：shichuan

文末彩蛋等你揭晓

前言

在 Web 自动化测试和开发中，页面元素定位是与页面交互的基础。下文是常见的10种WEB页面元素定位方式及其特点：

1.ID 定位

先来看两组数据，下图为iOS设备分辨率分布，图中包含5种不同分辨率，每种分辨率都有相当多比例的用户群体。

再来看看android设备分辨率分布。这里边android设备只展示有9种屏幕分辨率，每一种分辨率都拥有一定比例的用户群体。与ios合起来至少有10种分辨率，需要页面支撑。

如果按照目前网站设计中多站点方式去支持如此众多的视口，开发和维护工作是非常沉重的。需要更好的设计理念来支撑如此众多的视口。其实在2010年5月，Ethan Marcotte就提出了响应式布局概念。它是将流式栅格布局，弹性图片，弹性媒体和媒体查询等已有的技术整合起来，目的是为了网页可以不同设备视口。真正的响应式设计方法不仅是根据视口大小改变网页布局，而且要从整体上颠覆当前设计网页的方法.以往先是针对桌面电脑进行固定宽度设计，然后将其缩小并针对小屏幕进行内容重排。

前言

在日常开发中，有很多场景需要我们去做好前端优化，为了防止遗忘，加深记忆，今天参阅了一些资料以及自己的一些总结，梳理出来15条优化技巧。

1）创建新节点

　　createDocumentFragment() //创建一个DOM片段

　　createElement() //创建一个具体的元素

　　createTextNode() //创建一个文本节点

2）添加、移除、替换、插入

　　appendChild() //添加

　　removeChild() //移除

　　replaceChild() //替换

　　insertBefore() //插入