总体涉及问题概述:
TML&CSS:
对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端
JavaScript:
数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等。
其他:
HTTP、WEB安全、正则、优化、重构、响应式、团队协作、可维护、SEO、UED、架构、职业生涯
具体问题及个人理解:
1,doctype有跟没有的区别
声明页面使用规范 避免错乱,怪异模式
分为哪几种模式:XHTML 1.0中有3种DTD(文档类型定义):过渡的(transitional)、严格的(strict)和框架的(frameset)。严格的DTD不允许有任何表现层的标志和属性,框架的DTD是专门针对含有框架元素页面使用。严格方式是最理想的,但是过渡方式比较方便,适合大多数开发者。
1.1,浮动方向跟margin方向一致时会出现双倍margin ,设置display inline
1.2,透明度 ie用滤镜fliter
1.3,宽度问题ie会把padding作为内容宽度的一部分 设置!important
1.4,图片3px误差 设置为块元素 父元素设置fontsize:0
1.5,清除浮动时,需要设置.clearfix{zoom:1;} .clearfix:after{clear:both;content:"";display:block;height:0;visibility:hidden;}1.6,最后可以使用绝对定位或者hack
ie8 ie9 ie10 \9ie8 ie9 ie10 \9\0
ie8 ie9 ie10 ie11 \0none? \8\9\0
ie6 下划线
ie7 +ie6 ie7 *ie10 ie11@cc_on
if(/*@cc_on!*/false){document.documentElement.className+='ie'+document.documentMode
其它浏览器默认字体大小不同之类的统一设置即可。针对问题修改熟悉之后问题不大。
在ie中,元素要么自己对自身内容进行大小计算和组织,要么依赖父元素进行计算。元素haslayout属性为true时元素扩展去包含流出内容,如果为false则不包含,就会出现很多bug。
ie并非所有元素都有默认布局,以提高性能和减少内存。大部分错误可以通过设置width height float zoom 绝对定位 等来激发haslayout。
4.1,使用clear:both;的空元素4.2,浮动元素的容器浮动4.3,浮动元素邻接元素设置clear:both;4.4,浮动元素添加clearfix的class,并给这个class添加伪元素:after实现在末尾添加一个看不见的块元素:.clearfix{zoom:1;} .clearfix:after{clear:both;content:"";display:block;height:0;visibility:hidden;}4.5,浮动元素设置overflow:hidden/auto;ie6下父元素设置宽高或者zoom触发haslayout。。此方法是触发父元素的block formatting contexts(块级格式化上下文)使得父元素包含浮动元素。综合:页面主要布局使用:after伪元素方法清理浮动;在小模块ul里使用overflow:hidden;正文中使用邻接元素清理浮动。
float:left/right;overflow:hidden/auto/scroll;position:absolute/fixed;display:table-cell/table-caption/inline-block;
从样式看BFC跟普通容器一样,但是从功能看BFC元素是隔离的独立容器,不会受外面布局影响。同时,这种方法局限性比较大,只适合局部小模块。
7,position:relative;top:10何时top值失效,回原位?
8.1,用户体验好:适当的title和alt标签可以在图片未加载时提示信息
8.2,seo优化好,搜索引擎排名靠前
8.3,团队开发方便
书写规范,尽可能少的使用无语义div。
ol是有序列表 ul是无序列表;
strong重强调 b重加粗;
input写相应label标签;
a img写title alt;
html5新增语义化标签:header footer section;nav导航;article完整独立文章;aside侧边栏,广告等;hgroup标题元素组合;time时间;mark标记;
css选择符:通配选择符*标签选择符body div p span群组选择符,,{}层次选择符 div p{}id选择符class 选择符
important> #div>.div>标签选择器
继承属性<具体属性越具体属性越有效
10.1:减少http请求:css sprites雪碧图;css js合并;10.2:精简js css移出重复脚本;10.3:css页头加载 js页尾加载;因为页面逐步呈现10.4:压缩组件,使用Gzip方式10.5:避免重定向redirect 自动url1跳转url2301永久性转移;输入google.com就比www.google.com多一次重定向。牺牲性能提高用户体验的一种方式
302暂时性转移;我们请求A页面时由于某原因,请求被重定向到B页面。服务器首先为A页面请求返回302状态码表明要临时重定向,同时在响应头部包含新地址。浏览器收到回复后重新发送B页面请求。正常返回200状态码。
10.6:使用内容发布网络CDN:就近服务器访问。10.7:浏览器使用缓存加载更迅速;即添加expries头,设置缓存deadline,超过时间后重新加载10.8:减少DNS查询:dns缓存10.9:配置eTag
11,line-height:1.5 跟line-height:1.5em的区别;
输入为字符串:‘3^^ 4 11 06 7+ 9 2- 8 +5 0'输出字符串:’11 9 8 7+ 06 +5 4 3^^ 2- 0'let a="所给字符串";function compare(a,b){return a-b);a.sort(compare); //sort默认按照字符编码排序 如果自定义排序,后跟规定排序规则的函数
14,如果让你实现一个自动补全的组件,请写出代码的大概结构(对外api、参数、注释、html结构及其他)
15,如何编写一个jQuery插件,请写demo
16,什么是事件冒泡,如何阻止事件冒泡
17,jQuery的delegate函数是如何实现的
18,什么是变量声明提前
19,document.ready和document.load有什么区别
20,请给js数组原型扩展一个数组去重函数
我司面试题:
1,Doctype? 严格模式与混杂模式-如何触发这两种模式?
用于声明文档使用那种规范(html/Xhtml)一般为 严格 过度 基于框架的html文档
怪异模式(即兼容模式)服务于旧式规则,严格模式服务于标准规则。
浏览器根据doctype是否存在和使用的是那种dtd来决定触发哪种模式
2,行内元素有哪些?块级元素有哪些?CSS的盒模型?
块级元素:div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css盒模型:内容,border ,margin,padding
3,清除浮动的几种方式,优缺点
a.使用空标签清除浮动 clear:both(浏览器支持性好;增加无意义的标签)
b.使用overflow:auto(代码简洁;ie6需使用zoom:1触发haslayout,Firefox早期版本不支持,浏览器兼容不好;)
c.是用afert伪元素清除浮动(可重复利用;代码不是特简洁;)
4,图片如何实现垂直居中
a,父元素{display:table-cell; vertical-align:middle;}
b,利用vertical-align实现垂直,决定行高的是行内最高的元素的值
div span{height: 100%; display: inline-block;vertical-align: middle;}
div img{vertical-align: middle;}
<div><span></span><img src="111.jpg" alt="" /></div>
c,使用空白图片实现垂直对齐
5,对css3动画属性,svg,canvas的了解
css3动画属性有transition,animation,transform。transition可以直接定义动画时间,延迟,变化等,animation结合keyframe定义更为复杂的动画效果,transform定义静态属性,需要结合前两个使用。
svg canvas都是一种在网页上绘制图像的方法
但是svg绘制出来的每一个图形的元素都是独立的DOM节点,能够方便的绑定事件或用来修改。canvas输出的是一整幅画布;是不可操作的,如果要操作图形,就是直接操作整个canvas,即清空canvas和重绘
6,对sass的了解
Sass 是css制作框架,增加了规则、变量、混入、选择器、继承等等特性。Sass 生成良好格式化的 CSS 代码,易于组织和维护。Sass最后还是会编译出合法的CSS让浏览可以使用。
7,手机端是否接触,如何理解响应式布局
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,常用Media Queries针对不同分辨率实现。
js
1,js 数据类型有哪些 -----Number String Boolean NULL Undefined Object Array
2,对事件冒泡的理解
-----事件捕获:点击事件触发dom事件时,浏览器从根节点开始由外到内进行事件传播,事件冒泡相反是由内到外进行事件传播。dom事件流是先捕获再冒泡,即点击事件触发dom事件时,先进行事件捕获,捕获到事件源之后通过事件传播再进行事件冒泡。阻止事件冒泡用event.stopPropagation()。利用这三个可进行事件委托/事件代理。即父元素给子元素注册事件
var parent = document.getElementById("parent"); var child = document.getElementById("child"); parent.onclick = function(e){ if(e.target.id == "child"){ console.log("您点击了child元素") } }
3,jsonp是什么 怎么实现
4,对js命名空间的理解 如何实现
5,sort排序 ------a.sort(function(a,b){return a-b)}
6,实现一个函数clone,可以对js的5种主要数据类型(Number String Object Array Boolean)进行值复制。
引用类型--浅拷贝仅仅复制引用,a.obj===b.obj;深拷贝是创建一模一样对象,a.obj !== b.obj //===运算符当左右值是同一对象 即内存地址相同时为true,要想实现深复制,法1,要用递归。需递归至基本类型变量后进行拷贝 法2,json解析,然而使用这种方法会有一些隐藏的坑,它能正确处理的对象只有 Number, String, Boolean, Array, 扁平对象,即那些能够被 json 直接表示的数据结构
function deepcopy(o,c){
var c = c || {}
for( var i in o){
if(typeof o[i] === 'object'){
//对象类型深复制 Array属于对象类型
c[i] = (o[i].constructor === Array) ? [ ]:{ }; //此处constructor 等同于o[i] instanceof Array ? [] : {} ; Array 没有引号
deepcopy(o[i], c[i]);
}else{
c[i] = o[i];
}
}
return c;
}
JSON解析 var result =JSON.parse(JSON.stringify(objectaa));即可
7,写一个继承的例子,实例化后每个对象都有共同的方法与属性
8,写一个观察者模式的例子
9,打开一个页面的过程
在浏览器中输入"www.xxxxxx.com"并按下回车,浏览器再与这个URL指向的服务器建立连接,然后浏览器才能向服务器发送请求信息,服务器在接受到请求的信息后再返回相应的信息,浏览器接收到来自服务器的应答信息后,对这些数据解释执行。