2023年6月21日发(作者：)
html。css。js的⾯试题HTML⾯试题和HTML有什么区别HTML是⼀种基本的WEB⽹页设计语⾔，XHTML是⼀个基于XML的置标语⾔最主要的不同：XHTML 元素必须被正确地嵌套。XHTML 元素必须被关闭。标签名必须⽤⼩写字母。XHTML ⽂档必须拥有根元素。2.前端页⾯有哪三层构成，分别是什么?作⽤是什么?结构层 Html 表⽰层 CSS ⾏为层 js;3.你做的页⾯在哪些流览器测试过?这些浏览器的内核分别是什么?Ie(Ie内核) ⽕狐（Gecko） ⾕歌（webkit,Blink） opera(Presto),Safari(wbkit)4.什么是语义化的HTML?直观的认识标签 对于搜索引擎的抓取有好处，⽤正确的标签做正确的事情！html语义化就是让页⾯的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CCS情况下也以⼀种⽂档格式显⽰，并且是容易阅读的。搜索引擎的爬⾍依赖于标记来确定上下⽂和各个关键字的权重，利于 SEO。使阅读源代码的⼈对⽹站更容易将⽹站分块，便于阅读维护理解。5 为什么只需要写 !DOCTYPE HTML？HTML5 不基于 SGML，因此不需要对DTD进⾏引⽤，但是需要doctype来规范浏览器的⾏为（让浏览器按照它们应该的⽅式来运⾏）；⽽HTML4.01基于SGML,所以需要对DTD进⾏引⽤，才能告知浏览器⽂档所使⽤的⽂档类型。e作⽤？标准模式与兼容模式各有什么区别?!DOCTYPE声明位于位于HTML⽂档中的第⼀⾏，处于html 标签之前。告知浏览器的解析器⽤什么⽂档标准解析这个⽂档。DOCTYPE不存在或格式不正确会导致⽂档以兼容模式呈现。标准模式的排版 和JS运作模式都是以该浏览器⽀持的最⾼标准运⾏。在兼容模式中，页⾯以宽松的向后兼容的⽅式显⽰,模拟⽼式浏览器的⾏为以防⽌站点⽆法⼯作。5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和HTML5？HTML5 现在已经不是 SGML 的⼦集，主要是关于图像，位置，存储，多任务等功能的增加。绘画 canvas⽤于媒介回放的 video 和 audio 元素本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 的数据在浏览器关闭后⾃动删除语意化更好的内容元素，⽐如 article、footer、header、nav、section表单控件，calendar、date、time、email、url、search新的技术webworker, websockt, Geolocation移除的元素纯表现的元素：basefont，big，center，font, s，strike，tt，u；对可⽤性产⽣负⾯影响的元素：frame，frameset，noframes；⽀持HTML5新标签：IE8/IE7/IE6⽀持通过Element⽅法产⽣的标签，可以利⽤这⼀特性让这些浏览器⽀持HTML5新标签，浏览器⽀持新标签后，还需要添加标签默认的样式：8.请描述⼀下 cookies，sessionStorage 和 localStorage 的区别？cookie：存储的数据量⽐较⼩，4kb左右，cookie在浏览器和服务器间来回传递。在与服务器通信时，携带在http请求头中，可以在同源的页⾯之间共享，有失效⽇期。(为什么cookie存储的数据较⼩呢？因为他会携带在http头中，如果太⼤了会影响传输的性能。)sessionStorage：只在当前会话窗⼝有效，窗⼝关闭sessionStorage清除，保存在客户端不与服务器进⾏通信。在不同浏览器的相同窗⼝也不会共享。localStorage ：保存在客户端，不与服务器进⾏通信。只要不⼿动删除，长期有效。存储的数据量为5Mb或者是更⼤，可以在同源的页⾯之间共享。9.如何实现浏览器内多个标签页之间的通信?调⽤localstorge、cookies等本地存储⽅式CSS⾯试题1.简要说⼀下CSS的元素分类块级元素：div,p,h1,form,ul,li;⾏内元素 : span>,a,label,input,img,strong,em;隐藏元素的⼏种⽅法（⾄少说出三种）Opacity:元素本⾝依然占据它⾃⼰的位置并对⽹页的布局起作⽤。它也将响应⽤户交互;Visibility:与 opacity 唯⼀不同的是它不会响应任何⽤户交互。此外，元素在读屏软件中也会被隐藏;页⾯上占据位置空间的。Display:display 设为 none 任何对该元素直接打⽤户交互操作都不可能⽣效。此外，读屏软件也不会读到元素的内容。这种⽅式产⽣的效果就像元素完全不存在;不占据位置Position:不会影响布局，能让元素保持可以操作;Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全⽀持。如果要在你的 clip-path 中使⽤外部的 SVG ⽂件，浏览器⽀持度还要低;清除浮动的⼏种⽅法（⾄少两种）使⽤带clear属性的空元素使⽤CSS的overflow属性；使⽤CSS的:after伪元素；使⽤邻接元素处理；居中（包括⽔平居中和垂直居中）内联元素居中⽅案⽔平居中设置：1.⾏内元素设置 text-align:center；布局设置display:flex;justify-content:center;(灵活运⽤,⽀持Chroime，Firefox，IE9+)垂直居中设置：1.⽗元素⾼度确定的单⾏⽂本（内联元素）设置 height = line-height；2.⽗元素⾼度确定的多⾏⽂本（内联元素）a:插⼊ table （插⼊⽅法和⽔平居中⼀样），然后设置 vertical-align:middle；b:先设置 display:table-cell 再设置 vertical-align:middle；块级元素居中⽅案⽔平居中设置：1.定宽块状元素设置 左右 margin 值为 auto；2.不定宽块状元素a:在元素外加⼊ table 标签（完整的，包括 table、tbody、tr、td），该元素写在 td 内，然后设置 margin 的值为auto；b:给该元素设置 displa:inine ⽅法；c:⽗元素设置 position:relative 和 left:50%，⼦元素设置 position:relative 和 left:50%；垂直居中设置：使⽤position:absolute（fixed）,设置left、top、margin-left、margin-top的属性;利⽤position:fixed（absolute）属性，margin:auto这个必须不要忘记了;利⽤display:table-cell属性使内容垂直居中;使⽤css3的新属性transform:translate(x,y)属性;使⽤:before元素;5.写出⼏种IE6 BUG的解决⽅法双边距BUG float引起的 使⽤display3像素问题 使⽤float引起的 使⽤dislpay:inline -3px超链接hover 点击后失效 使⽤正确的书写顺序 link visited hover activeIe z-index问题 给⽗级添加position:relativePng 透明 使⽤js代码 改Min-height 最⼩⾼度 ！Important 解决’select 在ie6下遮盖 使⽤iframe嵌套为什么没有办法定义1px左右的宽度容器（IE6默认的⾏⾼造成的，使⽤over:hidden,zoom:0.08 line-height:1px）6.对于SASS或是Less的了解程度？喜欢那个？语法介绍rap了解程度特点，排版，插件的使⽤;8.页⾯导⼊样式时，使⽤link和@import有什么区别？link属于XHTML标签，除了加载CSS外，还能⽤于定义RSS, 定义rel连接属性等作⽤；⽽@import是CSS提供的，只能⽤于加载CSS;页⾯被加载的时，link会同时被加载，⽽@import引⽤的CSS会等到页⾯被加载完再加载;import是CSS2.1 提出的，只在IE5以上才能被识别，⽽link是XHTML标签，⽆兼容问题;9.介绍⼀下CSS的盒⼦模型？有两种， IE 盒⼦模型、标准 W3C 盒⼦模型；IE的content部分包含了 border 和 pading;盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border). 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？id选择器（ # myid）类选择器（.myclassname）标签选择器（div, h1, p）相邻选择器（h1 + p）⼦选择器（ul > li）后代选择器（li a）通配符选择器（ * ）属性选择器（a[rel = “external”]）伪类选择器（a: hover, li: nth – child）可继承的样式： font-size font-family color, UL LI DL DD DT;不可继承的样式：border padding margin width height ;优先级就近原则，同权重情况下样式定义最近者为准;优先级为:JavaScript12! important > id > class > tagimportant ⽐ 内联优先级⾼3有哪些新特性？CSS3实现圆⾓（border-radius:8px），阴影（box-shadow:10px），对⽂字加特效（text-shadow、），线性渐变（gradient），旋转（transform）transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜增加了更多的CSS选择器 多背景 rgbaJavaScript⾯试题ript的typeof返回哪些数据类型Ｏbject number function boolean underfind;2.例举3种强制类型转换和2种隐式类型转换?强制（parseInt,parseFloat,number）隐式（== – ===）；3.数组⽅法pop() push() unshift() shift()Push()尾部添加 pop()尾部删除Unshift()头部添加 shift()头部删除请求的时候get 和post⽅式的区别?⼀个在url后⾯ ⼀个放在虚拟载体⾥⾯有⼤⼩限制安全问题应⽤不同 ⼀个是论坛等只需要请求的，⼀个是类似修改密码的;和apply的区别(this,obj1,obj2,obj3)(this,arguments)请求时，如何解释json数据使⽤eval parse,鉴于安全性考虑 使⽤parse更靠谱;7.事件委托是什么让利⽤事件冒泡的原理，让⾃⼰的所触发的事件，让他的⽗元素代替执⾏！8.闭包是什么，有什么特性，对页⾯有什么影响?简要介绍你理解的闭包闭包就是能够读取其他函数内部变量的函数。9.添加 删除 替换 插⼊到某个接点的⽅法Child()Child10.说⼀下什么是javascript的同源策略？⼀段脚本只能读取来⾃于同⼀来源的窗⼝和⽂档的属性，这⾥的同⼀来源指的是主机名、协议和端⼝号的组合11.编写⼀个b继承a的⽅法;JavaScript11function A ( name ) { this . name = name ; this . sayHello = function ( ) { alert ( this . name +” say Hello !” ) ; } ;}function B ( name , id ) { this . temp = A ; this . temp ( name ) ;
//相当于new A(); delete this . temp ;
this . id = id ;
this . checkId = function ( ID ) { alert ( this . id == ID ) } ;}12.如何阻⽌事件冒泡和默认事件JavaScript12345678function stopBubble ( e ){ if ( e && e . stopPropagation ) e . stopPropagation ( ) else window . event . cancelBubble = true}return false13.下⾯程序执⾏后弹出什么样的结果?---0,301function fn ( ) {171819function fn ( ) { this . a = 0 ; this . b = function ( ) { alert ( this . a ) }}fn . prototype = { b : function ( ) { this . a = 20 ; alert ( this . a ) ; } , c : function ( ) { this . a = 30 ; alert ( this . a ) ; }}var myfn = new fn ( ) ;myfn . b ( ) ;myfn . c ( ) ;14.谈谈This对象的理解。this是js的⼀个关键字，随着函数使⽤场合不同，this的值会发⽣变化。但是有⼀个总原则，那就是this指的是调⽤函数的那个对象。this⼀般情况下：是全局对象Global。 作为⽅法调⽤，那么this就是指这个对象15.下⾯程序的结果11function fun ( n , o ) { console . log ( o ) return { fun : function ( m ) { return fun ( m , n ) ; } } ;}var a = fun ( 0 ) ; a . fun ( 1 ) ; a . fun ( 2 ) ; a . fun ( 3 ) ;var b = fun ( 0 ) . fun ( 1 ) . fun ( 2 ) . fun ( 3 ) ;var c = fun ( 0 ) . fun ( 1 ) ; c . fun ( 2 ) ; c . fun ( 3 ) ;//答案：//a: undefined,0,0,0//b: undefined,0,1,2//c: undefined,0,1,116.下⾯程序的输出结果JavaScript123456789var name = 'World!' ;( function ( ) { if ( typeof name === 'undefined' ) { var name = 'Jack' ; console . log ( 'Goodbye ' + name ) ; } else { console . log ( 'Hello ' + name ) ; }} ) ( ) ;17.了解Node么？Node的使⽤场景都有哪些？⾼并发、聊天、实时消息推送18.介绍下你最常⽤的⼀款框架jquery,rn,angular等;19.对于前端⾃动化构建⼯具有了解吗？简单介绍⼀下Gulp,Grunt等；20.介绍⼀下你了解的后端语⾔以及掌握程度其它1.对Node的优点和缺点提出了⾃⼰的看法？(优点）因为Node是基于事件驱动和⽆阻塞的，所以⾮常适合处理并发请求，因此构建在Node上的代理服务器相⽐其他技术实现（如Ruby）的服务器表现要好得多。此外，与Node代理服务器交互的客户端代码是由javascript语⾔编写的，因此客户端和服务器端都⽤同⼀种语⾔编写，这是⾮常美妙的事情。（缺点）Node是⼀个相对新的开源项⽬，所以不太稳定，它总是⼀直在变，⽽且缺少⾜够多的第三⽅库⽀持。看起来，就像是Ruby/Rails当年的样⼦。2.你有哪些性能优化的⽅法？（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指尽量不使⽤⽂件系统作为缓存、减少读写⽂件次数等。程序优化永远要优化慢的部分，换语⾔是⽆法“优化”的。状态码有那些？分别代表是什么意思？100-199 ⽤于指定客户端应相应的某些动作。200-299 ⽤于表⽰请求成功。200-299 ⽤于表⽰请求成功。300-399 ⽤于已经移动的⽂件并且常被包含在定位头信息中指定新的地址信息。400-499 ⽤于指出客户端的错误。400 1、语义有误，当前请求⽆法被服务器理解。401 当前请求需要⽤户验证 403 服务器已经理解请求，但是拒绝执⾏它。500-599 ⽤于⽀持服务器错误。 503 – 服务不可⽤4.⼀个页⾯从输⼊ URL 到页⾯加载显⽰完成，这个过程中都发⽣了什么？（流程说的越详细越好）查找浏览器缓存DNS解析、查找该域名对应的IP地址、重定向（301）、发出第⼆个GET请求进⾏HTTP协议会话客户端发送报头(请求报头)⽂档开始下载⽂档树建⽴，根据标记请求所需指定MIME类型的⽂件⽂件显⽰浏览器这边做的⼯作⼤致分为以下⼏步：加载：根据请求的URL进⾏域名解析，向服务器发起请求，接收⽂件（HTML、JS、CSS、图象等）。解析：对加载到的资源（HTML、JS、CSS等）进⾏语法解析，建议相应的内部数据结构（⽐如HTML的DOM树，JS的（对象）属性表，CSS的样式规则等等）5.你常⽤的开发⼯具是什么，为什么？Sublime,Atom,Nodepad++;6.说说最近最流⾏的⼀些东西吧？常去哪些⽹站？、MVVM、React-native,Angular,Weex等CSDN,Segmentfault,博客园,掘⾦,Stackoverflow,伯乐在线等
2023年6月21日发(作者：)
html。css。js的⾯试题HTML⾯试题和HTML有什么区别HTML是⼀种基本的WEB⽹页设计语⾔，XHTML是⼀个基于XML的置标语⾔最主要的不同：XHTML 元素必须被正确地嵌套。XHTML 元素必须被关闭。标签名必须⽤⼩写字母。XHTML ⽂档必须拥有根元素。2.前端页⾯有哪三层构成，分别是什么?作⽤是什么?结构层 Html 表⽰层 CSS ⾏为层 js;3.你做的页⾯在哪些流览器测试过?这些浏览器的内核分别是什么?Ie(Ie内核) ⽕狐（Gecko） ⾕歌（webkit,Blink） opera(Presto),Safari(wbkit)4.什么是语义化的HTML?直观的认识标签 对于搜索引擎的抓取有好处，⽤正确的标签做正确的事情！html语义化就是让页⾯的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CCS情况下也以⼀种⽂档格式显⽰，并且是容易阅读的。搜索引擎的爬⾍依赖于标记来确定上下⽂和各个关键字的权重，利于 SEO。使阅读源代码的⼈对⽹站更容易将⽹站分块，便于阅读维护理解。5 为什么只需要写 !DOCTYPE HTML？HTML5 不基于 SGML，因此不需要对DTD进⾏引⽤，但是需要doctype来规范浏览器的⾏为（让浏览器按照它们应该的⽅式来运⾏）；⽽HTML4.01基于SGML,所以需要对DTD进⾏引⽤，才能告知浏览器⽂档所使⽤的⽂档类型。e作⽤？标准模式与兼容模式各有什么区别?!DOCTYPE声明位于位于HTML⽂档中的第⼀⾏，处于html 标签之前。告知浏览器的解析器⽤什么⽂档标准解析这个⽂档。DOCTYPE不存在或格式不正确会导致⽂档以兼容模式呈现。标准模式的排版 和JS运作模式都是以该浏览器⽀持的最⾼标准运⾏。在兼容模式中，页⾯以宽松的向后兼容的⽅式显⽰,模拟⽼式浏览器的⾏为以防⽌站点⽆法⼯作。5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和HTML5？HTML5 现在已经不是 SGML 的⼦集，主要是关于图像，位置，存储，多任务等功能的增加。绘画 canvas⽤于媒介回放的 video 和 audio 元素本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 的数据在浏览器关闭后⾃动删除语意化更好的内容元素，⽐如 article、footer、header、nav、section表单控件，calendar、date、time、email、url、search新的技术webworker, websockt, Geolocation移除的元素纯表现的元素：basefont，big，center，font, s，strike，tt，u；对可⽤性产⽣负⾯影响的元素：frame，frameset，noframes；⽀持HTML5新标签：IE8/IE7/IE6⽀持通过Element⽅法产⽣的标签，可以利⽤这⼀特性让这些浏览器⽀持HTML5新标签，浏览器⽀持新标签后，还需要添加标签默认的样式：8.请描述⼀下 cookies，sessionStorage 和 localStorage 的区别？cookie：存储的数据量⽐较⼩，4kb左右，cookie在浏览器和服务器间来回传递。在与服务器通信时，携带在http请求头中，可以在同源的页⾯之间共享，有失效⽇期。(为什么cookie存储的数据较⼩呢？因为他会携带在http头中，如果太⼤了会影响传输的性能。)sessionStorage：只在当前会话窗⼝有效，窗⼝关闭sessionStorage清除，保存在客户端不与服务器进⾏通信。在不同浏览器的相同窗⼝也不会共享。localStorage ：保存在客户端，不与服务器进⾏通信。只要不⼿动删除，长期有效。存储的数据量为5Mb或者是更⼤，可以在同源的页⾯之间共享。9.如何实现浏览器内多个标签页之间的通信?调⽤localstorge、cookies等本地存储⽅式CSS⾯试题1.简要说⼀下CSS的元素分类块级元素：div,p,h1,form,ul,li;⾏内元素 : span>,a,label,input,img,strong,em;隐藏元素的⼏种⽅法（⾄少说出三种）Opacity:元素本⾝依然占据它⾃⼰的位置并对⽹页的布局起作⽤。它也将响应⽤户交互;Visibility:与 opacity 唯⼀不同的是它不会响应任何⽤户交互。此外，元素在读屏软件中也会被隐藏;页⾯上占据位置空间的。Display:display 设为 none 任何对该元素直接打⽤户交互操作都不可能⽣效。此外，读屏软件也不会读到元素的内容。这种⽅式产⽣的效果就像元素完全不存在;不占据位置Position:不会影响布局，能让元素保持可以操作;Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全⽀持。如果要在你的 clip-path 中使⽤外部的 SVG ⽂件，浏览器⽀持度还要低;清除浮动的⼏种⽅法（⾄少两种）使⽤带clear属性的空元素使⽤CSS的overflow属性；使⽤CSS的:after伪元素；使⽤邻接元素处理；居中（包括⽔平居中和垂直居中）内联元素居中⽅案⽔平居中设置：1.⾏内元素设置 text-align:center；布局设置display:flex;justify-content:center;(灵活运⽤,⽀持Chroime，Firefox，IE9+)垂直居中设置：1.⽗元素⾼度确定的单⾏⽂本（内联元素）设置 height = line-height；2.⽗元素⾼度确定的多⾏⽂本（内联元素）a:插⼊ table （插⼊⽅法和⽔平居中⼀样），然后设置 vertical-align:middle；b:先设置 display:table-cell 再设置 vertical-align:middle；块级元素居中⽅案⽔平居中设置：1.定宽块状元素设置 左右 margin 值为 auto；2.不定宽块状元素a:在元素外加⼊ table 标签（完整的，包括 table、tbody、tr、td），该元素写在 td 内，然后设置 margin 的值为auto；b:给该元素设置 displa:inine ⽅法；c:⽗元素设置 position:relative 和 left:50%，⼦元素设置 position:relative 和 left:50%；垂直居中设置：使⽤position:absolute（fixed）,设置left、top、margin-left、margin-top的属性;利⽤position:fixed（absolute）属性，margin:auto这个必须不要忘记了;利⽤display:table-cell属性使内容垂直居中;使⽤css3的新属性transform:translate(x,y)属性;使⽤:before元素;5.写出⼏种IE6 BUG的解决⽅法双边距BUG float引起的 使⽤display3像素问题 使⽤float引起的 使⽤dislpay:inline -3px超链接hover 点击后失效 使⽤正确的书写顺序 link visited hover activeIe z-index问题 给⽗级添加position:relativePng 透明 使⽤js代码 改Min-height 最⼩⾼度 ！Important 解决’select 在ie6下遮盖 使⽤iframe嵌套为什么没有办法定义1px左右的宽度容器（IE6默认的⾏⾼造成的，使⽤over:hidden,zoom:0.08 line-height:1px）6.对于SASS或是Less的了解程度？喜欢那个？语法介绍rap了解程度特点，排版，插件的使⽤;8.页⾯导⼊样式时，使⽤link和@import有什么区别？link属于XHTML标签，除了加载CSS外，还能⽤于定义RSS, 定义rel连接属性等作⽤；⽽@import是CSS提供的，只能⽤于加载CSS;页⾯被加载的时，link会同时被加载，⽽@import引⽤的CSS会等到页⾯被加载完再加载;import是CSS2.1 提出的，只在IE5以上才能被识别，⽽link是XHTML标签，⽆兼容问题;9.介绍⼀下CSS的盒⼦模型？有两种， IE 盒⼦模型、标准 W3C 盒⼦模型；IE的content部分包含了 border 和 pading;盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border). 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？id选择器（ # myid）类选择器（.myclassname）标签选择器（div, h1, p）相邻选择器（h1 + p）⼦选择器（ul > li）后代选择器（li a）通配符选择器（ * ）属性选择器（a[rel = “external”]）伪类选择器（a: hover, li: nth – child）可继承的样式： font-size font-family color, UL LI DL DD DT;不可继承的样式：border padding margin width height ;优先级就近原则，同权重情况下样式定义最近者为准;优先级为:JavaScript12! important > id > class > tagimportant ⽐ 内联优先级⾼3有哪些新特性？CSS3实现圆⾓（border-radius:8px），阴影（box-shadow:10px），对⽂字加特效（text-shadow、），线性渐变（gradient），旋转（transform）transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜增加了更多的CSS选择器 多背景 rgbaJavaScript⾯试题ript的typeof返回哪些数据类型Ｏbject number function boolean underfind;2.例举3种强制类型转换和2种隐式类型转换?强制（parseInt,parseFloat,number）隐式（== – ===）；3.数组⽅法pop() push() unshift() shift()Push()尾部添加 pop()尾部删除Unshift()头部添加 shift()头部删除请求的时候get 和post⽅式的区别?⼀个在url后⾯ ⼀个放在虚拟载体⾥⾯有⼤⼩限制安全问题应⽤不同 ⼀个是论坛等只需要请求的，⼀个是类似修改密码的;和apply的区别(this,obj1,obj2,obj3)(this,arguments)请求时，如何解释json数据使⽤eval parse,鉴于安全性考虑 使⽤parse更靠谱;7.事件委托是什么让利⽤事件冒泡的原理，让⾃⼰的所触发的事件，让他的⽗元素代替执⾏！8.闭包是什么，有什么特性，对页⾯有什么影响?简要介绍你理解的闭包闭包就是能够读取其他函数内部变量的函数。9.添加 删除 替换 插⼊到某个接点的⽅法Child()Child10.说⼀下什么是javascript的同源策略？⼀段脚本只能读取来⾃于同⼀来源的窗⼝和⽂档的属性，这⾥的同⼀来源指的是主机名、协议和端⼝号的组合11.编写⼀个b继承a的⽅法;JavaScript11function A ( name ) { this . name = name ; this . sayHello = function ( ) { alert ( this . name +” say Hello !” ) ; } ;}function B ( name , id ) { this . temp = A ; this . temp ( name ) ;
//相当于new A(); delete this . temp ;
this . id = id ;
this . checkId = function ( ID ) { alert ( this . id == ID ) } ;}12.如何阻⽌事件冒泡和默认事件JavaScript12345678function stopBubble ( e ){ if ( e && e . stopPropagation ) e . stopPropagation ( ) else window . event . cancelBubble = true}return false13.下⾯程序执⾏后弹出什么样的结果?---0,301function fn ( ) {171819function fn ( ) { this . a = 0 ; this . b = function ( ) { alert ( this . a ) }}fn . prototype = { b : function ( ) { this . a = 20 ; alert ( this . a ) ; } , c : function ( ) { this . a = 30 ; alert ( this . a ) ; }}var myfn = new fn ( ) ;myfn . b ( ) ;myfn . c ( ) ;14.谈谈This对象的理解。this是js的⼀个关键字，随着函数使⽤场合不同，this的值会发⽣变化。但是有⼀个总原则，那就是this指的是调⽤函数的那个对象。this⼀般情况下：是全局对象Global。 作为⽅法调⽤，那么this就是指这个对象15.下⾯程序的结果11function fun ( n , o ) { console . log ( o ) return { fun : function ( m ) { return fun ( m , n ) ; } } ;}var a = fun ( 0 ) ; a . fun ( 1 ) ; a . fun ( 2 ) ; a . fun ( 3 ) ;var b = fun ( 0 ) . fun ( 1 ) . fun ( 2 ) . fun ( 3 ) ;var c = fun ( 0 ) . fun ( 1 ) ; c . fun ( 2 ) ; c . fun ( 3 ) ;//答案：//a: undefined,0,0,0//b: undefined,0,1,2//c: undefined,0,1,116.下⾯程序的输出结果JavaScript123456789var name = 'World!' ;( function ( ) { if ( typeof name === 'undefined' ) { var name = 'Jack' ; console . log ( 'Goodbye ' + name ) ; } else { console . log ( 'Hello ' + name ) ; }} ) ( ) ;17.了解Node么？Node的使⽤场景都有哪些？⾼并发、聊天、实时消息推送18.介绍下你最常⽤的⼀款框架jquery,rn,angular等;19.对于前端⾃动化构建⼯具有了解吗？简单介绍⼀下Gulp,Grunt等；20.介绍⼀下你了解的后端语⾔以及掌握程度其它1.对Node的优点和缺点提出了⾃⼰的看法？(优点）因为Node是基于事件驱动和⽆阻塞的，所以⾮常适合处理并发请求，因此构建在Node上的代理服务器相⽐其他技术实现（如Ruby）的服务器表现要好得多。此外，与Node代理服务器交互的客户端代码是由javascript语⾔编写的，因此客户端和服务器端都⽤同⼀种语⾔编写，这是⾮常美妙的事情。（缺点）Node是⼀个相对新的开源项⽬，所以不太稳定，它总是⼀直在变，⽽且缺少⾜够多的第三⽅库⽀持。看起来，就像是Ruby/Rails当年的样⼦。2.你有哪些性能优化的⽅法？（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指尽量不使⽤⽂件系统作为缓存、减少读写⽂件次数等。程序优化永远要优化慢的部分，换语⾔是⽆法“优化”的。状态码有那些？分别代表是什么意思？100-199 ⽤于指定客户端应相应的某些动作。200-299 ⽤于表⽰请求成功。200-299 ⽤于表⽰请求成功。300-399 ⽤于已经移动的⽂件并且常被包含在定位头信息中指定新的地址信息。400-499 ⽤于指出客户端的错误。400 1、语义有误，当前请求⽆法被服务器理解。401 当前请求需要⽤户验证 403 服务器已经理解请求，但是拒绝执⾏它。500-599 ⽤于⽀持服务器错误。 503 – 服务不可⽤4.⼀个页⾯从输⼊ URL 到页⾯加载显⽰完成，这个过程中都发⽣了什么？（流程说的越详细越好）查找浏览器缓存DNS解析、查找该域名对应的IP地址、重定向（301）、发出第⼆个GET请求进⾏HTTP协议会话客户端发送报头(请求报头)⽂档开始下载⽂档树建⽴，根据标记请求所需指定MIME类型的⽂件⽂件显⽰浏览器这边做的⼯作⼤致分为以下⼏步：加载：根据请求的URL进⾏域名解析，向服务器发起请求，接收⽂件（HTML、JS、CSS、图象等）。解析：对加载到的资源（HTML、JS、CSS等）进⾏语法解析，建议相应的内部数据结构（⽐如HTML的DOM树，JS的（对象）属性表，CSS的样式规则等等）5.你常⽤的开发⼯具是什么，为什么？Sublime,Atom,Nodepad++;6.说说最近最流⾏的⼀些东西吧？常去哪些⽹站？、MVVM、React-native,Angular,Weex等CSDN,Segmentfault,博客园,掘⾦,Stackoverflow,伯乐在线等
发布评论