一些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. xpinyin-函数返回多个值-lambda匿名函数-列表生成式-三元表达式

    import xpinyinp=xpinyin.Pinyin() #实例化print(p.get_pinyin('小白','')) 函数返回多个值:1.函数如果返回多个值的话,它会把这几个值放到一个元 ...

  2. XCode5无法设置Deployment Target的解决办法

    今天使用XCode5创建新项目的时候发现无法修改Deployment Target,只能选择iOS7,谷歌了一下找到了答案,在这里分享给大家:) 这是由于XCode5默认会选择在64位的环境下运行,在 ...

  3. Android 图片查看器

    1 http://blog.csdn.net/wang8512945/article/details/8075413 2 http://blog.csdn.net/lcore/article/deta ...

  4. Linux Mint （应用软件— 虚拟机：Virtualbox）

    近期想自己折腾一下Linux系统本身.比方Linux裁减或者移植.裁减或者移植Linux是一件麻烦的事情.而且出错后会影响到当前的系统.怎样才干不影响当前机器上的系统呢,于是便想到了虚拟机.在当前系统 ...

  5. 关于CDN对动态网站加速的一些看法

    CDN的全称是Content Delivery Network,即内容分发网络.其目的是通过在现有的Internet中增加一层新的网络架构,将网站的内容发布到最接近用户的网络"边缘" ...

  6. 查看/设置MySQL数据库的事务隔离级别

    查看InnoDB存储引擎 系统级的隔离级别 和 会话级的隔离级别: mysql> select @@global.tx_isolation,@@tx_isolation; +---------- ...

  7. gulp配置，实例演示

    项目完成后的目录 我们所需要的插件为:gulp-minify-css gulp-concat gulp-uglify gulp-rename del 如下图所示,完成后的项目目录结构: 附加,获取pa ...

  8. （一）spark算子 分为3大类

    value类型的算子 处理数据类型为value型的算子(也就是这个算子只处理数据类型为value的数据),可以根据rdd的输入分区与输出分区的关系分为以下几个类型 (1)输入分区与输出分区一对一型 m ...

  9. Android Studio 使用笔记：在图形界面使用 Gradle 配置项目所需jar包

    在 Android Studio 中使用第三方 jar 包,可以直接下载后添加到项目中,也可以使用 Gradle 配置进行管理.图形界面下十分简单. 点击下图中间的图标,或者选中 Model ,按F4 ...

  10. u-boot-2014_04在TQ2440上的移植

    本文详细介绍了新版本的u-boot-2014_04在tq2440平台上的移植过程,期间参考了网上的其他移植文档,还有韦东山的移植uboot视频,讲的很好.下面是共享链接,欢迎下载,一同学习.其中有移植 ...