淘宝网性能优化之借鉴——webp及Bigpipe

前言

说到性能优化,我博客前面文章讲了不少,其实性能优化做的好坏,直接体现前端开发人员的水平。因此,很多面试中基本上都会提及这一点。今天主要借鉴淘宝网性能优化方式之一webp及Bigpipe 进行简单的讲解。

webp

打开淘宝网,假如你是chrome浏览器,你会发现,所有图片都是webp结尾的,淘宝网图片运用了webp。假如你是safari浏览器,看到图片就是jpg或者png了,淘宝网自动判断浏览器支持不支持webp,假如支持,则输出相应的图片格式!

看下图:

enter image description here

[js工具]js提取中文拼音首字母方法

前言

本文主要记录如何用js提前中文拼音首字母的方法。封装一个函数,假如有需要的,可以直接拿去用。

原理

主要是根据中文的unicode码来进行的。主要是在收集的中文范围内查找,大家可以多收集一些。假如中文是多音字,那可能有点坑了!

转载几张前端流程图,囊括前端js基础知识

前端流程图

同事在群里分享的前端流程图,看到知识比较全面,发到网上共享一下。同事可能也是网上找来的,假如要署名或者侵犯版权,请联系!

这几张流程图,基本上是囊括了前端js大部分基础知识,对基础知识的温故而知新大有帮助,感兴趣的可以下载一下!

一、javascript数据类型

总结js常用的dom操作(js的dom操作API)

前言

很多同学用惯了jquery操作dom,让他们用js操作的时候,常常力不从心,本文总结了常用的js的dom操作方法,供大家翻阅!其实说起js操作dom,我很久很久之前有篇文章,jquery属性的相关js实现方法,里面囊括了很大一部分js操作dom的常用方法,但是不是很系统。不能说是API,今天来系统总结一下!

节点查找API

document.getElementById :根据ID查找元素,大小写敏感,如果有多个结果,只返回第一个;

document.getElementsByClassName :根据类名查找元素,多个类名用空格分隔,返回一个 HTMLCollection 。注意兼容性为IE9+(含)。另外,不仅仅是document,其它元素也支持 getElementsByClassName 方法;

document.getElementsByTagName :根据标签查找元素, * 表示查询所有标签,返回一个 HTMLCollection 。

document.getElementsByName :根据元素的name属性查找,返回一个 NodeList 。

document.querySelector :返回单个Node,IE8+(含),如果匹配到多个结果,只返回第一个。

document.querySelectorAll :返回一个 NodeList ,IE8+(含)。

document.forms :获取当前页面所有form,返回一个 HTMLCollection ;