2019前端面试题整理大全，没有什么难得到我〜

行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS.link写在html页面中，@import写在CSS页面中文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

(1)绘画 canvas;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

(2)用于媒介回放的 video 和 audio 元素;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

(3)本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

(4)sessionStorage 的数据在浏览器关闭后自动删除;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

(5)语意化更好的内容元素，比如 article、footer、header、nav、section;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

(6)表单控件，calendar、date、time、email、url、search;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

(7)新的技术webworker, websocket, Geolocation;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

this总是指向函数的直接调用者（而非间接调用者）；如果有new关键字，this指向new出来的那个对象；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

性能优化的方法：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

（2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

（3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

（4） 当需要设置的样式很多时设置className而不是直接操作style。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

（5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

（6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

（7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

cookie数据大小不能超过4k。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。有期时间：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

(1)localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

(2)sessionStorage 数据在当前浏览器窗口关闭后自动删除。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

(3)cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

如何在页面上实现一个圆形的可点击区域？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

（1）map+area或者svg文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

（2）border-radius文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

（3）纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

CSS优先级为: !important > id > class > tag文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

absolute浮动定位是相对于父级中设置position为relative或者absolute最近的父级元素，fixed浮动定位是相对于浏览器视窗的；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

ajax过程：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

(3)设置响应HTTP请求状态变化的函数.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

(4)发送HTTP请求.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

(5)获取异步调用返回的数据.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

(6)使用JavaScript和DOM实现局部刷新文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

（1）查找浏览器缓存文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

（2）DNS解析、查找该域名对应的IP地址、重定向（301）、发出第二个GET请求文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

（3）进行HTTP协议会话文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

（4）客户端发送报头(请求报头)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

（5）服务器回馈报头(响应报头)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

（6）html文档开始下载文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

（7）文档树建立，根据标记请求所需指定MIME类型的文件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

（8）文件显示文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

对WEB标准以及W3C的理解与认识文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

清除浮动的几种方式，各自的优缺点文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

1.使用空标签清除浮动 clear:both（理论上能清除任何标签，增加无意义的标签）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

2.使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,使用zoom:1用于兼容IE）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

3.是用afert伪元素清除浮动(用于非IE浏览器)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

javascript的typeof返回哪些数据类型文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

Object number function boolean underfind文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

position的值， relative和absolute分别是相对于谁进行定位的？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

absolute :生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

fixed （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

static 默认值。没有定位，元素出现在正常的流中文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

如何解决跨域问题？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

jsonp，原理是：动态插入script标签，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

优点是兼容性好，简单易用，支持浏览器与服务器双向通信。缺点是只支持GET请求。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

JSONP：json+padding（内填充），顾名思义，就是把JSON填充到一个盒子里。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

创建ajax过程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

(3)设置响应HTTP请求状态变化的函数.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

(4)发送HTTP请求.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

(5)获取异步调用返回的数据.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

(6)使用JavaScript和DOM实现局部刷新.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

谈谈你对webpack的看法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

WebPack 是一个模块打包工具，你可以使用WebPack管理你的模块依赖，并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的HTML、JavaScript、CSS以及各种静态文件（图片、字体等），让开发过程更加高效。对于不同类型的资源，webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系，最后 生成了优化且合并后的静态资源。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

常见web安全及防护原理文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

1.sql注入原理文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

永远不要信任用户的输入，要对用户的输入进行校验，可以通过正则表达式，或限制长度，对单引号和双"-"进行转换等。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

永远不要使用动态拼装SQL，可以使用参数化的SQL或者直接使用存储过程进行数据查询存取。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有限的数据库连接。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

不要把机密信息明文存放，请加密或者hash掉密码和敏感的信息。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

2.XSS原理及防范文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

Xss(cross-site scripting)攻击指的是攻击者往Web页面里插入恶意 html标签或者JavaScript代码。比如：攻击者在论坛中放一个看似安全的链接，骗取用户点击后，窃取cookie中的用户私密信息；或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以为的信任站点。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

