前端小知识点
-
CSS Sprites 一种网页图片应用处理方式。他允许讲一个页面涉及到的所有零星图片包含到一张大图中,这样访问页面载入图片就不会一张一张显示。
最大的优点:能够减少网页的http请求,从而大大的提高页面的性能。
能减少图片字节,合并后的图片字节大小总是小于原来的总和
更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变,维护更方便
-
DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现
-
fixed 生成绝对定位的元素,相对于浏览器窗口进行定位
absolute 生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位
-
onfocus 获得焦点 onblur 失去焦点
-
新窗口打开网页用到_blank
-
设置readonly属性的表单控件可以获得焦点
-
上右下左 4方位顺序
-
H5的Web存储对象两个:localStorage,sessionStorage
-
html加载完毕后触发的事件:window.onload = function(){}
-
JS false==null 返回false
-
检测ip是ipv6还是ipv4
/** * @param {string} IP * @return {string} */ var validIPAddress = function(IP) { var ipv4 = /^((\d|[1-9]\d|1\d\d|2([0-4]\d|5[0-5]))\.){4}$/; var ipv6 = /^(([\da-fA-F]{1,4}):){8}$/ return ipv4.test(IP + ".") ? "IPv4" : ipv6.test(IP + ":") ? "IPv6" : "Neither"; };
-
js事件托管:事件托管是指利用时间冒泡,指定一个时间处理程序,管理某一类型的事件。
事件冒泡:在document.addEventListener的时候我们可以设置事件模型:事件冒泡,事件捕获
优点:
减少事件注册,节省内存。
简化了dom节点更新时,相应事件的更新。缺点:
利用事件冒泡的原理,不支持不冒泡的事件;
层级过多,冒泡过程中,可能会被某层阻止掉。
理论上委托会导致浏览器频繁调用处理函数,虽然很可能不需要处理。所以建议就近委托,比如在ol上代理li,而不是在document上代理li。
把所有事件都用代理就可能会出现事件误判。比如,在document中代理了所有button的click事件,另外的人在引用改js时,可能不知道,造成单击button触发了两个click事件。 -
如何提高网页加载速度:
网页加载顺序:1. DNS查找 2. 下载并渲染HTML文件 3. 下载并执行css及js组件 4. 下载图片
按提升幅度排序:
- 减少DNS查找。在DNS查找完成前,所有的文件下载都无法执行。DNS查找顺序:浏览器缓存》系统缓存》路由器缓存》ISP DNS缓存》递归搜索
- CSS优先加载,JS延迟加载。在解析HTML文件,构建DOM树时,一旦遇到link标记时,即遇到css样式表,将其下载,便可以立即构建渲染树,从而呈现页面效果。而遇到script标记,即js脚本,将立即阻塞DOM树的构建,将控制权交给JS引擎,等待JS引擎运行完毕,浏览器才会从中断的地方恢复渲染树的构建。因此我们需要将js脚本放置到页面的底部,或者让js脚本异步或延迟加载。
- 减少http请求。常用:将小图片合成为一个大图片,提升显著。
- 缩小文件。http请求中资源越大,时间越长。使用图片压缩等方式缩小文件。
- 利用缓存。避免在html文件中使用style标签和script标签。将js和css文件分离出来,便于利用缓存,提高页面的加载速度。
- 代码优化。
-
var s=''; console.log(!s); // 输出true
-
js 正则表达式:在对字符串进行操作时使用很便利。(待补充)
-
AJAX :异步js和xml(ajax应用程序可能使用xml来传输数据,但数据作为纯文本或json文本也同样常见)。优点:在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。ajax核心是XMLHttpRequest对象。
-
Promise:用于表示一个异步操作的最终完成或失败,及其结果值。一个Promise必定为以下状态之一:待定(pending),已兑现(fulfilled,或解决resolved),已拒绝(rejected)。
-
http状态码:1xx:服务器收到请求,需要请求者继续执行操作。2xx:成功,操作被成功接收并处理。3xx:重定向,需要进一步操作以完成请求。4xx:客户端错误,请求包含语法错误或无法完成请求。5xx:服务器错误,服务器在处理请求的过程中发生了错误。常见:200:OK,请求成功,一般用于GET和POST请求。201:Created,已创建,成功请求并创建了新资源。202:Accepted,已接收,已接受请求,但处理未完成。301:Moved Permanently,永久移动,请求的资源已被永久移动到新URI,返回信息会包括新URI,浏览器会自动重定向到新URI。302:Found,临时移动,与301相似,但只是临时移动。400:Bad Request,客户端请求的语法错误,服务器无法理解。401:Unauthorized,请求要求用户的身份认证。403:Forbidden,服务器理解客户端的请求,但是拒绝执行该请求。404:Not Found,服务器无法根据客户端的请求找到资源或页面。408:Request Time-out,服务器等待客户端发送的请求时间过长,超时。500:Internal Server Error,服务器内部错误,无法完成请求。
-
跨域:跨域是指浏览器允许向服务器发送跨域请求,从而克服ajax只能同源使用的限制。同源策略:指协议,域名,端口三者相同。同源导致:cookie,LocalStorage,IndexDB无法获取,DOM和js对象无法获得,ajax请求不能发送。解决方法:1.使用CORS(跨域资源共享), 2.使用JSONP, 3.nginx反向代理,
-
js 原型链: js不能接口继承,只能实现继承。实现继承主要通过原型链实现。基本思想就是通过原型继承多个引用类型的属性和方法。构造函数,原型和实例的关系:每个构造函数都有一个原型对象,原型有一个属性指回构造函数,而实例有一个内部指针指回原型。如果原型也是另一个原型的实例,就意味着这个原型本身有一个内部指针指向另一个原型,相应的另一个原型也有一个指针指向另一个构造函数。这样就在实例和原型之间构造了一条原型链。
-
什么是虚拟DOM?
一个普通的js对象,包含tag,props,children三个属性。
<div id="app"> <p class="text"> hello world! </p> </div>
{ tag:'div', props:{ id:'app' }, children:[ { tag:'p', props:{ className:'text' }, children:[ 'hello world!' ] } ] }
DOM是树形结构,可以使用js对象进行简单的表示。原生DOM规范复杂,创建空的div也代价很高。虚拟DOM在DOM发生变化时,通过diff算法对比原生js对象,计算出需要变更的DOM,然后只对需要变更的DOM进行操作,不更新整个视图。
虚拟DOM最大的优势:抽象了原本的渲染过程,实现了跨平台的能力。