首页手记前端必备JS/CSS 知识点汇总

前端必备JS/CSS 知识点汇总

标签：

Html/CSS JavaScript CSS3

前端开发中有众多高频的，重要的知识点，掌握这些知识很有必要。本文结合日常工作汇总了前端必备的CSS／JS技能树，希望给大家帮来便利

1. CSS优化、提高性能的方法有哪些？

关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）；
如果规则拥有 ID 选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）；
提取项目的通用公有样式，增强可复用性，按模块编写组件；增强项目的协同开发性、可维护性和可扩展性;
使用预处理工具或构建工具（gulp对css进行语法检查、自动补前缀、打包压缩、自动优雅降级）；

2. 如何修改chrome记住密码后自动填充表单的黄色背景？

 input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(250, 255, 189); /* #FAFFBD; */
    background-image: none;
    color: rgb(0, 0, 0);
  }

3. 让页面里的字体变清晰，变细用CSS怎么做？

-webkit-font-smoothing: antialiased;

4. 让overflow:scroll平滑滚动？

-webkit-overflow-scrolling: touch;

5. 如何将浮点数点左边的数每三位添加一个逗号，如12000000.11转化为『12,000,000.11』?

function commafy(num){
  	return num && num
  		.toString()
  		.replace(/(\d)(?=(\d{3})+\.)/g, function($1, $2){
  			return $2 + ',';
  		});
  }

6. Javascript作用链域?

全局函数无法查看局部函数的内部细节，但局部函数可以查看其上层的函数细节，直至全局细节。
当需要从局部函数查找某一属性或方法时，如果当前作用域没有找到，就会上溯到上层作用域查找，
直至全局函数，这种组织形式就是作用域链。

7. 谈谈This对象的理解。

this总是指向函数的直接调用者（而非间接调用者）；
如果有new关键字，this指向new出来的那个对象；
在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window；

8. eval是做什么的？

它的功能是把对应的字符串解析成JS代码并运行；
应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。
由JSON字符串转换为JSON对象的时候可以用eval，var obj =eval(’(’+ str +’)’);

9. 什么是window对象? 什么是document对象?

window对象是指浏览器打开的窗口。
document对象是Documentd对象（HTML 文档对象）的一个只读引用，window对象的一个属性。

10. [“1”, “2”, “3”].map(parseInt) 答案是多少？

[“1”, “2”, “3”].map(parseInt) 答案也就是：[1, NaN, NaN]

11. 什么是闭包（closure），为什么要用它？

闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。

12. javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么？

使JS编码更加规范化的模式,消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为。
默认支持的糟糕特性都会被禁用，比如不能用with，也不能在意外的情况下给全局变量赋值;
全局变量的显示声明,函数必须声明在顶层，不允许在非函数代码块内声明函数,arguments.callee也不允许使用；
保证代码运行的安全,限制函数中的arguments修改;
提高编译器效率，增加运行速度；

13. 如何判断一个对象是否属于某个类？

if(a instanceof Person){
   alert('yes');
}
// 判断对象类型最好的方式
// 对于 Object 对象，直接调用 toString()  就能返回 [object Object] 。而对于其他对象，则需要通过 call / apply 来调用才能返回正确的类型信息。
Object.prototype.toString.call('') ;   // [object String]
Object.prototype.toString.call(1) ;    // [object Number]
Object.prototype.toString.call(true) ; // [object Boolean]
Object.prototype.toString.call(Symbol()); //[object Symbol]
Object.prototype.toString.call(undefined) ; // [object Undefined]
Object.prototype.toString.call(null) ; // [object Null]
Object.prototype.toString.call(new Function()) ; // [object Function]
Object.prototype.toString.call(new Date()) ; // [object Date]
Object.prototype.toString.call([]) ; // [object Array]
Object.prototype.toString.call(new RegExp()) ; // [object RegExp]
Object.prototype.toString.call(new Error()) ; // [object Error]
Object.prototype.toString.call(document) ; // [object HTMLDocument]
Object.prototype.toString.call(window) ; //[object global] window 是全局对象 global 的引用

