一些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. 浅析Java语言中两种异常的差别

    Java提供了两类主要的异常:runtime exception和checked exception.所有的checked exception是从java.lang.Exception类衍生出来的,而 ...

  2. AVCaptureSession

    AVCaptureSession用来控制来自一个输入设备(AVCaptureDeviceInput)的声音和视频,流入一个输出缓冲区(AVCaptureOutput)的过程. 建立一个AVCaptur ...

  3. android性能优化学习笔记（加快应用程序启动速度：）

    一:安卓中应用程序的启动方式有两种: 冷启动:后台没有该应用进程,系统会重新创建一个进程分配给该应用(所以会先创建和初始化Application类,再创建和初始化MainActivity,包括测量,布 ...

  4. iOS tableView Section圆角方案

    给tableView的section设置圆角 首先给让cell左右偏移一点的距离,通过重写cell的setframe方法来实现 -(void)setFrame:(CGRect)frame{ CGFlo ...

  5. java线程模型Master-Worker

    这样的模型是最经常使用的并行模式之中的一个,在Nginx源代码中有涉及到有想看的能够去这个大神的博客了解一下http://blog.csdn.net/marcky/article/details/60 ...

  6. 刷脸支付真的来啦！华为nova3带你玩转酷时代~

    无论是不愿脱离手套的怕冷手. 或是沾满泥土芬芳的勤劳手. 还是挂着水滴的清洁手…… 每当这些时刻,打开支付宝认证支付, 指纹解锁的能力总是光彩尽失. 不过,就在华为nova 3的发布会上, 一项传说已 ...

  7. 【LeetCode-面试算法经典-Java实现】【118-Pascal&#39;s Triangle（帕斯卡三角形）】

    [118-Pascal's Triangle(帕斯卡三角形(杨辉三角))] [LeetCode-面试算法经典-Java实现][全部题目文件夹索引] 原题 Given numRows, generate ...

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

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

  9. ASP.NET动态网站制作（14）-- CSS3

    前言:这节课主要讲解CSS之前没有讲到过的知识点以及CSS3的一些内容. 内容: 1.内容参考博文:http://www.cnblogs.com/ruanmou/p/4832214.html. 后记: ...

  10. PHP新手必学之刚进公司装环境

    由于今天去一家公司做项目,又重新的装了一遍所熟悉的PHP环境,所以记录下来,总结下. PHP环境主要: PHPstudy(apache+mysql+php)+phpstorm+navicate 解释: ...