一些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. CSS 选择器 :last-child与:last-of-type的区别

    :last-child----represents the last element among a group of sibling elements. CSS伪类 :last-child 代表在一 ...

  2. R410自带SAS6IR卡折腾记

    因为需要一些做一些自动编译的工作,所以打算淘换一台多核的主机.淘宝找一圈,感觉换下来的dell R410 ~ R710 都可以. 综合对比了一下感觉最低配的R410就能满足要求,最后选择了:X5675 ...

  3. BMP图片的C++水印算法

    http://wenku.baidu.com/link?url=aVenUhViH9f6At4Lj_As7Rzp_eJWXTcmbUTH0qazd1Y1ZYiU3i1j0pM3G0r_PViIecsv ...

  4. Http调试工具－Fiddler使用指引

    转自:http://my.oschina.net/u/1388024/blog/186886#OSC_h1_9 目录[-] Fiddler是什么? Fiddler能做什么? 从哪里下载? 安装: 初次 ...

  5. __must_check必须处理函数返回值

    include/linux/compiler-gcc4.h  #define __must_check            __attribute__((warn_unused_result)) _ ...

  6. Shell Error: -bash: ./test.sh: /bin/bash^M: bad interpreter: No such file or directory (转)

    错误原因可能有以下几种: 1.在WIN底下用文本编辑工具修改过参数变量,在保存的时候没注意编码格式造成的, 2.也有可能是在VIM里修改,第一行末尾按到ctrl_v 查看文件是DOS格式.UNIX格式 ...

  7. ubuntu 解决更换源失败问题

    用图形界面命令打开窗口在终端输入 gksudo nautilus打开一个图形窗口 (注意在这个图形窗口下 任何目录下的文件都是可以删除的) /ect/apt删除下面的sources.list和备份文件 ...

  8. 如何使CSS--better（系列一）

    我们想一下以下问题: 1.什么样子的css代码才是高效的? 2.什么样子的css代码才是便于维护的? 3.什么样子的css才是可扩展的? 带着以下问题咱们简单的说一下css的“性能”问题 虽然我技术不 ...

  9. OGEngine教程：字体工具使用

    1.打开 BitmapFont tool,在红框中输入你要显示的字. 2.写完后保存字体文件 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvT3Jhbmdl ...

  10. bzoj1185【HNOI2007】最小矩形覆盖

    1185: [HNOI2007]最小矩形覆盖 Time Limit: 10 Sec  Memory Limit: 162 MBSec  Special Judge Submit: 1114  Solv ...