一些js基本知识点

Doctype 浏览器渲染模式

  • 渲染模式发展历史

在多年以前（IE6诞生以前），各浏览器都处于各自比较封闭的发展中（基本没有兼容性可谈）。随着WEB的发展，兼容性问题的解决越来越显得迫切，随即，各浏览器厂商发布了按照标准模式（遵循各厂商制定的统一标准）工作的浏览器，比如IE6就是其中之一。但是考虑到以前建设的网站并不支持标准模式，所以各浏览器在加入标准模式的同时也保留了混杂模式（即以前那种未按照统一标准工作的模式，也叫怪异模式）。

'

  • 标准模式（不兼容之前的语法）

    • html 4.0

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    • xhtml 1.0

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    • html5

      <!DOCTYPE html>

    • P.S. 细心的你可以看出随着html版本的发展，标准模式的写法也在变化着

  • 怪异模式 / 混杂模式

    • 很简单，将开头标准模式的声明去掉即可

    • IE6的怪异模式，有个新的盒模型，border和padding都属于宽高的范畴

label

  • label中有一个for属性，可以将该label和一个input绑定，当我们点击该label的文字时，input也回聚焦

  • for 属性　— >　 js中表示htmlFor

<label for="input">User:</label>

    <input id="input" type="text" name="user" value="" placeholder="请输入用户名" />

图片预加载

  • 假设这样一种需求，在文档加载完毕后的某个时刻，可能几秒后，可能几分钟后，也可能半小时后，我们要通过js动态插入一张10M的大图片？

  • 会产生这样的问题？图片太大，网速又不快，所以图片加载需要很长时间，所以导致页面上的那个图片只呈现了部分，甚至没有呈现，一片空白，形成了极其差的用户体验。

  • 如何解决呢？那就是图片预加载，在图片还没动态插入之前，我们就创造img节点，并为之设置src，在设置src后，浏览器就会开始下载src上的资源，然后在我们需要的时候即可瞬间插入文档

  • 启发？在请求的资源需要加载很长时间的情况下，我们可以预加载，在需要使用的时候，直接用就可以，极大提高了用户体验

封装　getElementsByClassName(); IE8及以下不兼容

  • 类名、id名不像js标识符命名那么规范，尽量别用特殊字符就行

  • js标识符规范，由字母，数字，下划线，$ 组成，但不能以数字开头

// 封装js中的getElenmentsByClassName();

    Document.prototype.getByClassName = function (className) {

        var allEle = document.getElementsByTagName('*');

        var retArr = {

            length: 0,

            push: Array.prototype.push

        };

        var len = allEle.length;

        var regBlank = /^\s|\s$/g;

        for(var i = 0; i < len; i++) {

            var strForClass = allEle[i].className

                allEle[i].className

                && allEle[i].className.replace(regBlank, '').indexOf(className) !== -1

                && retArr.push(allEle[i]);

        }

        return retArr;

    }
 

Math对象

  • Math.sqrt()

    • 开方

  • Math.floor()

    • 向下取整

  • Math .ceil()

    • 向上取整

  • Math.random()

    • Math.random()　　(0, 1)

    • eg： (5, 15)　－》　Math.random() * 10 + 5

    • 先看区间 15 - 5 = 10

    • 再看起始点 5

    • 所以Math.random() * 10 + 5

文档碎片

  • 每次我们操作dom都会引起Reflow 或 Repaint，所以过多次的dom操作会降低性能

  • 但是我们可以将一些dom操作集合起来再操作dom，可减少Reflow或Repaint

  • 创建文档碎片

    • var frag = document.createDocumentFragment();

    • 该碎片具有正常dom节点的所有方法

 var frag = document.createDocumentFragment();

    var div = document.createElement('div');

    var span = document.createElement('span');

    frag.sppendChild(div);

    frag.appendChild(span);

    document.body.appendChild(frag);

cdn

  • 基站

  • CDN的全称是Content Delivery Network，即内容分发网络。

  • 原理：

简单地说，内容分发网络(CDN)是一个经策略性部署的整体系统，包括分布式存储、负载均衡、网络请求的重定向和内容管理4个要件，而内容管理和全局的网络流量管理(Traffic Management)是CDN的核心所在。
通过用户就近性和服务器负载的判断，CDN确保内容以一种极为高效的方式为用户的请求提供服务。总的来说，内容服务基于缓存服务器，也称作代理缓存(Surrogate)，
它位于网络的边缘，距用户仅有"一跳"(Single Hop)之遥。同时，代理缓存是内容提供商源服务器（通常位于CDN服务提供商的数据中心）的一个透明镜像。
这样的架构使得CDN服务提供商能够代表他们客户，即内容供应商，向最终用户提供尽可能好的体验，而这些用户是不能容忍请求响应时间有任何延迟的。