14. new一个对象的过程

1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中。
3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。

15. Ajax 解决浏览器缓存问题

1、在ajax发送请求前加上 anyAjaxObj.setRequestHeader(“If-Modified-Since”,“0”)。

2、在ajax发送请求前加上 anyAjaxObj.setRequestHeader(“Cache-Control”,“no-cache”)。
3、在URL后面加上一个随机数： “fresh=” + Math.random();。
4、在URL后面加上时间戳：“nowtime=” + new Date().getTime();。
5、如果是使用jQuery，直接这样就可以了 $.ajaxSetup({cache:false})。这样页面的所有ajax都会执行这条语句就是不需要保存缓存记录。

16. 如何解决跨域问题?

jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面

17. 模块化开发怎么做

立即执行函数,不暴露私有成员

var module1 = (function(){
     　　　　var _count = 0;
     　　　　var m1 = function(){
     　　　　　　//...
     　　　　};
     　　　　var m2 = function(){
     　　　　　　//...
     　　　　};
     　　　　return {
     　　　　　　m1 : m1,
     　　　　　　m2 : m2
     　　　　};
     　　})();

18. AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）规范区别？

对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。
2. CMD 推崇依赖就近，AMD 推崇依赖前置。

// CMD
 define(function(require, exports, module) {
     var a = require('./a')
     a.doSomething()
     // 此处略去 100 行
     var b = require('./b') // 依赖可以就近书写
     b.doSomething()
     // ...
 })

 // AMD 默认推荐
 define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
     a.doSomething()
     // 此处略去 100 行
     b.doSomething()
     // ...
 })

19. requireJS的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何缓存的？）

参考链接

20. 如何实现一个模块加载器

参考连接

21. 列举几条 JavaScript 的基本代码规范

