28.正则表达式和前端性能优化

一。正则表达式

正则表达式主要用在表单验证

1.什么是正则表达式

        能让计算机读懂的字符串匹配规则

 

2.正则表达式的写法：

var re = new RegExp("规则"，"可选参数")

var re = /规则/参数

 

3.规则中的字符

a。普通字符匹配

如：/a/   匹配字符   "a"      ，      /a，b/匹配字符"a,b"

 

b。转义字符匹配

\d    匹配一个数字，即0-9

\D   匹配一个非数字，即除了0-9

\w   匹配一个单词字符（字母，数字，下划线）

\W   匹配任何非单词字符。等价于（^A-Z      a-z       0-9）

\s匹配一个空白符

\S匹配一个非空白符

\b匹配单词边界

\B匹配非单词边界

.   匹配一个任意字符

 

4.量词：对左边的匹配字符定义个数

？出现零次或一次（最多出现一次）

+出现一次或多次（至少出现一次）

*出现零次或多次

{n}   出现n次

{n，m}  出现n到m次

{n，}至少出现n次

 

5.任意一个或者范围

[abc123]   匹配"abc123"中的任意一个字符

[a-z   0-9] 匹配a到z或者0到9中的任意一个字符

 

 

6.限制开头结尾

^以紧挨的元素开头

$以紧挨的元素结尾

 

7.修饰参数

g：global ，全文搜索，默认搜索到第一个结果接停止

i：ingore  case  ，忽略大小写，默认大小写敏感

 

8.常用函数

a。test

用法：正则test（字符串）匹配成功，就返回真，否则就返回假。

b。replace

用法：字符串replace（正则，新的字符串）匹配成功的字符去替换新的字符

 

二。常用正则规则--记住常用即可，不会再去查

//用户名验证：（数字字母或下划线6到20位）

          var reUser = /^\w{6,20}$/;

//邮箱验证

          var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i;

//密码验证

          var rePass = /^[\w!@#$%^&*]{6,20}$/;

//手机号码验证

          var rePhone = /^[3458]\d{9}$/;

 

三。前端性能优化

前端代码是先从服务器下载到客户端再运行，后端的代码是直接在服务器上面跑。跑完之后再返回。

 

         从用户访问资源到资源完整的展现在用户面嵌过程中，通过技术手段和优化策略，缩短每个步骤的处理事件从而提升整个资源的访问和呈现速度。网站的性能直接会影响到用户的数量，所有前端性能优化很重要。

前端性能优化分为如下几个方面：

1.代码部署

1.代码的压缩与合并

2.图片，js，css等静态资源使用和主站不同域名地址存储，从而使得在传输资源时不会带上不必要的cookie信息。

3.使用内容分发网络CDN

4.为文件设置Last-Modified（最后一次修改的时间）  ，Expires（过期时间）节约带宽  ，Etag（时间戳）比较时间，时间内的读缓存

5.使用GZIP压缩传送

6.权衡DNS查找次数（使用不同域名会增加DNS查找）：网站访问一个地址，一开始敲得是域名，域名最终会解析成IP地址，域名到IP地址的过程是域名先去访问DNS服务器，再解析成IP地址。

7.避免不必要的重定向（加"/"）

2.编码

HTML：

1.使用结构清晰 ，简单 ，语义化标签

2.避免空的src  和  href

3.不要在HTML中缩放图片

 

CSS：

1.精简css选择器

2.把CSS放到顶部

3.避免@import方式引入样式

4.css中使用base64图片数据取代图片文件，减少请求数，在线转base64网站：https://tool.css-js.com/base64.html

5.使用css动画来取代js动画

6.使用字体图标

7.使用css  sprite（雪碧图）

8.使用svg图行

9.避免使用CSS表达式

body{

background-color:expression((new Date()).getSeconds()%2 ? "#88D4FF" : "#F08A00");

}

10.避免使用css滤镜

 

JavaScript

1.减少引用库的个数

2.使用requirejs或seajs异步加载js

3.JS放到页面底部引入

4.避免全局查找

5.使用原生方法

6.用switch语句代替复杂的if   else 语句

7.减少语句数，比如说多个变量声明可以写成一句

8.使用字面量表达式来初始化数组或者对象

9.使用innerHTML取代复杂的元素注入

10.使用事件代理（事件委托）

11.避免多次访问dom选择集

12.高频触发事件设置使用函数节流

13.使用web Storage 缓存数据。