首先代码里对用户输入的地方和变量都需要仔细检查长度和对”<”,”>”,”;”,”’”等字符做过滤；其次任何内容写到页面之前都必须加以encode，避免不小心把html tag 弄出来。这一个层面做好，至少可以堵住超过一半的XSS 攻击。首先，避免直接在cookie 中泄露用户隐私，例如email、密码等等。其次，通过使cookie 和系统ip 绑定来降低cookie 泄露后的危险。这样攻击者得到的cookie 没有实际价值，不可能拿来重放。如果网站不需要再浏览器端对cookie 进行操作，可以在Set-Cookie 末尾加上HttpOnly 来防止javascript 代码直接获取cookie 。尽量采用POST 而非GET 提交表单。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

3.CSRF文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

XSS是获取信息，不需要提前知道其他用户页面的代码和数据包。CSRF是代替用户完成指定的动作，需要知道其他用户页面的代码和数据包。要完成一次CSRF攻击，受害者必须依次完成两个步骤：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

登录受信任网站A，并在本地生成Cookie。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

在不登出A的情况下，访问危险网站B。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

服务端的CSRF方式方法很多样，但总的思想都是一致的，就是在客户端页面增加伪随机数。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

HTTP和HTTPS文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

HTTP协议通常承载于TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的HTTPS。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

默认HTTP的端口号为80，HTTPS的端口号为443。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

为什么HTTPS更安全文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息，而如果使用HTTPS，密钥在你和终点站才有。https之所以比http安全，是因为他利用ssl/tls协议传输。它包含证书，卸载，流量转发，负载均衡，页面适配，浏览器适配，refer传递等。保障了传输过程的安全性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

对前端模块化的认识文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

模块化是指在解决某一个复杂问题或者一系列的杂糅问题时，依照一种分类的思维把问题进行系统性的分解以之处理。模块化是一种处理复杂系统分解为代码结构更合理，可维护性更高的可管理的模块的方式。可以想象一个巨大的系统代码，被整合优化分割成逻辑性很强的模块时，对于软件是一种何等意义的存在。对于软件行业来说：解耦软件系统的复杂性，使得不管多么大的系统，也可以将管理，开发，维护变得“有理可循”。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

AMD 是提前执行，CMD 是延迟执行。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

代码层面的性能优化文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

1.少用全局变量文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

2.避免全局查询文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

3.多个变量声明合并文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

4.尽量避免写在HTML标签中写Style属性文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

移动端性能优化文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

1.尽量使用css3动画，开启硬件加速。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

2.CSS中的属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）会触发GPU渲染，请合理使用。过渡使用会引发手机过耗电增加文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

3.不滥用Float。Float在渲染时计算量比较大，尽量减少使用文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

ES6的了解文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

1.新增模板字符串（为JavaScript提供了简单的字符串插值功能）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

2.箭头函数（操作符左边为输入的参数，而右边则是进行的操作以及返回的值Inputs=>outputs。）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

3.for-of（用来遍历数据—例如数组中的值。）arguments对象可被不定参数和默认参数完美代替。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

4.ES6将promise对象纳入规范，提供了原生的Promise对象。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

5.增加了let和const命令，用来声明变量。增加了块级作用域。let命令实际上就增加了块级作用域。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

6.ES6规定，var命令和function命令声明的全局变量，属于全局对象的属性；let命令、const命令、class命令声明的全局变量，不属于全局对象的属性文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

7.还有就是引入module模块的概念文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

你觉得jQuery或zepto源码有哪些写的好的地方?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

(function( window, undefined ) {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

//用一个函数域包起来，就是所谓的沙箱文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

//在这里边var定义的变量，属于这个函数域内的局部变量，避免污染全局文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

//把当前沙箱需要的外部变量通过函数参数引入进来文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

//只要保证参数对内提供的接口的一致性，你还可以随意替换传进来的这个参数文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

window.jQuery = window.$ = jQuery;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

})( window );文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

defer和async文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

<script src="script.js"></script>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之 下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

<script async src="script.js"></script>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

<script defer src="myscript.js"></script>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

然后从实用角度来说呢，首先把所有脚本都丢到 之前是最佳实践，因为对于旧浏览器来说这是唯一的优化选择，此法可保证非脚本的其他一切元素能够以最快的速度得到加载和解析。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