（1）不要在同一行声明多个变量
（2）如果你不知道数组的长度，使用 push
（3）请使用 =/! 来比较 true/false 或者数值
（4）对字符串使用单引号 ‘’(因为大多时候我们的字符串。特别html会出现")
（5）使用对象字面量替代 new Array 这种形式
（6）绝对不要在一个非函数块里声明一个函数，把那个函数赋给一个变量。浏览器允许你这么做，但是它们解析不同
（7）不要使用全局函数
（8）总是使用 var 来声明变量，如果不这么做将导致产生全局变量，我们要避免污染全局命名空间
（9）Switch 语句必须带有 default 分支
（10）使用 /**…*/ 进行多行注释，包括描述，指定类型以及参数值和返回值
（11）函数不应该有时候有返回值，有时候没有返回值
（12）语句结束一定要加分号
（13）for 循环必须使用大括号
（14）if 语句必须使用大括号
（15）for-in 循环中的变量应该使用 var 关键字明确限定作用域，从而避免作用域污染
（16）避免单个字符名，让你的变量名有描述意义
（17）当命名对象、函数和实例时使用驼峰命名规则
（18）给对象原型分配方法，而不是用一个新的对象覆盖原型，覆盖原型会使继承出现问题

22. DOM操作——怎样添加、移除、移动、复制、创建和查找节点?

1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
（2）添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子节点前插入一个新的子节点
（3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
getElementById() //通过元素Id，唯一性

23. jquery实现原理

参考链接

24. jquery中如何将数组转化为json字符串，然后再转化回来？

jQuery中没有提供这个功能，所以你需要先编写两个jQuery的扩展： 
 $.fn.stringifyArray = function(array) {
        return JSON.stringify(array)
    }

    $.fn.parseArray = function(array) {
        return JSON.parse(array)
    }

    然后调用：
    $.fn.stringifyArray(array)

25. jquery的$.extend深复制和浅复制原理

// 浅复制
$ = { 

     extend : function(target, options) { 

        for (name in options) { 

            target[name] = options[name]; 

        } 

        return target; 

    } 

}; 
// 深复制
$ = { 
   extend : function(deep, target, options) { 
       for (name in options) { 
           copy = options[name]; 
           if (deep && copy instanceof Array) { 
               target[name] = $.extend(deep, [], copy); 
           } else if (deep && copy instanceof Object) { 

              target[name] = $.extend(deep, {}, copy); 
           } else { 
              target[name] = options[name]; 
          } 
      } 

     return target; 
  }
};

26. jquery.extend 与 jquery.fn.extend的区别？

jquery.extend 为jquery类添加类方法，可以理解为添加静态方法

jquery.fn.extend:
源码中jquery.fn = jquery.prototype，所以对jquery.fn的扩展，就是为jquery类添加成员函数
使用：
jquery.extend扩展，需要通过jquery类来调用，而jquery.fn.extend扩展，所有jquery实例都可以直接调用。

27. 如何判断当前脚本运行在浏览器还是node环境中？（阿里）

this === window ? 'browser' : 'node';

28. 实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案？

参考链接

29 把 Script 标签放在页面的最底部的body封闭之前和封闭之后有什么区别？浏览器会如何解析它们？

之前推荐的方法（已过时）：之前解决这个问题的方法是把script标签放到body标签之后，这确保了解析到</body>之前都不会被script终端。这个方法是有问题的: 浏览器在整个文档解析完成之前都不能下载script文件，如果文档很大的话，解析完HTML，用户依然要等待script文件下载并执行完成之后，才能操作这个网站。

现在推荐的解决方案：
现在浏览器script标签支持 async 和 defer 属性. 应用这些属性当script被下载时，浏览器更安全而且可以并行下载（下载script并不阻断HTML解析）。
1.async标记的Script异步执行下载，并执行。这意味着script下载时并不阻塞HTML的解析，并且下载结束script马上执行。
2.defer标签的script顺序执行。这种方式也不会阻断浏览器解析HTML。
跟 async不同, defer scripts在整个文档里的script都被下载完才顺序执行。

30. JQuery一个对象可以同时绑定多个事件，这是如何实现的？

 //多个事件同一个函数：
 	$("div").on("click mouseover", function(){});
 //多个事件不同函数
 	$("div").on({
 		click: function(){},
 		mouseover: function(){}
 	});

31. 什么是前端路由？前端路由的实现原理

参考链接

32. 检测浏览器版本版本有哪些方式？

  功能检测、userAgent特征检测

  比如：navigator.userAgent
  //"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_2) AppleWebKit/537.36
    (KHTML, like Gecko) Chrome/41.0.2272.101 Safari/537.36"

33. 什么是Polyfill?

polyfill 是“在旧版浏览器上复制标准 API 的 JavaScript 补充”,可以动态地加载 JavaScript 代码或库，在不支持这些标准 API 的浏览器中模拟它们。
例如，geolocation（地理位置）polyfill 可以在 navigator 对象上添加全局的 geolocation 对象，还能添加 getCurrentPosition 函数以及“坐标”回调对象，
所有这些都是 W3C 地理位置 API 定义的对象和函数。因为 polyfill 模拟标准 API，所以能够以一种面向所有浏览器未来的方式针对这些 API 进行开发，
一旦对这些 API 的支持变成绝对大多数，则可以方便地去掉 polyfill，无需做任何额外工作。

34. 做的项目中，有没有用过或自己实现一些 polyfill 方案（兼容性处理方案）？

html5shiv、Geolocation、Placeholder

35. 我们给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡。会执行几次事件，会先执行冒泡还是捕获？

按照W3C的标准，先发生捕获事件，后发生冒泡事件。所有事件的顺序是：其他元素捕获阶段事件 -> 本元素代码顺序事件 -> 其他元素冒泡阶段事件

// div-capture > btn-bubble > btn-capture > div-bubble
var btn = document.querySelector('button');
var div = document.querySelector('div');

btn.addEventListener('click', function(){
    console.log('bubble','btn');
},false);
btn.addEventListener('click', function(){
    console.log('capture','btn');
},true);

div.addEventListener('click', function(){
    console.log('bubble','div');
},false);
div.addEventListener('click', function(){
    console.log('capture','div');
},true);

36. Webpack热更新实现原理?

Webpack编译期，为需要热更新的 entry 注入热更新代码(EventSource通信)

页面首次打开后，服务端与客户端通过 EventSource 建立通信渠道，把下一次的 hash 返回前端
客户端获取到hash，这个hash将作为下一次请求服务端 hot-update.js 和 hot-update.json的hash
修改页面代码后，Webpack 监听到文件修改后，开始编译，编译完成后，发送 build 消息给客户端
客户端获取到hash，成功后客户端构造hot-update.js script链接，然后插入主文档
hot-update.js 插入成功后，执行hotAPI 的 createRecord 和 reload方法，获取到 Vue 组件的 render方法，重新 render 组件，继而实现 UI 无刷新更新。

37. 函数节流和防抖

参考链接

38. 页面重构怎么操作？

网站重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。
也就是说是在不改变UI的情况下，对网站进行优化，在扩展的同时保持一致的UI。

对于传统的网站来说重构通常是：

表格(table)布局改为DIV+CSS
使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)
对于移动平台的优化
针对于SEO进行优化
深层次的网站重构应该考虑的方面

