一些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. JUnit单元测试中的setUpBeforeClass()、tearDownAfterClass()、setUp()、tearDown()方法小结

    编写JUnit单元测试的时候,会用到 setUpBeforeClass().tearDownAfterClass().setUp().tearDown()这四个方法,例如用 eclipse新建一个ju ...

  2. presentModalViewController方法，present一个透明的viewController,带动画效果

    //假设需要被present的控制器实例为controller,controller的背景色设置为clearColor UIViewController * rootcontroller = self ...

  3. 项目开发中的一些注意事项以及技巧总结 基于Repository模式设计项目架构—你可以参考的项目架构设计 Asp.Net Core中使用RSA加密 EF Core中的多对多映射如何实现？ asp.net core下的如何给网站做安全设置 获取服务端https证书 Js异常捕获

    项目开发中的一些注意事项以及技巧总结   1.jquery采用ajax向后端请求时,MVC框架并不能返回View的数据,也就是一般我们使用View().PartialView()等,只能返回json以 ...

  4. Memcache针对不同场景数据应用缓存策略

    Memcache主要的作用是为减轻大访问量对数据库的冲击,所以一般的逻辑是首先从memcache中读取数据,如果没有就从数据库中读取数据写入到memcache中,等下一次读取的时候就可以从memcac ...

  5. PHP面试题及答案解析(7)—Linux系统命令

    1.请解释下列10个shell命令的用途.top.ps.mv.find.df.cat.chmod.chgrp.grep.wc top:该命令提供了实时对系统处理器状态的监控,它能够实时显示系统中各个进 ...

  6. eclipse / ADT（Android Develop Tool） 一些方便的初始设置

      1.设置编辑窗口的背景色eclipse的主编辑窗口的背景色,默认为白色,个人感觉太亮,推荐保护视力的“墨绿色”,当然也可以根据个人喜好更改,如下图 2.主编辑窗口的字体字号等,也可以根据自己的爱好 ...

  7. 解决Windows平台通过cURL上传APP到蒲公英pgyer平台时无法使用中文升级描述的问题

    解决Windows平台通过cURL上传APP到蒲公英pgyer平台时无法使用中文升级描述的问题 官方上传命令 curl -F file=@"315.apk" -F uKey=XXX ...

  8. mysql中百万级别分页查询性能优化

    前提条件: 1.表的唯一索引 2.百万级数据 SQL语句: select c.* FROM ( SELECT a.logid FROM tableA a where 1 = 1 <#if pho ...

  9. Swing实现系统托盘

    /* 实现系统托盘化 */ protected void setToolSystemTray() { // 系统是否支持系统托盘 if (SystemTray.isSupported()) { // ...

  10. 《TomCat与Java Web开发技术详解》（第二版） 第五章节的学习总结 ---- Servlet的高级用法

    这一章节主要是介绍了Servlet技术的一些高级用法,如下是我自己的整理归纳 1.下载文件:即获取服务器文件,并把文件写入反馈给客户端 ServletContext.getResourceAsStre ...