用过哪些设计模式？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

1.工厂模式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

主要好处就是可以消除对象间的耦合，通过使用工程方法而不是new关键字。将所有实例化的代码集中在一个位置防止代码重复。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

function createObject(name,age,profession){//集中实例化的函数var obj = new Object();文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

obj.name = name;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

obj.age = age;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

obj.profession = profession;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

obj.move = function () {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

return this.name + ' at ' + this.age + ' engaged in ' + this.profession;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

};文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

return obj;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

var test1 = createObject('trigkit4',22,'programmer');//第一个实例var test2 = createObject('mike',25,'engineer');//第二个实例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

2.构造函数模式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

使用构造函数的方法，即解决了重复实例化的问题 ，又解决了对象识别的问题，该模式与工厂模式的不同之处在于：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

1).构造函数方法没有显示的创建对象 (new Object());文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

2).直接将属性和方法赋值给 this 对象;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

3).没有 renturn 语句。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

说说你对闭包的理解文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。在js中，函数即闭包，只有函数才会产生作用域的概念.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

闭包的三个特性：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

1.函数嵌套函数文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

2.函数内部可以引用外部的参数和变量文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

3.参数和变量不会被垃圾回收机制回收文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

浏览器本地存储的问题文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

在较高版本的浏览器中，js提供了sessionStorage和globalStorage。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

Html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

web storage和cookie的区别文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

1.Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

2.除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

3.但是cookie也是不可以或缺的：cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

4.浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)，值得一提的是IE总是办好事，例如IE7、IE6中的userData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

5.localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

cookie 和session 的区别文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

1.cookie数据存放在客户的浏览器上，session数据放在服务器上。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

2.cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗，考虑到安全应当使用session。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

3.session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能。考虑到减轻服务器性能方面，应当使用COOKIE。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

4.单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

5.个人建议：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

将登陆信息等重要信息存放为SESSION文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

其他信息如果需要保留，可以放在COOKIE中文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

position:absolute和float属性的异同?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

共同点：对内联元素设置float和absolute属性，可以让元素脱离文档流，并且可以设置其宽高。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

不同点：float仍会占据位置，absolute会覆盖文档流中的其他元素。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

介绍一下box-sizing属性？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

CSS选择符？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

1.id选择器（ # myid）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

2.类选择器（.myclassname）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

3.标签选择器（div, h1, p）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

4.相邻选择器（h1 + p）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

5.子选择器（ul > li）：作用于子元素的第一代后代文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

6.后代选择器（li a)：作用于所有子后代元素文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

7.通配符选择器（ * ）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

8.属性选择器（a[rel = "external"]）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

9.伪类选择器（a: hover, li:nth-child）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

优先级为:!important > id > class > tag文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

CSS3新增伪类举例？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

p:first-of-type 选择属于其父元素的首个P元素的每个P元素。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

p:last-of-type 选择属于其父元素的最后P元素的每个P元素。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

p:only-of-type 选择属于其父元素唯一的P元素的每个P元素。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

p:only-child 选择属于其父元素的唯一子元素的每个P元素。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

p:nth-child(2) 选择属于其父元素的第二个子元素的每个P元素。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

:enabled :disabled 控制表单控件的禁用状态。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

:checked 单选框或复选框被选中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

CSS3有哪些新特性？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

CSS3实现圆角（border-radius），阴影（box-shadow），文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

在CSS3中唯一引入的伪元素是::selection.（匹配被用户鼠标选取的部分。）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

CSS3中新增了一种盒模型计算方式：box-sizing：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

盒模型默认的值是content-box, 新增的值是padding-box和border-box，几种盒模型计算元素宽高的区别如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

1.content-box（默认）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

布局所占宽度Width：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

Width = width + padding-left + padding-right + border-left + border-right文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

布局所占高度Height:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

Height = height + padding-top + padding-bottom + border-top + border-bottom文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

2.padding-box：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

布局所占宽度Width：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

Width = width(包含padding-left + padding-right) + border-top + border-bottom文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

布局所占高度Height:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

Height = height(包含padding-top + padding-bottom) + border-top + border-bottom文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