减少代码间的耦合
让代码保持弹性
严格按规范编写代码
设计可扩展的API
代替旧有的框架、语言(如VB)
增强用户体验
通常来说对于速度的优化也包含在重构中

压缩JS、CSS、image等前端资源(通常是由服务器来解决)
程序的性能优化(如数据读写)
采用CDN来加速资源加载
对于JS DOM的优化
HTTP服务器的文件缓存

39. 列举IE与其他浏览器不一样的特性

事件不同之处：

 	触发事件的元素被认为是目标（target）。而在 IE 中，目标包含在 event 对象的 srcElement 属性；

获取字符代码、如果按键代表一个字符（shift、ctrl、alt除外），IE 的 keyCode 会返回字符代码（Unicode），DOM 中按键的代码和字符是分离的，要获取字符代码，需要使用 charCode 属性；

阻止某个事件的默认行为，IE 中阻止某个事件的默认行为，必须将 returnValue 属性设置为 false，Mozilla 中，需要调用 preventDefault() 方法；

停止事件冒泡，IE 中阻止事件进一步冒泡，需要设置 cancelBubble 为 true，Mozzilla 中，需要调用 stopPropagation()；

40. 对Node的优点和缺点提出了自己的看法？

*（优点）因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，
因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。
此外，与Node代理服务器交互的客户端代码是由javascript语言编写的，
因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。

*（缺点）Node是一个相对新的开源项目，所以不太稳定，它总是一直在变，
而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。

41. 你有用过哪些前端性能优化的方法？

（1）减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存，图片服务器。

（2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

（3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。

（4） 当需要设置的样式很多时设置className而不是直接操作style。

（5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

（6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。

（7） 图片预加载，将样式表放在顶部，将脚本放在底部  加上时间戳。

（8） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。
对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘IO。向前端优化指的是，在不影响功能和体验的情况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询。减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成（例如join查询），减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分，换语言是无法“优化”的。

42. http

1**(信息类)：表示接收到请求并且继续处理
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本

2**(响应成功)：表示动作被成功接收、理解和接受
200——表明该请求被成功地完成，所请求的资源发送回客户端
201——提示知道新文件的URL
202——接受和处理、但处理未完成
203——返回信息不确定或不完整
204——请求收到，但返回信息为空
205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的GET请求

3**(重定向类)：为了完成指定的动作，必须接受进一步处理
300——请求的资源可在多处得到
301——本网页被永久性转移到另一个URL
302——请求的网页被转移到一个新的地址，但客户访问仍继续通过原始URL地址，重定向，新的URL会在response中的Location中返回，浏览器将会使用新的URL发出新的Request。
303——建议客户访问其他URL或访问方式
304——自从上次请求后，请求的网页未修改过，服务器返回此响应时，不会返回网页内容，代表上次的文档已经被缓存了，还可以继续使用
305——请求的资源必须从服务器指定的地址得到
306——前一版本HTTP中使用的代码，现行版本中不再使用
307——申明请求的资源临时性删除

