前端面试资料整

总体涉及问题概述:

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是专门针对含有框架元素页面使用。严格方式是最理想的,但是过渡方式比较方便,适合大多数开发者。
2,兼容性

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               \9
     ie8 ie9 ie10               \9\0
     ie8 ie9 ie10 ie11      \0
     none?                        \8\9\0
       ie6        下划线
     ie7       + 
     ie6 ie7 *
     ie10 ie11@cc_on
     if(/*@cc_on!*/false){document.documentElement.className+='ie'+document.documentMode

     
其它浏览器默认字体大小不同之类的统一设置即可。针对问题修改熟悉之后问题不大。
3,说说对haslayout的理解
在ie中,元素要么自己对自身内容进行大小计算和组织,要么依赖父元素进行计算。元素haslayout属性为true时元素扩展去包含流出内容,如果为false则不包含,就会出现很多bug。
ie并非所有元素都有默认布局,以提高性能和减少内存。大部分错误可以通过设置width height float zoom 绝对定位 等来激发haslayout。
4,清除浮动
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;正文中使用邻接元素清理浮动。
5,伪元素的作用:闭合浮动
6,哪些属性可以激活BFC(block formatting contexts),其作用是?
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,语义化是指开发者阅读和写出优雅代码的同时让搜索引擎爬虫更好的解析页面。
作用:
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标记;
9,css选择符有哪些?哪些属性可以继承?优先级如何?
css选择符:
通配选择符*
标签选择符body div p span
群组选择符,,{}
层次选择符 div p{}
id选择符
class 选择符

优先级
important> #div>.div>标签选择器
继承属性<具体属性
越具体属性越有效

可继承属性
color cursor line-height list-style font-size font-family font-weight text-align word-spacing
10,前端优化手段
10.1:减少http请求:css sprites雪碧图;css js合并;
10.2:精简js css移出重复脚本;
10.3:css页头加载 js页尾加载;因为页面逐步呈现
10.4:压缩组件,使用Gzip方式
10.5:避免重定向redirect 自动url1跳转url2
     301永久性转移;输入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的区别;


1,2,js闭包
运行机制是函数执行时为变量划分内存空间,当函数执行完内存收回。
其次,函数寻找变量从自身变量开始 其次寻找父类变量 祖先类变量
如果两个函数嵌套 子函数寻找变量时父类变量内存如果被回收则无法访问 因此把函数和可能用到变量封装实现闭包
13,js实现排序:
输入为字符串:‘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指向的服务器建立连接,然后浏览器才能向服务器发送请求信息,服务器在接受到请求的信息后再返回相应的信息,浏览器接收到来自服务器的应答信息后,对这些数据解释执行。


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值