JS类型判断

JS类型判断

了解HTTP缓存

在前端开发中,缓存有利于加快网页的加载速度,也是一种提高前端网站性能的常用方法。同时缓存可以被反复利用,减少流量和带宽的开销。

重用已获取的资源能够有效的提升网站与应用的性能。Web 缓存能够减少延迟与网络阻塞,进而减少显示某个资源所用的时间。借助 HTTP 缓存,Web 站点变得更具有响应性。(MDN HTTP缓存)

JS控制GIF动画

JS控制Gif动画

思想: 使用canvas获取Gif第一帧图片,静止的时候使用图片,播放的时候使用Gif。

AJAX异步请求

AJAX: Asyncchronous Javascript + XMLL
Ajax的技术核心是XMLHttpRequest对象,简称XHR。

XMLHttpRequest对象(XHR)

以异步的方式从服务器获取数据,获取新数据后,通过DOM的方式将新数据插入到页面中。

JS原生图片懒加载

图片懒加载

懒加载是前端优化的一种技术,旨在用户进入页面后,当滚动页面将要到达图片位置时才加载图片。
加快页面加载速度,极大的提升了用户体验,也避免了用户进入页面之后就发送n多个图片请求,服务器吃不消啊!

实现原理

先将图片的 src 设置为空或者小的图片,将真实的图片地址存在 img 的自定义属性中,比如 data-src 中,等到页面滚动至图片位置时将真实图片位置复制给 src 属性。

  1. 页面中的 img 元素,如果没有 src 属性,浏览器就不会发出请求去下载图片
  2. 用户滚动页面至图片位置时,img 元素获取到真正的路径后,开始发送请求加载图片
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×