4**(客户端错误类)：请求包含错误语法或不能正确执行
400——客户端请求有语法错误，不能被服务器所理解
401——请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用
HTTP 401.1 - 未授权：登录失败
　　HTTP 401.2 - 未授权：服务器配置问题导致登录失败
　　HTTP 401.3 - ACL 禁止访问资源
　　HTTP 401.4 - 未授权：授权被筛选器拒绝
HTTP 401.5 - 未授权：ISAPI 或 CGI 授权失败
402——保留有效ChargeTo头响应
403——禁止访问，服务器收到请求，但是拒绝提供服务
HTTP 403.1 禁止访问：禁止可执行访问
　　HTTP 403.2 - 禁止访问：禁止读访问
　　HTTP 403.3 - 禁止访问：禁止写访问
　　HTTP 403.4 - 禁止访问：要求 SSL
　　HTTP 403.5 - 禁止访问：要求 SSL 128
　　HTTP 403.6 - 禁止访问：IP 地址被拒绝
　　HTTP 403.7 - 禁止访问：要求客户证书
　　HTTP 403.8 - 禁止访问：禁止站点访问
　　HTTP 403.9 - 禁止访问：连接的用户过多
　　HTTP 403.10 - 禁止访问：配置无效
　　HTTP 403.11 - 禁止访问：密码更改
　　HTTP 403.12 - 禁止访问：映射器拒绝访问
　　HTTP 403.13 - 禁止访问：客户证书已被吊销
　　HTTP 403.15 - 禁止访问：客户访问许可过多
　　HTTP 403.16 - 禁止访问：客户证书不可信或者无效
HTTP 403.17 - 禁止访问：客户证书已经到期或者尚未生效
404——一个404错误表明可连接服务器，但服务器无法取得所请求的网页，请求资源不存在。eg：输入了错误的URL
405——用户在Request-Line字段定义的方法不允许
406——根据用户发送的Accept拖，请求资源不可访问
407——类似401，用户必须首先在代理服务器上得到授权
408——客户端没有在用户指定的饿时间内完成请求
409——对当前资源状态，请求不能完成
410——服务器上不再有此资源且无进一步的参考地址
411——服务器拒绝用户定义的Content-Length属性请求
412——一个或多个请求头字段在当前请求中错误
413——请求的资源大于服务器允许的大小
414——请求的资源URL长于服务器允许的长度
415——请求资源不支持请求项目格式
416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段
417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求长。

5**(服务端错误类)：服务器不能正确执行一个正确的请求
HTTP 500 - 服务器遇到错误，无法完成请求
　　HTTP 500.100 - 内部服务器错误 - ASP 错误
　　HTTP 500-11 服务器关闭
　　HTTP 500-12 应用程序重新启动
　　HTTP 500-13 - 服务器太忙
　　HTTP 500-14 - 应用程序无效
　　HTTP 500-15 - 不允许请求 global.asa
　　Error 501 - 未实现
HTTP 502 - 网关错误
HTTP 503：由于超载或停机维护，服务器目前无法使用，一段时间后可能恢复正常

43. 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）

而高手可以根据自己擅长的领域自由发挥，从URL规范、HTTP协议、DNS、CDN、数据库查询、
到浏览器流式解析、CSS规则构建、layout、paint、onload/domready、JS执行、JS API绑定等等；

详细版：
1、浏览器会开启一个线程来处理这个请求，对 URL 分析判断如果是 http 协议就按照 Web 方式来处理;
2、调用浏览器内核中的对应方法，比如 WebView 中的 loadUrl 方法;
  3、通过DNS解析获取网址的IP地址，设置 UA 等信息发出第二个GET请求;
4、进行HTTP协议会话，客户端发送报头(请求报头);
  5、进入到web服务器上的 Web Server，如 Apache、Tomcat、Node.JS 等服务器;
  6、进入部署好的后端应用，如 PHP、Java、JavaScript、Python 等，找到对应的请求处理;