JS一些碎知识点的更多相关文章

  1. vue散碎知识点学习

    1. vue散碎知识点学习 1.1. 特点 数据渲染/数据同步 组件化/模块化 其他功能路由,ajax,数据流 1.2. Vue.js学习资源 vuejs中文官网:http://cn.vuejs.or ...

  2. js进阶 9 js操作表单知识点总结

    js进阶 9 js操作表单知识点总结 一.总结 一句话总结:熟记较常用的知识点,对于一些不太常用的知识点可以在使用的时候查阅相关资料,在使用和练习中去记忆. 1.表单中学到的元素的两个对象集合石什么? ...

  3. node.js 需要注意知识点

    复习node.js 需要注意知识点--(重点) 2.1:参数传递获取造型 客户端脚手架(发)    (参数传递)    node.js(收) -发ajax  this.axios.get(" ...

  4. js面试题知识点全解(一变量类型和计算)

    1.js中使用typeof能得到哪些类型 2.何时使用===和== 3.js中的内置函数 4.js变量按存储方式区分为哪些类型,并描述其特点 5.如何理解json 以下对这些问题的知识点做一些总结: ...

  5. js面试题知识点全解(一作用域和闭包)

    问题: 1.说一下对变量提升的理解 2.说明this几种不同的使用场景 3.如何理解作用域 4.实际开发中闭包的应用 知识点: js没有块级作用域只有函数和全局作用域,如下代码: if(true){ ...

  6. Vue.js中前端知识点总结笔记

    1.框架和库的区别: 框架:framework 有着自己的语法特点.都有对应的各个模块库 library 专注于一点 框架的好处: 1.提到代码的质量,开发速度 2.提高代码的复用率 3.降低模块之间 ...

  7. js面试题知识点全解(一作用域)

    问题: 1.说一下对变量提升的理解 2.说明this几种不同的使用场景 3.如何理解作用域 4.实际开发中闭包的应用 知识点: js没有块级作用域只有函数和全局作用域,如下代码: if(true){ ...

  8. 前端开发概述+JS基础细节知识点

    一 前端开发概述 html页面:html css javascript 拿到UI设计图纸:切图-->html+css静态布局-->用JS写一写动态效果-->ajax和后台进行交互,把 ...

  9. vue.js的一些知识点

    1. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...

随机推荐

  1. Android--点击EditText的时候弹出软键盘，点击EditText之外空白处软键盘消失

    在android中点击EditText的时候会弹出软键盘,但当我们输入完毕或者想隐藏软键盘时,我们可以点击软键盘上的隐藏按钮,这种方法固然可行,但是为了提高用户体验,我们常常要实现这种功能:当输入完毕 ...

  2. SpringCloud系列四：实现Eureka Server的高可用并将应用注册到Eureka Sever集群上

    1. 回顾 上一篇博客中,实现了单节点的Eureka Server.Eureka Client会定时连接Eureka Server,获取注册表中的信息并缓存到本地.微服务在消费远程API时总是使用本地 ...

  3. Spring学习一----------Spring概况

    © 版权声明:本文为博主原创文章,转载请注明出处 Spring概况 Spring是为了解决企业应用开发的复杂性而创建的. Spring是一种轻量级的控制反转(IOC)和面向切面(AOP)的容器框架. ...

  4. ubuntu打开终端多开标签的快捷键是ctrl+ shift+ T 对比ctrl+ alt+ T 另外窗口打开一个终端

    ubuntu打开终端多开标签的快捷键是ctrl+ shift+ T 对比ctrl+ alt+ T 另外窗口打开一个终端

  5. 《Lucene in Action》（第二版） 第二章节的学习总结 ---- IndexWriter+Document+Field

    这一章节的学习,主要是学会如何创建索引,使用索引 一.创建索引 1.从原始文件中提取内容.这里的文件,可以是文本文件,也可以是二进制文件.文本文件(txt),lucene可以直接处理:而二进制文件(w ...

  6. MySql 数据库系列问题

    0. 我的MYSQL学习心得(四) 数据类型(系列文章) 1.MySql数据库学习--存储过程(1) 0.[转]MySQL存储过程调试工具-dbForge Studio for MySQL ①.存储过 ...

  7. 探究 Redis 4 的 stream 类型

    redis 2 10 月初,Redis 搞了个大新闻.别紧张,是个好消息:Redis 引入了名为 stream 的新数据类型和对应的命令,大概会在年底正式发布到 4.x 版本中.像引入新数据类型这样的 ...

  8. redis php 执行命令时,单引号和双引号的区别。

    #今天遇到一个坑爹的问题,写成单引号就不行,被原样输出了. /** *判断key是否存在 */ function exists_key($key){ return $this->cmd('EXI ...

  9. java并发阻塞队列

    Java 并发编程利用 Condition 来实现阻塞队列 You are here:  开发&语言 - Java 文章 发布于 2017年06月26日  阅读 944 并发编程   什么是阻 ...

  10. C语言进行站点开发之cgi

     安装Apach 配置ApacheRuntime 以下的过程中一直点击next 配置CGI,放开配置:AddHandler cgi-script .cgi watermark/2/text/aHR ...