3.border-box：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

布局所占宽度Width：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

Width = width(包含padding-left + padding-right + border-left + border-right)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

布局所占高度Height:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

Height = height(包含padding-top + padding-bottom + border-top + border-bottom)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

浮动元素引起的问题和解决办法？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

浮动元素引起的问题：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

（1）父元素的高度无法被撑开，影响与父元素同级的元素文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

（2）与浮动元素同级的非浮动元素（内联元素）会跟随其后文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

（3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

清除浮动的解决方法：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

1.额外标签法，文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

（缺点：不过这个办法会增加额外的标签使HTML结构看起来不够简洁。）2.使用after伪类文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

#parent:after{文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

content:".";文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

height:0;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

visibility:hidden;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

display:block;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

clear:both;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

3.浮动外部元素文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

4.设置overflow为hidden或者auto文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

DOM操作——怎样添加、移除、移动、复制、创建和查找节点?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

1）创建新节点文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

createDocumentFragment() //创建一个DOM片段文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

createElement() //创建一个具体的元素文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

createTextNode() //创建一个文本节点文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

2）添加、移除、替换、插入文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

appendChild()文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

removeChild()文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

replaceChild()文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

insertBefore() //并没有insertAfter()文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

3）查找文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

getElementsByTagName() //通过标签名称文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

getElementById() //通过元素Id，唯一性文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

html5有哪些新特性、移除了那些元素？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

HTML5主要是关于图像，位置，存储，多任务等功能的增加。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

1.拖拽释放(Drag and drop) API文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

2.语义化更好的内容标签（header,nav,footer,aside,article,section）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

3.音频、视频API(audio,video)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

4.画布(Canvas) API文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

5.地理(Geolocation) API文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

6.本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

7.sessionStorage 的数据在浏览器关闭后自动删除文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

8.表单控件，calendar、date、time、email、url、search文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

9.新的技术webworker, websocket, Geolocation文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

如何实现浏览器内多个标签页之间的通信?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

调用localstorge、cookies等本地存储方式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

null和undefined的区别？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

null是一个表示”无”的对象，转为数值时为0；undefined是一个表示”无”的原始值，转为数值时为NaN。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

当声明的变量还未被初始化时，变量的默认值为undefined。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

undefined表示”缺少值”，就是此处应该有一个值，但是还没有定义。典型用法是：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

（1）变量被声明了，但没有赋值时，就等于undefined。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

（3）对象没有赋值的属性，该属性的值为undefined。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

（4）函数没有返回值时，默认返回undefined。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

null表示”没有对象”，即该处不应该有值。典型用法是：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

（1） 作为函数的参数，表示该函数的参数不是对象。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

（2） 作为对象原型链的终点。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

new操作符具体干了什么呢?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

2、属性和方法被加入到 this 引用的对象中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

js延迟加载的方式有哪些？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

1.defer：如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行；如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

2.async：如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

3.动态创建DOM方式（创建script，插入到DOM中，加载完毕后callBack）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

4.按需异步载入js文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

哪些操作会造成内存泄漏？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

1.意外的全局变量文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

js中如果不用 var 声明变量,该变量将被视为 window 对象(全局对象)的属性,也就是全局变量，调用完了函数以后,变量仍然存在,导致泄漏.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

如果不注意 this 的话,还可能会这么漏:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