7、处理结束回馈报头，此处如果浏览器访问过，缓存上有对应资源，会与服务器最后修改时间对比，一致则返回304;
  8、浏览器开始下载html文档(响应报头，状态码200)，同时使用缓存;
  9、文档树建立，根据标记请求所需指定MIME类型的文件（比如css、js）,同时设置了cookie;
  10、页面开始渲染DOM，JS根据DOM API操作DOM,执行事件绑定等，页面显示完成。

44. 前端学习资源

js秘密花园
 jquery原理解析
 css3
js标准

45. 邮箱验证

var pattern = /^([A-Za-z0-9_\-\.\u4e00-\u9fa5])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,8})$/;

参考链接

46. ajax实现原理及方法使用

readyState属性有五个状态值。

0：是uninitialized，未初始化。已经创建了XMLHttpRequest对象但是未初始化。
1：是loading.已经开始准备好要发送了。
2：已经发送，但是还没有收到响应。
3：正在接受响应，但是还不完整。
4：接受响应完毕。
responseText：服务器返回的响应文本。只有当readyState>=3的时候才有值，根据readyState的状态值，可以知道，当readyState=3，返回的响应文本不完整，只有readyState=4，完全返回，才能接受全部的响应文本。

responseXML：response  as Dom Document object。响应信息是xml，可以解析为Dom对象。
status：服务器的Http状态码，若是200，则表示OK，404，表示为未找到。
statusText：服务器http状态码的文本。比如OK，Not Found。

参考链接

47. js实现继承

参考链接

48. 闭包使用的优缺点

优点：1.保护函数内部变量的安全，加强了封装性
2.在内存中维持一个变量
3.设计私有方法和变量
4.可以读取函数内部的变量
缺点：1.导致内存泄漏，使用不当会造成额外的内存占用
2.可以改变父函数的变量，所以使用时要谨慎

49. canvas和svg区别

1.从图像类别区分，Canvas是基于像素的位图，而SVG却是基于矢量图形。可以简单的把两者的区别看成photoshop与illustrator的区别。
2.从结构上说，Canvas没有图层的概念，所有的修改整个画布都要重新渲染，而SVG则可以对单独的标签进行修改。
3.从操作对象上说，Canvas是基于HTML canvas标签，通过宿主提供的Javascript API对整个画布进行操作的，而SVG则是基于XML元素的。
4.从功能上讲，SVG发布日期较早，所以功能相对Canvas比较完善。
5.关于动画，Canvas更适合做基于位图的动画，而SVG则适合图表的展示。
6.从搜索引擎角度分析，由于svg是有大量标签组成，所以可以通过给标签添加属性，便于爬虫搜索

50. 开启硬件加速

