前端面试总结(转载请标明)
最近在准备找工作,心理压力过大,把准备的面试题都整理出来了。。刚刚把前端的整理好,后端的还在整理中。。有哪里不对的还请大家指出
web前端优化
- JS/CSS:
JS会阻塞页面渲染,放在页面最下方;
CSS在页面顶部加载。避免CSS表达式
合并重用相同的代码块,对文件进行合并压缩,减少HTTP请求数- 图片:合并压缩图片,减少HTTP请求数
- 页面优化:
结构语义化,优化body里面的标签
优化title
,description
,keywords
等- 服务端:(根据实际情况而定)
开启gzip
/bzip2
压缩
使用HTTP的keep-alive
减少连接数
开启Etags
,实体标签,进行页面缓存
开启APC
,opcode
缓存
memcache
/redis
数据缓存
代码优化
ajax跨域
- 代理
dataTpye: "jsonp"
或是一些其他的可以跨域的标签(img
iframe
等)header("Access-Control-Allow-Origin:*");
- jQuery
getJson()
(jquery
jsonp
)
事件捕获/事件冒泡
- 捕获由父级到子级
- 冒泡由子级到父级
element.addEventListener(event, function, useCapture);
useCapture
true - 事件句柄在捕获阶段执行
false- false- 默认。事件句柄在冒泡阶段执行
- 事件按顺序绑定
事件委托/事件绑定
- 委托在处理速度和内存占用上都优于事件绑定
- 但委托会在事件冒泡中造成性能损失
委托对未来元素有效,事件绑定只对当前已有元素有效,对脚本后来生成的元素无效
on > delegate > live > bind
bind
直接绑定,只对现有元素有效live
通过冒泡匹配到对应的元素,对未来有效delegate
相对于live
更精确on
是以上几种的综合体
立即执行函数
(function(){}())
(function(){})()
只用于函数表达式 例:
var kof = function(){}()
可以模仿出一个私有作用域,不会遗留全局变量,不会污染全局空间,用于JS模块化编程,又被称作“匿名包裹器”、“命名空间”
阻止冒泡
return false
event.target == event.currentTarget
event.stopPropagation
event.preventDefault
为什么使用闭包
进行信息的隐藏和封装,模拟一些 OO 的特性,避免变量污染
函数表达式 和 函数声明
变量提升(Hoisting)
会将变量声明过程提升到顶部
var a = 6;setTimeout(function () {alert(a);var a = 666;}, 1000);a = 66; // undefined
作用域链
当代码在一个环境中执行时,会创建变量对象的的一个作用域链(scope chain)。作用域链的用途,是保证对执行环境有权访问的所有变量和函数的有序访问。作用域链的前端,始终都是当前执行的代码所在环境的变量对象。如果这个环境是一个函数,则将其活动对象作为变量对象
每一个函数都有自己的执行环境,当执行流进一个函数时, 函数环境 就会被推入一个 环境栈 中,而在函数执行之后,栈将其环境弹出,把控制权返回给之前的执行环境,这个 栈 也就是 作用域链
_proto_ 与 prototype
__proto__
是指向其原型对象的引用
原型链
__proto__
prototype
- 原型继承链
延迟执行 和 延迟加载
setTimeout()
/ clearTimeout()
lazyload.js
通过ajax
实现延迟加载
setTimeout()
/ clearTimeout()
加入到队列末执行
var kof = 6;setTimeout(function () {alert(kof);}, 1000);kof = 66; // 66
用于清除 jQuery 操作
setInterval()
/ clearInterval()
用于计时器操作
模块化编程思想
模块化编程,高内聚,低耦合
保证各模块之间的独立性,使各模块之间的依赖关系变的更加明确
- 原始写法:
function module () {}
污染全局变量,变量名可能冲突,各模块之间依赖关系不明确
- 面向对象:
var module = new Object({});
会暴露模块成员变量,能够从外部修改
- 立即执行函数:
var module = function () {var _sum = 0;var init = 100;var count = function () {return _sum + 1;};return {init: init;count: count;};}();
标准模块写法,只能访问 return 的值
- 继承:
var module = function (mod) {mod.k1 = function () {}();return mod;}(module);
- 防止空对象报错
var module = function (mod) {mod.k1 = function () {}();return mod;}(module || {});
- 输入全局变量
var module = function ($) {}(jQuery);
显示输入其他模块
CommonJS 规范
同步加载模块,如果模块太大会阻塞渲染
后期seaJS / CMD
AMD 规范
异步模块定义
require.js / curl.js
<script src="js/require.js" defer async="true"></script>
require([module], callback);
defer
: HTML4 中的异步加载
async
: HTML5 中的异步加载,不阻塞渲染
JavaScript 数据类型
数据类型
boolean
—— 布尔值;string
—— 字符串;number
—— 数值;null
—— 空;object
—— 对象;undefined
—— 未定义;
function
—— 函数;array
—— 数组;json
—— json;NaN
—— 非法数字(not a number)
引用类型
Object
Array
Function
attribute / property
attribute
指的是页面标签中的可见的属性,通过setAttribute
getAttribute
设置与获取property
指的是标签的特有属性,通过面向对象的方式获取
jsonp 原理
- 利用
$.ajax({ async:false,url: http://跨域的dns/document!searchJSONResult.action,type: "GET",dataType: 'jsonp',jsonp: 'jsoncallback',data: qsData,timeout: 5000,beforeSend: function(){//jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了},success: function (json) {//客户端jquery预先定义好的callback函数,成功获取跨域服务器上的json数据后,会动态执行这个callback函数if(json.actionErrors.length!=0){alert(json.actionErrors);}genDynamicContent(qsData,type,json);},complete: function(XMLHttpRequest, textStatus){$.unblockUI({ fadeOut: 10 });},error: function(xhr){//jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了//请求出错处理alert("请求出错(请检查相关度网络状况.)");}});
JavaScript 同源策略
在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略)。所谓同源是指,域名,协议,端口相同
这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容
字符串转化
parseInt()
parseFloat()
return NaN / number
Boolean(value)
Number(value)
String(value)
String.toString()
- 利用 js 弱类型,使用算术运算,实现字符串到数字的类型转换
XMLHttpRequest
xmlhttp=null;if (window.XMLHttpRequest) {// code for all new browsersxmlhttp=new XMLHttpRequest();} else if (window.ActiveXObject) {// code for IE5 and IE6xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");} if (xmlhttp != null) {xmlhttp.open("GET",url,true);xmlhttp.onreadystatechange = function () {if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {var data = xmlhttp.responseText;}xmlhttp.send();}}
JavaScript 继承实现
原型继承
实例既是父类的实例,又是子类的实例,但无法多重继承
function Gizmo(id) { this.id = id; } Gizmo.prototype.toString = function () { return "gizmo " + this.id; }; function Hoozit(id) { this.id = id; } Hoozit.prototype = new Gizmo(); Hoozit.prototype.test = function (id) { return this.id === id; };
Hoozit.prototype = new Gizmo();
是原型继承的核心,把父类 prototype
赋给子类 prototype
apply
call
,重定向 this
,实现继承
可以实现多重继承,但对象不是父类的实例
function Animal(name){ this.name = name; this.showName = function(){ alert(this.name); } } function Cat(name){ Animal.call(this, name); } var cat = new Cat("Black Cat"); cat.showName();
实例继承
生成的对象实质仅仅是父类的实例,并非子类的对象;返回父类实例的一个扩充,不能多继承
var Base = function () {this.level = 1;this.name = "base";this.toString = function () {return "base";};};Base.CONSTANT = "constant";var Sub = function () {var instance = new Base();instance.name = "sub";return instance;};
自己定义继承函数
Function.method('inherits', function (parent) {//...});
this
指向当前对象,使用
call
apply
可以改变指向
动画算法
拖拽实现
熟悉的框架
模块化工具的特点
模块化工具
AMD / CMD
CommonJS
sea.js
webpack
- 上古时期 Module? 从设计模式说起
- 石器时代 Script Loader 只有封装性可不够,我们还需要加载
- 蒸汽朋克 Module Loader 模块化架构的工业革命
- 号角吹响
CommonJS
征服世界的第一步是跳出浏览器- 双塔奇兵
AMD
/CMD
浏览器环境模块化方案- 精灵宝钻
Browserify
/Webpack
大势所趋,去掉这层包裹!王者归来
ES6
Module 最后的战役(ECMAScript 6
)模块 是指可组合成系统的、具有某种确定功能和接口结构的典型的通用独立单元
- 通过模块化工具对代码进行组织编排,使各个模块的功能单一独立,实现高内聚,低耦合,明确各个模块之间的依赖关系,便于资源的统一管理
- 便于多人开发时制定统一的标准规范,以便后期的维护测试
JavaScript 压缩合并
gulp
grunt
- 批处理的方式 .bat
copy a.js+b.js final.js /b
———————————————————————————————————————
结构、表现、行为分离
- 用
html
进行结构化,抛开一切的表现形式,只考虑语义- 用
CSS
进行表现处理,包括html
的默认表现,他拥有了视觉表现,这个表现体现出了结构化,也体现出了用户体验,用户体验中包含了交互的排版和视觉体验javascript
行为,比如各种事件的行为
CSS 模块化
配合
less / sass / stylus
实现 css 的封装继承多态
CSS reset
重置浏览器的CSS默认属性,因为浏览器的品种很多,每个浏览器的默认样式也不同,所以,通过重置CSS属性,然后再将它统一定义,就可以产生相同的显示效果。
包裹性
其宽度自适应于内部元素
浮动,absolute
,inline-block
,overflow:hidden; zoom:1;
对于,浮动(float
),绝对定位(position:absolute
)以及inline-block
的包裹性称之为“ 主动包裹 ”,其标签宽度会收缩至内部元素大小;而overflow
与zoom
,称之为“ 被动包裹 ”。
浮动的原理和工作方式
浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留
- 浮动会导致高度塌陷
清除浮动
<div style="clear:both;"></div>
overflow:hidden; zoom:1;
- after + zoom方法
.fix{zoom:1;}.fix:after{display:block; content:'clear'; clear:both; line-height:0; visibility:hidden;}
定位
不要总是用
float
float
后注意clear
position: relative;
相对于前一个父级元素,用margin
调整
display: inline
/inline-block
标签比较
<b>
与 <strong>
, <i>
与 <em>
一个是物理标签,一个是逻辑标签,前者强调的是物理行为,后者强调了当前环境的语义,更符合
标签语义化
,更符合w3c标准
<h1>
与 <title>
SEO 时,
title
权重高于h1
<alt>
与 <title>
alt
主要是为图像未加载时做的说明(只用于img
area
input
)
title
用于文字或链接加注释
双飞翼布局
双飞翼布局:
1、三列布局,中间宽度自适应,两边定宽;
2、中间栏要在浏览器中优先展示渲染。
<style>.column { float:left; height:200px; }.header { height:50px; width:100%; display:inline-block; background:#000; }.footer { height:100px; width:100%; display:inline-block; background:#000; } #container { width:100%; }#center_div { width:100%; }#center_div #mainWrap { margin-left:200px; margin-right:220px; background:#abcdef; height:100%; }#left_div { width:200px; margin-left:-100%; background:#D1EB2F; }#right_div { width:220px; margin-left:-220px; background:#ccc; }</style>
<div class="header">header</div>
<div id="container"><div id="center_div" class="column"><div id="mainWrap">main</div></div><div id="left_div" class="column">left</div> <div id="right_div" class="column">right</div>
</div>
<div class="footer">footer</div>
圣杯布局
圣杯布局:
1、三列布局,中间宽度自适应,两边定宽;
2、中间栏要在浏览器中优先展示渲染。
3、与双飞翼布局相比,使用relative
定位,但少了一个div
块
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">.main { float:left; width:100%; background:#39c;height:300px;} .sub { float:left; width:200px; margin-left:-100%; background:#f60;height:300px;position:relative;left:-200px;} .extra { float:left; width:220px; margin-left:-230px;background:#666;height:300px;position:relative;right:-230px;} #bd { padding:0 220px 0 200px; }</style>
<div id="page"> <div id="hd">header</div> <div id="bd"> <div class="main">main</div> <div class="sub">left</div> <div class="extra">right</div> </div> <div id="ft">footer</div>
</div>
IE 某些兼容性问题
CSS 合并方法
grunt
gulp
- 批处理的方式 .bat
copy a.css+b.css final.css /b
盒子模型
元素内容(element content)、内边距(padding)、边框(border) 和 外边距(margin)
CSS 动画原理
关于 less / sass / stylus 等 CSS 预处理器
- 开始的时候,因为配合less,能够很好的进行模块化开发,并且代码量很少很少,似乎是弥补了css原本的缺陷,他有变量,能像函数一样用,有嵌套,能够更直观的进行开发并使工作量大大减少,有一段时间简直爱上了他。不过慢慢的,开始意识到问题了
- 因为他给我了一种错觉,让我过分依赖于less了,他的确很强大,能够用变量全局控制一些值,不过在某些情况下效果也不是很好,虽然你的工作量小了,但是编译后的css代码量并没有减少,在某些情况下甚至会出现更大的代码冗余,就好比说,有些样式可以直接通过一个class进行重用的,但是盲目的使用less反而会使代码冗余量更大
- 归根到底,less css还是要编译你写的.less文件,最终生成的还是标准的css代码。换句话说,就是你再怎么定义变量,再怎么计算,最终它生成的还是一个固定的数值,帮我们减少的只是我们书写的时间
HTML5 新特性
- 新的文档类型:
<!DOCTYPE html>
- 脚本和链接无需指定
type
属性- 语义 Header 和 Footer
<header>....</header><footer>....</footer>
- Email Inputs
如果我们给Input的type
设置为- 内容可编辑,只需要加一个
contenteditable
属性- 重新定义的
<small>
<small>
已经被重新定义了,现在被用来表示小的排版,如网站底部的版权声明- Placeholders
这个input属性的意义就是不必通过 js 来做placeholder
的效果
<input type="search" name="search" placeholder="please entry the keywords" />
- IE和HTML5
默认的,HTML5新元素被以inline
的方式渲染,但IE会忽略这些样式- Local Storage
使用Local Storage可以永久存储大的数据片段在客户端(除非主动删除),目前大部分浏览器已经支持,在使用之前可以检测一下window.localStorage
是否存在required
属性
required
属性定义了一个input是否是必须填写的,你可以像下面这样声明
<input type="text" name="someInput" required>
或者
<input type="text" name="someInput" required="required">
autofocus
属性
正如它的词义,就是聚焦到输入框里面
<input type="text" name="someInput" placeholder="focus" required autofocus>
audio
支持video
支持- 预加载视频
preload
属性就像它的字面意思那么简单,你需要决定是否需要在页面加载的时候去预加载视频
<video preload>
- 显示视频控制
<video preload controls>
- 正则表达式
由于pattern
属性,我们可以在你的markup里面直接使用正则表达式了
<input type="text" name="username" id="username" placeholder="" pattern="[A-Za-z]{4,10}" autofocus required>
- 检测属性支持
除了Modernizr之外我们还可以通过javascript简单地检测一些属性是否支持,如:
<script> if (!'pattern' in document.createElement('input') ) { // do client/server side validation}
</script>
- Mark元素
把<mark>
元素看做是高亮的作用- Output元素
<output>
元素用来显示计算结果,也有一个for属性
<input type="range" id="a" value="50">100+<input type="number" id="b" value="50">=<output name="x" for="a b"></output>
- 扩充了
input
的type
属性- 重新定义
<small>
在HTML4或XHTML中,<small>
元素已经存在。然而,却没有如何正确使用这一元素的完整说明。在HTML5中,<small>
被用来定义小字。试想下你网站底部的版权状态,根据对此元素新的HTML5定义,<small>
可以正确地诠释这些信息。- 什么时候用
<div>
HTML5已经引入了这么多元素,那么div我们还要用吗?div
你可以在没有更好的元素的时候去用。
Modernizr.js
专为HTML5和CSS3开发的功能检测类库
———————————————————————————————————————
HTTP 状态码
- 1XX —— 消息报文
- 2XX —— 成功
- 3XX —— 重定向
- 4XX —— 请求错误
- 5XX / 6XX —— 服务器错误
Cache-control
缓存控制
页面加载过程
浏览器渲染
加载:
- 加载过程中遇到外部css文件,浏览器另外发出一个请求,来获取css文件。遇到图片资源,浏览器也会另外发出一个请求,来获取图片资源。这是异步请求,并不会影响html文档进行加载
内部<style></style>
这种样式定义,也可能会阻塞渲染- 但是当文档加载过程中遇到js文件,html文档会挂起渲染(加载解析渲染同步)的线程,不仅要等待文档中js文件加载完毕,还要等待解析执行完毕,才可以恢复html文档的渲染线程。
原因:JS有可能会修改DOM
解析:
- html文档解析生成解析树即dom树,是由dom元素及属性节点组成,树的根是document对象,(DOM 文档对象模型)
- css解析将css文件解析为样式表对象。该对象包含css规则,该规则包含选择器和声明对象
- js解析因为文件在加载的同时也进行解析,加载时解析
渲染:
- 为每一个元素查找到匹配的样式规则,需要遍历整个规则表(解析后生成的最终 CSS 样式表)
javascript-event-loop 事件循环
由于 javascript引擎线程为单线程,所以代码都是先压到队列,采用先进先出的方式运行,事件处理函数,timer函数也会压在队列中,不断的从队头取出事件,这就叫:
javascript-event-loop
前后端协同开发
- 确定功能,根据功能制定前后端接口
- 前后端分别进行开发,并且分别进行测试
- 前端先使用模拟数据
- 前后端完成后,进行连接调试
session
基础算法
- 各种排序算法
- 一些链表,队列,栈的操作
- 还有些常见的比较巧妙的计算方式
- 智力问答题
前端的暂时就这些了。。后端整理中,还有啊各位找工作的应届生实习生大大,一定好好看数据结构和操作系统。。各个原理一定要搞清楚,千万不要 觉得自己会,更不要面试的时候给自己挖坑。。到时候怎么挂的都不造
期待能找到工作吧。。
最后,转载请注明哈,毕竟手敲得很累的(生无可恋)。。
前端面试总结(转载请标明)相关推荐
- uniapp:插件Luch_request 修改全局默认配置(转载请标明原创)
目的是为了方便前端以后修改接口,以下是修改方法. 一.插件市场 导入 luch-request ,导入成功后,根目录有一个文件夹叫 js_sdk ,打开会发现有一个 luch-request 文件夹. ...
- 大话“高可用”-Part1∶什么是高可用?(原创,转载请标明出处)
很多人曾问过我,什么是高可用,你对高可用的理解是什么样子的,往往我会反问三个问题∶ 1.高可用 = 100%可用 ? 2.高可用= 真可用? 3.高可用的"可用"受众体是谁?你是否 ...
- 本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/jinjazz/archive/2009/04/29/4138000.aspx...
using System; using System.Data; using System.Data.SqlClient; using System.Data.SqlTypes; using Micr ...
- 数据结构考研(转载请标明出处,学习辛苦整理)
目录 线性表 一.顺序存储 1.顺序存储的静态分配 2.顺序存储的动态分配 3.顺序存储线性表的插入 4.顺序存储线性表的删除 二.链式存储 5.链式存储线性表的结构 6.头插法建立单链表 7.尾插法 ...
- STL学习笔记 ---- 由set的声明所引发的自定义比较的实现方式 作者:winterTTr(转载请注明)...
对于set这个STL容器来说,就实现来说,我了解到的版本,是通过RB-Tree的方式实现的,内部逻辑似乎是采用Tree结构的平行方式进行展开,换句话说也就是将Tree保存在类似vector这样的线性结 ...
- 2019年六月前端面试经验总结
四月底从上家公司离职,五月六月陆陆续续面试了十几家公司,也拿到了几个offer.总体来说大环境和就业形势还是比较不乐观的,面试的人多,而招的人少,对前端的的要求也比以往要高,这些先不具体讨论,这里主要 ...
- [转]前端开发者不得不知道的41个常用的网站,因为这41个网站我成了别人眼中的巨佬(转载请删除括号里的内容)
实用的网站数不胜数,本文只列出了冰山一角,更多有趣有用的网站等待大家发现~~ 目录 1.npm 2.Express 3.BootCDN 4.mongoose 5.Vue.js 6.React 7.BU ...
- [转]前端开发必备神级资源(转载请删除括号里的内容)
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/weixin_43606158/arti ...
- [转](1条消息) 前端必知:针对高分辨率屏幕的样式优化(转载请删除括号里的内容)
苹果定义高分屏(retina)已经好久了,只是最近才有越来越多的网站开始重视高分屏下的表现,QQ空间也早支持高分屏了,CSS Gaga也加入了对@2x图片的支持.嗯,迟到的文章,和大家简单的分享下. ...
最新文章
- linux root权限_深入了解 Linux 权限
- android studio ndk-builld方式开发
- Microsoft SQL Server 2008技术内幕:T-SQL查询---------查询优化
- 分享:MySQL 学习笔记(二)
- 【Hadoop】Hadoop生态圈基本组件介绍
- 1-2 实验2 点对点通信
- 磁条卡知识学习与数据解析
- 学得到专栏作者如何回答问题:万维钢(1)
- Vue.js :使用LODOP打印表格文件
- 论智能问答中的对抗攻击及防御策略
- yolov5模型训练流程
- 【免费毕设】JSP旅游网站建设设计与实现(源代码+论文)
- 虚拟机中如何安装Arch Linux操作系统
- Android FFmpeg源码编译及在Android studio的集成
- 【工具】收藏夹在谷歌和Edge浏览器中间的导出和导入
- Matlab数组创建、数组寻址、数组排序、数组检测、数组结构
- multiple definition of `xxx'
- 2006-04-14
- 手机聊天APP技术开发
- 阿里架构之dubbo
热门文章
- OSChina 周六乱弹 ——对,假期的最后一天咯~!
- ffmpeg关于sws_scale的那些事儿
- keep-alive上加v-if导致缓存失效
- blob导出的excel文件打不开,responseType: “blob“ 但 response回应类型不是blob类型,response.data是乱码。
- 数字时钟程序c语言,C语言实现电子时钟程序
- FPGA中利用ICAP原语实现Multiboot功能-总结篇
- Centos7.6下Ceph搭建
- 使用SSD mobilenet训练自己的数据集
- 2018面试的-5分钟自我介绍建议
- tp5:为什么find()出来的数据有时候可以用toArray() 有时候会报错?