这篇文章总结了一些我日常前端开发中经常用到且非常重要的知识点。这是本系列的第一篇文章。1.css禁用鼠标事件.disabled{pointer-events:none;cursor:default;opacity:0.6;}复制代码2.get/post的理解和区别http超文本传输??协议(HTTP)的设计目的是保证客户端和服务器之间的通信。HTTP用作客户端和服务器之间的请求-响应协议。Web浏览器可能是客户端，计算机上的Web应用程序可能是服务器。http方法：HEAD：同GET，但只返回HTTP头，不返回文件体PUT：上传指定URI表示DELETE：删除指定资源OPTIONS：返回服务器支持的HTTP方法CONNECT：转换请求连接totransparentTCP/IPchannelPOST:Submitdatatothespecifiedresource//querystring(name/valuepair)在POST请求的HTTP报文体中发送POST/test/demo_form.aspHTTP/1.1Host:w3schools.comname1=value1&name2=value2GET：从指定资源请求数据GET请求和POST请求的区别GET请求可以缓存GET请求保留在浏览器历史GET请求可以加入书签GET请求在处理敏感数据时不应该使用GET请求有是长度限制（2048个字符），IE和Safari限制2k；歌剧限制4k；Firefox、Chrome限制8kGET请求应该只用于检索数据POST请求不会被缓存POST请求不会保留在浏览器历史记录中POST不能被收藏。POST请求对数据长度没有要求。3.stripegrid的实现方式nth-child(even/odd)//odd表示基数。这时选择基数行的样式，even代表偶数行。row:nth-child(odd){background:#eee;}nth-of-type(odd).row:nth-of-type(odd){background:#eee;}梯度实现linear-gradient.stripe-bg{padding:.5em;line-height:1.5em;background:beige;background-size:auto3em;background-origin:content-box;background-image:linear-gradient(rgba(0,0,0,.2)50%,transparent0);}4.js求平面上两点之间的距离//数据可以数组或者对象方式存储leta={x:'6',y:10},b={x:8,y:20};函数distant(a,b){让dx=Number(a.x)-Number(b.x)letdy=Number(a.y)-Number(b.y)returnMath.pow(dx*dx+dy*dy,.5)}5.css禁止用户选择body{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}6.数组去重//indexOf实现vararray=[1,1,'1'];functionunique(array){varres=[];for(vari=0,len=array.length;i[...newSet(a)]7.CDN和CDN的好处是什么CDN：CDN就是把源站的内容分发到离用户最近的节点，让用户就近获取想要的内容，提高用户访问的响应速度和成功率，解决分布、带宽、服务器性能等问题。访问延迟问题，适用于站点加速、点播、直播等场景。好处：1.加载多个域名的资源一般情况下，浏览器会限制单个域名下的并发请求数（文件加载），通常最多4个，那么第5个加载项就会被阻塞，直到第一个A文件被加载。由于CDN文件存放在不同地域（不同IP），浏览器有可能同时加载页面需要的所有文件（远不止4个），从而提高页面加载速度。2.文件可能已被加载和缓存。一些常见的js库或者css样式库，比如jQuery，在网上很常见。当用户浏览你的某个网页时，很可能他已经通过你网站使用的CDN访问过某个其他网站。正好这个网站也使用了jQuery，所以此时用户的浏览器已经缓存了。有这个jQuery文件（同IP的同名文件如果有缓存，浏览器会直接使用缓存文件，不会再加载），所以不会再加载，间接提高了网站访问速度3.高效率无论你的网站多么NB，它永远不会超过百度NB或谷歌，对吧？一个好的CDN将提供更高的效率、更低的网络延迟和更小的丢包率。4、分布式数据中心如果你的站点位于北京，当香港或更远的用户访问你的站点时，他的数据请求将不可避免地非常缓慢。而CDNs会让用户从离自己最近的节点加载需要的文件，所以加载速度的提升是水到渠成的事。5、使用情况分析一般CDNs提供商（如百度云加速）都会提供数据统计功能，您可以了解更多用户访问自己网站的情况，并可以根据情况及时对自己的网站进行适当的调整。统计数据。6、有效防止网站被攻击。一般来说，CDN提供商也会提供网站安全服务。8.正则表达式匹配手机号;returnfalse;}}9.如何提高首频加载速度1.js外链文件放在body底部，css外链文件放在body底部head2.http静态资源尽量使用多个子域名3.服务端提供html和http静态资源时最好开启gzip4.在js、css、img等资源的http头中设置expires和last-modifiedresponses5.尽量减少http请求次数6.js/css/html/img资源压缩7.使用cssspirtes减少img请求次数8.大图使用lazyload9.避免404，减少外部js10.减少cookiesize可以提高响应时间11.减少dom元素的数量12.使用异步脚本动态创建脚本10.浏览器内核（渲染引擎）IE/360/Sogou浏览器：TridentChrome/Safari/Opera：WebKit(KHTML的一个开源分支）（虽然我们称WebKit为浏览器内核，但并不适合能够直接调用渲染引擎，因为WebKit本身主要由两个引擎组成，一个是渲染引擎“WebCore”，一个是渲染引擎“WebCore”。它是javascript解释引擎“JSCore”，它源自KDE的渲染引擎KHTML和javascript解释引擎KJS。）（从2013年发布的Chrome28.0.1469.0开始，Chrome放弃了Chromium引擎，改用最新的BlinkEngine（基于WebKit2-Apple于2010年推出的新WebKit引擎），Blink相比上一代引擎简化了代码，改进了DOM框架，并提高了安全性。）（为了降低研发成本，Opera在2013年2月宣布放弃Presto，效仿Chrome，使用WebKit分支的Chromium引擎作为其浏览器的核心引擎）Firefox/SeaMonkey：Gecko11。浏览器渲染流程及优化建议浏览器渲染流程1）解析：一种是HTML/SVG/XHTML。实际上，Webkit有三个C++类分别对应这三种类型的文档。解析这三个文件会生成一个DOMTree。CSS，解析CSS会生成一个CSS规则树。Javascript，脚本，主要是通过DOMAPI和CSSOMAPI来操作DOMTree和CSSRuleTree。2）Rendering：浏览器引擎会通过DOMTree和CSSRuleTree构建RenderingTree。注意：RenderingTree不等同于DOM树，因为像Header或display:none这样的东西没有必要放在渲染树中。CSS的RuleTree主要是完成匹配，将CSSRule附加到RenderingTree上的每个Element上。那就是DOM节点。这就是所谓的框架。然后，计算出每个Frame（也就是每个Element）的位置，也称为layout和reflow过程。3）绘图：最后调用操作系统NativeGUI的API进行绘图。减少reflow和repaint的优化建议1）不要一一修改DOM样式。最好预先定义css的class，然后修改DOM的className。2）离线修改DOM。比如：用documentFragment对象操作内存中的DOM，先把DOM给display:none（有一个reflow），然后你想怎么改就怎么改。比如修改100次，再显示。将一个DOM节点克隆到内存中，然后根据需要对其进行修改。修改好后，和网上的交换一下。3）不要把DOM节点的属性值作为循环中的变量放在循环中。否则会造成对该节点属性的大量读写。4）动画HTML元素使用固定或绝对位置，尽量使用transfoem，这样修改他们的CSS就不会reflow了。5）尽量少用表格布局。因为一个小小的改动就可能导致整个表格重新布局。12.导入页面样式时，使用link和@import有什么区别？(1)link是一个XHTML标签。除了加载CSS，还可以用来定义RSS，定义rel连接属性等；@import由CSS提供，只能用于加载CSS；(2)页面加载时，链接会同时加载，@import引用的CSS会等到页面加载完成再加载；(3)import是CSS2.1提出的，IE5及以上版本只能识别，link是XHTML标签，不存在兼容性问题；(4)link支持用js控制DOM改变样式，@import不支持；13.请简要描述您对HTML语义的理解？使用正确的标签做正确的事。HTML语义使页面内容结构化，便于浏览器和搜索引擎解析；即使没有样式CSS，也以文档格式显示，易于阅读；搜索引擎爬虫也依靠HTML标签来确定每个关键词的上下文和权重，有利于SEO；方便阅读源代码的人将网站分块，便于阅读、维护和理解。14.请描述cookies、sessionStorage和localStorage的区别？Cookie是网站为了识别用户身份而存储在用户本地终端（ClientSide）上的数据（通常是加密的）。Cookie数据总是在同源HTTP请求中携带（即使不需要），它会在浏览器和服务器之间来回传递。sessionStorage和localStorage不会自动向服务器发送数据，只是保存在本地。存储大小：cookie数据大小不能超过4k。sessionStorage和localStorage虽然也有存储大小的限制，但是比cookie大很多，可以达到5M甚至更大。过期时间：localStorage存储持久化数据，浏览器关闭后数据不会丢失，除非主动删除数据；sessionStorage数据在当前浏览器窗口关闭后自动删除。cookie设置的cookie在cookie过期时间之前有效，即使窗口或浏览器关闭15.iframe有什么缺点？*iframe会屏蔽主页面的Onload事件；*搜索引擎检索程序无法解读此类页面，不利于SEO；*iframe和主页面共享连接池，浏览器对同域的连接有限制，会影响页面的并行加载。在使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好通过javascript动态的给iframe添加src属性值，这样可以绕过以上两个问题。16、网页验证码是做什么用的，解决什么安全问题？它是一个用于区分用户是计算机还是人的公共全自动程序。可防止恶意破解密码、刷票、泛滥论坛；可有效防止黑客通过特定程序暴力破解方法对特定注册用户进行连续登录尝试。17.引入标准的CSS盒子模型？低版本IE盒模型有什么区别？(1)有IE盒子模型和W3C盒子模型两种；（2）盒模型：内容（content）、填充（padding）、边框（margin）、边框（border）；(3)区别：IE的content部分计算了border和padding；18.position值的相对和绝对定位原点是什么？定位在其值不是静态的第一个父元素上。fixed（旧IE不支持）生成绝对定位的元素，相对于浏览器窗口定位。relative生成??相对定位的元素，相对于其正常位置定位。静态默认。没有定位，元素出现在正常流中（顶部、底部、左侧、右侧z-index声明被忽略）。inherit指定从父元素继承位置属性的值。19、我经常遇到的浏览器的兼容性有哪些？原因是什么，解决方法是什么，常用的hack技巧是什么？PNG24位图片在iE6浏览器背景中出现，解决方法是制作PNG8。浏览器的默认margin与padding不同。解决办法是加一个全局的*{margin:0;padding:0;}来统一。IE6bilateralmarginbug：block属性标签float后有水平margin，ie6显示的margin比设置的大。浮动产生的双倍距离即#box{float:left;宽度：10px；margin:000100px;}这种情况下IE会生成20px的距离，解决方法是在label样式控件中添加float——_display:inline;将其转换为内联属性。（符号_只有ie6可以识别）渐进式识别的方法是从整体中逐渐排除部分。首先，巧妙地使用“\9”标记将IE浏览器与所有大小写区分开来。然后，再次使用“+”将IE8和IE7、IE6分开，这样IE8就已经独立识别了。css.bb{background-color:red;/allrecognition/background-color:#00deff\9;/IE6,7,8recognition/+background-color:#a200ff;/IE6,7recognition/_background-color:#1e0bd1;/IE6recognition/}IE下可以使用获取常规属性的方法获取自定义属性，也可以使用getAttribute()获取自定义属性；在Firefox下，只能使用getAttribute()来获取自定义属性。解决方法：通过getAttribute()统一获取自定义属性。IE下even对象有x,y属性，没有pageX,pageY属性；在Firefox下，事件对象具有pageX、pageY属性，但没有x、y属性。解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求次数。默认情况下，Chrome中文界面会强制小于12px的文字以12px显示，可以通过添加CSS属性-webkit-text-size-adjust:none;来解决。访问超链接后，不会出现悬停样式。单击的超链接样式将不再具有悬停和活动状态。解决办法是改变CSS属性的顺序：L-V-H-A:a:link{}a:visited{}a:hover{}a:active{}20、CSS优化和性能提升的方法有哪些？键选择器（keyselector）。选择器的最后一部分是键选择器（即用来匹配目标元素的部分）；如果规则有一个ID选择器作为它的键选择器，不要给规则添加标签。过滤掉不相关的规则（这样样式系统就不会浪费时间去匹配它们）；提取项目常用公共样式，增强复用性，按模块编写组件；增强项目的协同开发、可维护性和可维护性；使用预处理工具或构建工具（gulp检查css语法，自动添加前缀，打包压缩，自动优雅降级）；21.如何修改chrome记住密码后自动填写表格的黄色背景？输入：-webkit-autofill，textarea：-webkit-autofill，选择：-webkit-autofill{background-color:rgb(250,255,189);/*#FAFFBD;*/background-image:none;color:rgb(0,0,0);}