//目前，像Chrome/Filefox/Safari/IE9+以及最新版本Opera都支持硬件加速，当检测到某个DOM元素应用了某些CSS规则时就会自动开启，从而解决页面闪白，保证动画流畅。
.css {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

51. button注意事项

<button></button>元素一定要写上type属性不然会默认提交表单，出现想不到的bug

52. 移动端html标签几个体验优化

html,body{

overflow: hidden;/*手机上写overflow-x:hidden;会有兼容性问题，如果子级如果是绝对定位有运动到屏幕外的话ios7系统会出现留白*/

-webkit-overflow-scrolling:touch;/*流畅滚动,ios7下会有滑一下滑不动的情况，所以需要写上*/

position:realtive;/*直接子级如果是绝对定位有运动到屏幕外的话，会出现留白*/
}

53.手机上的多行省略

.overflow-hidden{
    display: box !important;
    display: -webkit-box !important;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;/*第几行出现省略号*/
    /*text-align:justify;不能和溢出隐藏的代码一起写，会有bug*/
}

54. 长时间按住页面闪退

.element {
    -webkit-touch-callout: none;
}

55. 改变输入框内提示文字颜色

::-webkit-input-placeholder { /* WebKit browsers */
    color: #999; }
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #999; }
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #999; }
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #999; }
input:focus::-webkit-input-placeholder{ color:#999; }

56. 自动播放音乐

//JS绑定自动播放（操作window时，播放音乐）
$(window).one('touchstart', function(){
    music.play();
})

//微信下兼容处理
document.addEventListener("WeixinJSBridgeReady", function () {
    music.play();
}, false);

57.消除transtration闪屏

消除transition闪屏
.css {
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}

文中如有一些不足，欢迎指正。
另外，笔者最近刚推出基于NodeJS的全栈开源的CMS项目，目前已初步完成第一版，欢迎大家参与。
项目Github地址
https://github.com/MrXujiang/XPCMS

技术架构：

后台Node+Koa+redis+JsonSchema
管理后台界面 vue-cli3 + vue + ts + vuex + antd-vue + axios
客户端前台 react + antd + react-hooks + axios

关于系统的设计思想，架构和实现过程，欢迎在公众号《趣谈前端》里查看更详细的介绍。欢迎大家相互学习交流，一起探索前端的边界。

点击查看更多内容

4人点赞

共同学习，写下你的评论

评论加载中...

作者其他优质文章

正在加载中

徐小夕

全栈工程师

手记

篇

粉丝

3762

获赞与收藏

2112

关注作者，订阅最新文章

阅读免费教程

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

热搜

最近搜索清空

前端必备JS/CSS 知识点汇总

1. CSS优化、提高性能的方法有哪些？

2. 如何修改chrome记住密码后自动填充表单的黄色背景 ？

3. 让页面里的字体变清晰，变细用CSS怎么做？

4. 让overflow:scroll平滑滚动？

5. 如何将浮点数点左边的数每三位添加一个逗号，如12000000.11转化为『12,000,000.11』?

6. Javascript作用链域?

7. 谈谈This对象的理解。

8. eval是做什么的？

9. 什么是window对象? 什么是document对象?

10. [“1”, “2”, “3”].map(parseInt) 答案是多少？

11. 什么是闭包（closure），为什么要用它？

12. javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么？

13. 如何判断一个对象是否属于某个类？

14. new一个对象的过程

15. Ajax 解决浏览器缓存问题

16. 如何解决跨域问题?

17. 模块化开发怎么做

18. AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）规范区别？

19. requireJS的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何 缓存的？）

20. 如何实现一个模块加载器

21. 列举几条 JavaScript 的基本代码规范

22. DOM操作——怎样添加、移除、移动、复制、创建和查找节点?

23. jquery实现原理

24. jquery中如何将数组转化为json字符串，然后再转化回来？

25. jquery的$.extend深复制和浅复制原理

26. jquery.extend 与 jquery.fn.extend的区别？

27. 如何判断当前脚本运行在浏览器还是node环境中？（阿里）

28. 实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案？

29 把 Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别？浏览器会如何解析它们？

30. JQuery一个对象可以同时绑定多个事件，这是如何实现的？

31. 什么是前端路由？前端路由的 实现原理

32. 检测浏览器版本版本有哪些方式？

33. 什么是Polyfill?

34. 做的项目中，有没有用过或自己实现一些 polyfill 方案（兼容性处理方案）？

35. 我们给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡。会执行几次事件，会先执行冒泡还是捕获？

36. Webpack热更新实现原理?

37. 函数节流和防抖

38. 页面重构怎么操作？

39. 列举IE与其他浏览器不一样的特性

40. 对Node的优点和缺点提出了自己的看法？

41. 你有用过哪些前端性能优化的方法？

42. http

43. 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）

44. 前端学习资源

45. 邮箱验证

46. ajax实现原理及方法使用

47. js实现继承

48. 闭包使用的优缺点

49. canvas和svg区别

50. 开启硬件加速

51. button注意事项

52. 移动端html标签几个体验优化

53.手机上的多行省略

54. 长时间按住页面闪退

55. 改变输入框内提示文字颜色

56. 自动播放音乐

57.消除transtration闪屏

技术架构：

相关文章推荐

阅读免费教程

2. 如何修改chrome记住密码后自动填充表单的黄色背景？

19. requireJS的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何缓存的？）

29 把 Script 标签放在页面的最底部的body封闭之前和封闭之后有什么区别？浏览器会如何解析它们？

31. 什么是前端路由？前端路由的实现原理