function foo() {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

this.variable = "potential accidental global";文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

// 没有对象调用foo, 也没有给它绑定this, 所以this是window文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

foo();文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

可以通过加上 'use strict' 启用严格模式来避免这类问题, 严格模式会阻止你创建意外的全局变量.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

2.被遗忘的定时器或者回调文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

3.没有清理的DOM元素引用文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

4.闭包文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

异步加载和延迟加载？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

1.异步加载的方案： 动态插入script标签文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

2.通过ajax去获取js代码，然后通过eval执行文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

3.script标签上添加defer或者async属性文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

4.创建并插入iframe，让它异步执行js文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

5.延迟加载：有些 js 代码并不是页面初始化的时候就立刻需要的，而稍后的某些情况才需要的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

分为4个步骤：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

（1）当发送一个URL请求时，不管这个URL是Web页面的URL还是Web页面上每个资源的URL，浏览器都会开启一个线程来处理这个请求，同时在远程DNS服务器上启动一个DNS查询。这能使浏览器获得请求对应的IP地址。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

（2）浏览器与远程Web服务器通过TCP三次握手协商来建立一个TCP/IP连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

（3）一旦TCP/IP连接建立，浏览器会通过该连接向远程服务器发送HTTP的GET请求。远程服务器找到资源并使用HTTP响应返回该资源，值为200的HTTP响应状态表示一个正确的响应。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

（4）此时，Web服务器提供资源服务，客户端开始下载资源。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

请解释一下 JavaScript 的同源策略？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

概念:同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

这里的同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

指一段脚本只能读取来自同一来源的窗口和文档的属性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

为什么要有同源限制？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

我们举例说明：比如一个黑客程序，他利用Iframe（行内框架）把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

GET和POST的区别，何时使用POST？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

POST：一般用于修改服务器上的资源，对所发送的信息没有限制。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值，也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

然而，在以下情况中，请使用 POST 请求：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

1.无法使用缓存文件（更新服务器上的文件或数据库）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

2.向服务器发送大量数据（POST 没有数据量限制）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

3.发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

对重构的理解？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

网站重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。也就是说是在不改变UI的情况下，对网站进行优化。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

对于传统的网站来说重构通常是：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

1.表格(table)布局改为DIV+CSS文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

2.使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

3.对于移动平台的优化文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

4.针对于SEO（搜索引擎）进行优化文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

深层次的网站重构应该考虑的方面：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

1.减少代码间的耦合文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

2.让代码保持弹性文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

3.严格按规范编写代码文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

4.设计可扩展的API文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

5.代替旧有的框架、语言(如VB)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

6.增强用户体验文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

网页速度的优化：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

1.压缩JS、CSS、image等前端资源(通常是由服务器来解决)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

2.程序的性能优化(如数据读写)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

3.采用CDN来加速资源加载文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

4.对于JS DOM的优化文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

5.HTTP服务器的文件缓存文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

HTTP状态码文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

200 OK 正常返回信息文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

201 Created 请求成功并且服务器创建了新的资源文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

202 Accepted 服务器已接受请求，但尚未处理文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

301 Moved Permanently 请求的网页已永久移动到新位置。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

302 Found 临时性重定向。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

304 Not Modified 自从上次请求后，请求的网页未修改过。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

401 Unauthorized 请求未授权。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

403 Forbidden 禁止访问。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

404 Not Found 找不到如何与 URI 相匹配的资源。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

500 Internal Server Error 最常见的服务器端错误。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

严格模式主要有哪些限制？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

1.变量必须声明后再使用文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

2.函数的参数不能有同名属性，否则报错文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

3.不能使用with语句文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

4.不能对只读属性赋值，否则报错文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

5.不能使用前缀0表示八进制数，否则报错文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

6.不能删除不可删除的属性，否则报错文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

7.不能删除变量delete prop，会报错，只能删除属性delete global[prop]8.eval不会在它的外层作用域引入变量文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

9.eval和arguments不能被重新赋值文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

10.arguments不会自动反映函数参数的变化文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

11.不能使用arguments.callee文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

12.不能使用arguments.caller文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

13.禁止this指向全局对象文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

14.不能使用fn.caller和fn.arguments获取函数调用的堆栈文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

15.增加了保留字（比如protected、static和interface）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

设立”严格模式”的目的，主要有以下几个：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

1.消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

2.消除代码运行的一些不安全之处，保证代码运行的安全；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

3.提高编译器效率，增加运行速度；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

4.为未来新版本的Javascript做好铺垫。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

document.write()的用法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

document.write()方法可以用在两个方面：页面载入过程中用实时脚本创建页面内容，以及用延时脚本创建本窗口或新窗口的内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

document.write只能重绘整个页面。innerHTML可以重绘页面的一部分文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

git fetch和git pull的区别文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

git pull：相当于是从远程获取最新版本并merge到本地文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

git fetch：相当于是从远程获取最新版本到本地，不会自动merge文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

对MVC和MVVM的理解文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

MVC:View 传送指令到 Controller;Controller 完成业务逻辑后，要求 Model 改变状态;Model 将新的数据发送到 View，用户得到反馈.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

MVVC：View：UI界面;ViewModel：它是View的抽象，负责View与Model之间信息转换，将View的Command传送到Model；Model：数据访问层.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

什么是事件代理？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

事件代理（Event Delegation），又称之为事件委托。是 JavaScript 中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是可以提高性能。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

attribute和property的区别是什么？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

attribute是dom元素在文档中作为html标签拥有的属性；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

property就是dom元素在js中作为对象拥有的属性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

所以：对于html的标准属性来说，attribute和property是同步的，是会自动更新的，但是对于自定义的属性来说，他们是不同步的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

什么样的前端代码是好的文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

高复用低耦合，这样文件小，好维护，而且好扩展。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

H5常见问题和注意事项文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

Meta基础知识文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

1.H5页面窗口自动调整到设备宽度，并禁止用户缩放页面：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

html标签：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

// width 设置viewport宽度，为一个正整数，或字符串‘device-width’文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

// height 设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

// initial-scale 默认缩放比例，为一个数字，可以带小数文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

// minimum-scale 允许用户最小缩放比例，为一个数字，可以带小数文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

// maximum-scale 允许用户最大缩放比例，为一个数字，可以带小数文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

// user-scalable 是否允许手动缩放文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

js方法：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

var phoneWidth = parseInt(window.screen.width);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

var phoneScale = phoneWidth/640;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

var ua = navigator.userAgent;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

if (/Android (d+.d+)/.test(ua)){文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

var version = parseFloat(RegExp.$1);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

if(version>2.3){文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">');文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

}else{文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

} else {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

空白页基本meta标签文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

打电话发短信写邮件的实现文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

1.打电话文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

<a href="tel:0755-10086">打电话给:0755-10086</a>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

2.发短信文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

<a href="sms:10086">发短信给: 10086</a>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

3.发邮件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

<a href="mailto:863139978@qq.com;384900096@qq.com?cc=zhangqian0406@yeah.net&bcc=993233461@qq.com&subject=[邮件主题]&body=腾讯诚邀您参与%0A%0Ahttp://www.baidu.com%0A%0A<img%20src='images/1.jpg'%20/>">点击我发邮件</a>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

点击元素产生背景或边框怎么去掉？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0去除灰色半透明遮罩；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

winphone系统,点击标签产生的灰色半透明背景，能通过设置<meta name="msapplication-tap-highlight" content="no">去掉；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

特殊说明：有些机型去除不了，如小米2。对于按钮类还有个办法，不使用a或者input标签，直接用div标签文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

a,button,input,textarea {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

-webkit-tap-highlight-color: rgba(0,0,0,0);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

-webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify有个副作用，就是输入法不再能够输入多个字符文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

也可以文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

{ -webkit-tap-highlight-color: rgba(0,0,0,0); }文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

Rentina显示屏原理及设计方案文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

retina屏是一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素点1个变为4个。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

前端的应对方案是：设计稿切出来的图片长宽保证为偶数，并使用backgroud-size把图片缩小为原来的1/2。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

例如图片宽高为：200px*200px，那么写法如下文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

.css{width:100px;height:100px;background-size:100px 100px;}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

其它元素的取值为原来的1/2，例如视觉稿40px的字体，使用样式的写法为20px文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

.css{font-size:20px}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

image-set设计Rentina背景图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

image-set,webkit私有属性，也是CSS4的属性，为解决Rentina屏幕下的图像而生。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

.css {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

background: url(images/bg.jpg) no-repeat center;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

background: -webkit-image-set(文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

url(images/bg.jpg) 1x, //支持image-set普通屏文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

url(images/bg-2x.jpg) 2x); //支持image-set的Rentinan文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

美化表单元素文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

使用appearance改变webkit浏览器的默认外观文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

input,select { -webkit-appearance:none; appearance: none; }文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

超实用的CSS样式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

去掉webkit的滚动条——display: none;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

其他参数文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

::-webkit-scrollba //滚动条整体部分文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

::-webkit-scrollbar-thumb //滚动条内的小方块文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

::-webkit-scrollbar-track //滚动条轨道文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

::-webkit-scrollbar-button //滚动条轨道两端按钮文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

::-webkit-scrollbar-track-piece //滚动条中间部分，内置轨道文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

::-webkit-scrollbar-corner //边角，两个滚动条交汇处文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

::-webkit-resizer //两个滚动条的交汇处上用于通过拖动调整元素大小的小控件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

禁止长按链接与图片弹出菜单文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

a,img { -webkit-touch-callout: none }文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

禁止ios和android用户选中文字文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

html,body {-webkit-user-select:none; user-select: none; }文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

改变输入框placeholder的颜色值文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

::-webkit-input-placeholder {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

color: #999; }文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

:-moz-placeholder {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

color: #999; }文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

::-moz-placeholder {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

color: #999; }文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

:-ms-input-placeholder {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

color: #999; }文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

input:focus::-webkit-input-placeholder{ color:#999; }文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

android上去掉语音输入按钮文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

input::-webkit-input-speech-button {display: none}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

取消input在ios下，输入的时候英文首字母的默认大写文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

<input autocapitalize="off" autocorrect="off" />文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

手机拍照和上传图片文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

IOS有拍照、录像、选取本地图片功能，部分Android只有选择本地图片功能。Winphone不支持文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

<input type="file" accept="images/*" />文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

<input type="file" accept="video/*" />文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

屏幕旋转的事件和样式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

JS处理文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

function orientInit(){文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

var orientChk = document.documentElement.clientWidth > document.documentElement.clientHeight?'landscape':'portrait';文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

if(orientChk =='lapdscape'){文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

//这里是横屏下需要执行的事件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

}else{文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

//这里是竖屏下需要执行的事件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

orientInit();文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

window.addEventListener('onorientationchange' in window?'orientationchange':'resize', function(){文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

setTimeout(orientInit, 100);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

},false)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

CSS处理文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

//竖屏时样式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

@media all and (orientation:portrait){ }文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

//横屏时样式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

@media all and (orientation:landscape){ }文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

audio元素和video元素在ios和andriod中无法自动播放文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

音频，写法一文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

<audio src="music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦</audio>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

音频，写法二文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

<audio controls="controls">文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

<source src="music/bg.ogg" type="audio/ogg"></source>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

<source src="music/bg.mp3" type="audio/mpeg"></source>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

优先播放音乐bg.ogg，不支持在播放bg.mp3文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

</audio>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

JS绑定自动播放（操作window时，播放音乐）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

$(window).one('touchstart', function(){文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

music.play();文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

})文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

微信下兼容处理文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

document.addEventListener("WeixinJSBridgeReady", function () {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

music.play();文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

}, false);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

小结文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

1.audio元素的autoplay属性在IOS及Android上无法使用，在PC端正常文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

2.audio元素没有设置controls时，在IOS及Android会占据空间大小，而在PC端Chrome是不会占据任何空间文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

重力感应事件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

运用HTML5的deviceMotion，调用重力感应事件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

if(window.DeviceMotionEvent){文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

document.addEventListener('devicemotion', deviceMotionHandler, false)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

var speed = 30;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

var x = y = z = lastX = lastY = lastZ = 0;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

function deviceMotionHandler(eventData){文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

var acceleration = event.accelerationIncludingGravity;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

x = acceleration.x;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

y = acceleration.y;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

z = acceleration.z;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

if(Math.abs(x-lastX)>speed || Math.abs(y-lastY)>speed || Math.abs(z-lastZ)>speed ){文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

//这里是摇动后要执行的方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

yaoAfter();文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

lastX = x;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

lastY = y;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

lastZ = z;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

function yaoAfter(){文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

//do something文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

微信浏览器用户调整字体大小后页面矬了，怎么阻止用户调整文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

以下代码可使Android机页面不再受用户字体缩放强制改变大小，但是会有1S左右延时，期间可以考虑loading来处理文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

if (typeof(WeixinJSBridge) == "undefined") {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

document.addEventListener("WeixinJSBridgeReady", function (e) {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

setTimeout(function(){文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize':0}, function(res){文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

alert(JSON.stringify(res));文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

})文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

}, 0)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

});文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

}else{文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

setTimeout(function(){文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize':0}, function(res){文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

alert(JSON.stringify(res));文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

})文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

}, 0)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

IOS下可使用 -webkit-text-size-adjust禁止用户调整字体大小文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

body { -webkit-text-size-adjust:100%!important; }文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

最好的解决方案：最好使用rem或百分比布局文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

定位的坑文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

fixed定位文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

1.ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

2.android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

3.ios4下不支持position:fixed文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

解决方案：使用Iscroll，如：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

<div id="wrapper">文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

<ul>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

<li></li>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

.....文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

</ul>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

</div>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

<script src="iscroll.js"></script>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

<script>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

var myscroll;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

function loaded(){文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

myscroll=new iScroll("wrapper");文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

window.addEventListener("DOMContentLoaded",loaded,false);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

</script>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

position定位文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

Android下弹出软键盘弹出时，影响absolute元素定位文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

解决方案:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

var ua = navigator.userAgent.indexOf('Android');文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

if(ua>-1){文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

$('.ipt').on('focus', function(){文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

$('.css').css({'visibility':'hidden'})文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

}).on('blur', function(){文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

$('.css').css({'visibility':'visible'})文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

})文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

播放视频不全屏文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

1.ios7+支持自动播放文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

2.支持Airplay的设备（如：音箱、Apple TV)播放文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

x-webkit-airplay="true"文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

3.播放视频不全屏文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

webkit-playsinline="true"文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

<video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://"></video>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

JS判断设备文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

function deviceType(){文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

var ua = navigator.userAgent;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

for(var i=0; i<len,len = agent.length; i++){文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

if(ua.indexOf(agent[i])>0){文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

break;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

deviceType();文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

window.addEventListener('resize', function(){文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

deviceType();文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

})文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

JS判断微信浏览器文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

function isWeixin(){文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

var ua = navigator.userAgent.toLowerCase();文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

if(ua.match(/MicroMessenger/i)=='micromessenger'){文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

return true;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

}else{文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

return false;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

android 2.3 bug文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

1.@-webkit-keyframes 需要以0%开始100%结束，0%的百分号不能去掉文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

2.after和before伪类无法使用动画animation文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

3.border-radius不支持%单位，如要兼容，可以给radius设置一下较大的值文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

4.translate百分比的写法和scale在一起会导致失效，例如：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

-webkit-transform: translate(-50%,-50%) scale(-0.5, 1)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

android 4.x bug文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

1.三星 Galaxy S4中自带浏览器不支持border-radius缩写文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

2.同时设置border-radius和背景色的时候，背景色会溢出到圆角以外部分文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

3.部分手机(如三星)，a链接支持鼠标:visited事件，也就是说链接访问后文字变为紫色文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

4.android无法同时播放多音频audio文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

消除transition闪屏文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

.css {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

-webkit-transform-style: preserve-3d;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

-webkit-backface-visibility: hidden;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

-webkit-perspective: 1000;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

开启硬件加速文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

目前，像Chrome/Filefox/Safari/IE9+以及最新版本Opera都支持硬件加速，当检测到某个DOM元素应用了某些CSS规则时就会自动开启，从而解决页面闪白，保证动画流畅。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

.css {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

-webkit-transform: translate3d(0,0,0);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

-moz-transform: translate3d(0,0,0);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

-ms-transform: translate3d(0,0,0);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

transform: translate3d(0,0,0);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

渲染优化文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

1.禁止使用iframe（阻塞父文档onload事件）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

2.禁止使用gif图片实现loading效果（降低CPU消耗，提升渲染性能）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

使用CSS3代码代替JS动画；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

开启GPU加速；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

使用base64位编码图片(不小图而言，大图不建议使用)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

对于一些小图标，可以使用base64位编码，以减少网络请求。但不建议大图使用，比较耗费CPU。小图标优势在于：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

1.减少HTTP请求；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

2.避免文件跨域；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html

3.修改及时生效；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13002.html