一些简单的前端优化方法

1,589 阅读3分钟

CDN原理

当用户访问一个网站时, 如果没有CDN, 过程是这样的:

  1. 浏览器要向域名解析为 IP地址, 所以需要向本地DNS 发起请求
  2. 本地DNS依次向根服务器, 顶级域名服务器 ,权威服务器发起请求, 这是一个递归的过程, 得到网站服务器的IP地址
  3. 本地DNS将IP地址发回给浏览器, 浏览器向网站服务器IP地址发出请求并得到资源

如果用户访问的网站部署了CDN, 过程是这样的:

  1. 浏览器要将域名解析为IP地址, 所以需要向本地IP DNS发出请求
  2. 本地DNS依次向根服务器, 顶级域名服务器, 权限服务器发出请求, 得到全局负载均衡系统 (GSLB) 的IP地址
  3. 本地 DNS再向 GSLB 发起请求, GSLB 的主要功能是根据本地 DNS的IP地址判断用户的位置, 筛选出距离用户较近的本地负载均衡系统, 并将改系统的 SLB的IP 地址作为结果返回给本地 DNS
  4. 本地DNS将SLB的IP地址发回给浏览器, 浏览器向SLB发出请求
  5. SLB 根据浏览器请求的资源和地址,选出最优的缓存服务器发回给浏览器。
  6. 浏览器再根据 SLB 发回的地址重定向到缓存服务器。
  7. 如果缓存服务器有浏览器需要的资源,就将资源发回给浏览器。如果没有,就向源服务器请求资源,再发给浏览器并缓存在本地。

降低css选择器的复杂性

  • 浏览器读取选择器, 遵循的原则是从选择器的右边到左边读取
#block .text p {
	color: red;
}

1.查找所有的 p 元素 2.查找结果 1 中的元素是否有类名为 text 的父元素 3.查找结果 2 中的元素是否有 id 为 block 的父元素

  • css 选择器优先级
内联 > id选择器 > 类选择器 > 标签选择器

使用 transform 和 opacity 属性更改来实现动画

在css 中, transform 和 opacity 这两个属性更改不会触发重排和重绘 , 他们是可以由合成器 单独处理的属性

null , undefined , 或 undeclared 的区别

  • null 表示没有对象 , 即改处不应该有值, 转换为数值为 0, 典型用法是:
    • 作为函数的参数, 表示该函数的参数不是对象
    • 作为对象原型链的终点
  • undefined 表示缺少值, 就是此处应该有一个值, 但是还没有定义, 转换为数值为 NaN。
    • 变量被声明了, 但没有赋值时,就等于 undefined
    • 调用函数时,应该提供的参数没有提供,该参数等于undefined。
    • 对象没有赋值的属性,该属性的值为undefined。
    • 函数没有返回值时,默认返回undefined。
  • undeclared :js语法错误,没有申明直接使用,js无法找到对应的上下文。