转载自：
前言
我是一名前端开发，从2016年6月毕业到如今步入工作，期间也面试了一些公司，参考过一些面试文档，学习了一些面试宝典，掌握了一些面试、笔试技巧和经验，所以就总结了一些优质的前端面试题以及面试要点，初学者阅后也要用心钻研其中的原理，重要知识需要系统学习，透彻学习，才能形成自己的知识链，以不变应万变，万不可投机取巧，只求面试过关哦！
1、HTML&CSS
2、JavaScript
3、jQuery·
对象的结构、jQuery的方法挂在哪里、插件制作、jQuery的常用方法、选择器、jQuery的事件用法
4、其他
HTTP、安全、正则、优化、重构、响应式、移动端、团队协作、后台相关、编辑器和自动化工具、新技术、前端自动化、可维护、SEO、UED、架构、职业生涯等
作为一名前端工程师，无论工作年头长短都应该必须掌握的知识点：
备注：
根据自己需要选择性阅读，面试题是对理论知识的总结，让自己学会应该如何表达。资料答案不够正确和全面，欢迎补充答案、题目；最好是现在网上没有的。格式不断修改更新中。
HTML
标签闭合、标签小写、不乱嵌套、使用外链css和js、结构行为表现的分离。
a b span img input select strong（强调的语气）div ul ol li dl dt dd h1 h2 h3 h4…p` <br> <hr> <img> <input> <link> <meta><area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>body,ul,li,ol,dl,dt,dd,form,input,h1,h2,h3,h4,h5,h6,p{
margin:0;
padding:0;
}#box{ float:left; width:10px; margin:0 0 0 100px;}_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别).bb{background-color:#f1ee18;/*所有识别*/.background-color:#00deff9; /*IE6、7、8识别*/+background-color:#a200ff;/*IE6、7识别*/_background-color:#1e0bd1;/*IE6识别*/
} IE下,可以使用获取常规属性的方法来获取自定义属性,
也可以使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.
IE下,even对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
-webkit-text-size-adjust: none; 解决.L-V-H-A : a:link {} a:visited {} a:hover {} a:active {} (写)描述一段语义的html代码
（HTML5中新增加的很多标签（如：<article>、<nav>、<header>和<footer>等）就是基于语义化设计原则）
< div id="header"> < h1>标题< /h1> < h2>专注Web前端技术< /h2> < /div>调用localstorge、cookies等本地存储方式
Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基于 multipart 编码发送 XHR 、 基于长轮询的 XHR
CSS
（1）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading;
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).
1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = “external”]）
9.伪类选择器（a: hover, li: nth – child）
<p> 元素的每个 <p>元素。<p> 元素的每个 <p>元素。<p> 元素的每个 <p> 元素。每个 <p>元素。每个 <p> 元素。:checked 单选框或复选框被选中。
// 给div设置一个宽度，然后添加margin:0 auto属性
div{width:200px;margin:0 auto;
}结构层 Html 表示层 CSS 行为层 js
1.使用空标签清除浮动clear:both（缺点，增加无意义的标签,让人感觉很不爽）
2.使用overflow:auto（使用zoom:1用于兼容IE，缺点：内部宽高超过父级div时，会出现滚动条）
3.是用afert伪元素清除浮动(IE8以上和非IE浏览器才支持，目前：大型网站都有使用，如：腾迅，网易，新浪等等)
1.确定容器的宽高 宽500 高 300 的层
2.设置层的外边距
.div { Width:500px ; height:300px;//高度可以不设Margin: -150px 0 0 -250px;position:relative;相对定位background-color:pink;//方便看效果left:50%;top:50%;
} 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选择器 多背景 rgba
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, 5b8b4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }综上所述，1、可以把它看作是一个类似优先级的机制， "position:absolute" 和 "position:fixed" 优先级最高，有它存在的时候，浮动不起作用，'display' 的值也需要调整； 2、元素的 'float' 特性的值不是 "none" 的时候或者它是根元素的时候，调整 'display' 的值； 3、非根元素，并且非浮动元素，并且非绝对定位的元素，'display' 特性值同设置值。
这从另一个侧面说明了一个问题：浮动或绝对定位的元素，只能是块元素或表格。
（W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关 系和相互作用。）
SASS、LESS
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms
移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing
JavaScript
它的功能是把对应的字符串解析成JS代码并运行； 应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。
目前，null和undefined基本是同义的，只有一些细微的差别。
null表示"没有对象"，即该处不应该有值。典型用法是：
（1） 作为函数的参数，表示该函数的参数不是对象。
（2） 作为对象原型链的终点。
PrototypeOf(Object.prototype)
// null undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：
（1）变量被声明了，但没有赋值时，就等于undefined。
（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
（3）对象没有赋值的属性，该属性的值为undefined。
（4）函数没有返回值时，默认返回undefined。
var i;
i // undefinedfunction f(x){console.log(x)}
f() // undefinedvar o = new Object();
o.p // undefinedvar x = f();
x // undefined // event(事件)工具集，来源：github/markyunmarkyun.Event = {// 页面加载完成后readyEvent : function(fn) {if (fn==null) {fn=document;}var oldonload = load;if (load != 'function') {load = fn;} else {load = function() {oldonload();fn();};}},// 视能力分别使用dom0||dom2||IE方式 来绑定事件// 参数： 操作的元素,事件名称 ,事件处理程序addEvent : function(element, type, handler) {if (element.addEventListener) {//事件类型、需要执行的函数、是否捕捉element.addEventListener(type, handler, false);} else if (element.attachEvent) {element.attachEvent('on' + type, function() {handler.call(element);});} else {element['on' + type] = handler;}},// 移除事件removeEvent : function(element, type, handler) {if (veEnentListener) {veEnentListener(type, handler, false);} else if (element.datachEvent) {element.detachEvent('on' + type, handler);} else {element['on' + type] = null;}}, // 阻止事件 (主要是事件冒泡，因为IE不支持事件捕获)stopPropagation : function(ev) {if (ev.stopPropagation) {ev.stopPropagation();} else {ev.cancelBubble = true;}},// 取消事件的默认行为preventDefault : function(event) {if (event.preventDefault) {event.preventDefault();} else {urnValue = false;}},// 获取事件目标getTarget : function(event) {return event.target || event.srcElement;},// 获取event对象的引用，取到事件的所有信息，确保随时能使用event；getEvent : function(e) {var ev = e || window.event;if (!ev) {var c = Event.caller;while (c) {ev = c.arguments[0];if (ev && Event == ev.constructor) {break;}c = c.caller;}}return ev;}};高并发、聊天、实时消息推送
number,string,boolean,object,undefined
通过原型和构造器
[1, NaN, NaN] 因为 parseInt 需要两个参数 (val, radix)，其中 radix 表示解析时用的基数。map 传了 3 个 (element, index, array)，对应的 radix 不合法导致解析失败。
学习前端的过程中，我整理了很多资料，也希望能共享出来帮助到更多刚接触或者接触前端不久的同学。不过也为了把控微信群的质量，入群的一定要是前端的小伙伴才可以。入群我就会把资料发给每个人，每天也会挑选前沿的前端高质量文章发到群里给大家学习。想加入的同学可以加 笑笑微信：iamaixiaoxiao，拉你入群。再次强调，保证群高质量，群非前端不加，请谅解哦。扫描微信二维码也可以。注明：今天先更新到这里，有一些问题没有给出答案提示，大家可以先自行思考一下，明天会继续更面试要点，期待你的到来！真心希望这些知识点可以帮到有需要的人。
本文发布于:2024-01-29 14:50:12，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170651101516048.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
