前端开发知识点

HTML&CSS：

对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级、
HTML5、CSS3、Flexbox
复制代码

JavaScript：

数据类型、运算、对象、Function、继承、闭包、作用域、原型链、事件、RegExp、JSON、Ajax、
DOM、BOM、内存泄漏、跨域、异步装载、模板引擎、前端MVC、路由、模块化、Canvas、ECMAScript 6、Nodejs
复制代码

其他：

移动端、响应式、自动化构建、HTTP、离线存储、WEB安全、优化、重构、团队协作、可维护、易用性、SEO、UED、架构、职业生涯、快速学习能力
复制代码

CSS类

假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为100px，中间自适应。

请写出五到七种方案，并说出各种方案的优缺点和兼容性

1. float+margin 经典的包括圣杯布局和双飞翼布局;此方式不等高，而且会使用定位，扩展性差。
2. inline-block+marin+(calc) 三个并列排放都在一行,中间的宽度是calc(100%-240px) ，减去两边的宽度和加上margin值；另一种是在主体中添加一层div，然后设置margin，主体margin 0 -100px，center margin：0 120px；此方式不等高，使用定位，扩展性差。
3. table 设置con为display：table，左右和主体都是table-cell，左右宽度固定，中间自适应，并且等高。
4. position 纯定位，con设置position:absolute; 左右和主体都是relative，左右定宽，左右分别设置left和right，中间设置left、right一起设置。给con高度，高度固定。
5. flex 弹性盒模型布局：设置con的display：flex；左右高度固定，中间flex：1； 但是只能在支持flex的浏览器中使用。等高。
6. grid 栅格布局：设置con为display：grid；设置gird-template-clomuns：100px 1fr 100px; 两边固定，中间自适应，等高。

左侧菜单栏占300px，右侧内容可以根据浏览器自适应。根据此要求，编写html css代码

1. float+margin:左边浮动，主体设置marginLeft
2. table: 设置con的display为table，所有的子元素都是table-cell，左边定宽，等高
3. flex: 设置con为display为flex，左边定宽，右边flex为1，等高
4. grid: 设置con的display为grid，grid-template-columns: 100px 1fr; 等高；

CSS选择器又哪些？有哪些新特性？有哪些伪类？

• *通用选择器：选择所有元素，不参与计算优先级
• #X id选择器：选择id值为X的元素
• .X 类选择器：选择class包含X的元素
• X Y后代选择器：选择满足X选择器的后代节点中满足Y选择器的元素
• X元素选择器： 选择所有标签为X的元素
• :link,:visited,:focus,:hover,:active 连接状态：选择特定状态的链接元素
• X + Y 直接兄弟选择器：在X之后第一个兄弟节点中选择满足Y选择器的元素
• X > Y 子选择器：选择X的子元素中满足Y选择器的元素
• X ~ Y 兄弟：选择X之后所有兄弟节点中满足Y选择器的元素
• [attr] :选择所有设置了attr属性的元素
• [attr=value] :选择属性值刚好为value的元素
• [attr~=value] :选择属性值为空白符分隔，其中一个的值刚好是value的元素
• [attr|=value] :选择属性值刚好为value或者以value-开头的元素
• [attr^=value] :选择属性值以value开头的元素
• [attr$=value] :选择属性值以value结尾的元素
• [attr*=value] :选择属性值中包含value的元素
• [:checked] :选择单选框，复选框，下拉框中选中状态下的元素
• X:after，X::after：after伪元素，选择元素虚拟子元素（元素的最后一个元素）
• :hover ：鼠标进入状态的元素
• :not(selector): 选择不符合selector的元素
• ::first-letter: 伪元素，选择块元素第一行的第一个字母
• ::first-line : 伪元素，选择块元素的第一行
• :nth-child(an + b) : 伪类，选择前面有an+b - 1个兄弟节点的元素，其中n>=0
• :nth-last-child(an + b): 伪类，选择后面有an+b - 1个兄弟节点的元素，其中n>=0
• X:nth-of-type(an+b): 伪类，X为选择器，解析得到元素标签，选择前面有an+b-1个相同标签兄弟节点的元素
• X:nth-last-of-type(an+b): 伪类，X为选择器，解析得到元素标签，选择后面有an+b-1个相同标签兄弟节点的元素
• X:first-child: 伪类，选择满足X选择器的元素，并且这个元素是其父节点的第一个元素
• X:last-child: 伪类，选择满足X选择器的元素，并且这个元素是其父节点的最后一个元素
• X:only-child: 伪类，选择满足X选择器的元素，并且这个元素是其父节点的唯一一个子元素
• X:only-of-type: 伪类，选择X选择器的元素，解析得到的所有元素标签，如果该元素没有相同类型的兄弟节点是选中它
• X:first-of-type: 伪类，选择X选择器的元素，解析得到的元素标签，如果该元素是此类型的元素的第一个兄弟，选中它。

清除浮动的几种方式，优缺点

1. 给父元素设置高度，但是这样的话如果内容是动态的，有可能出现滚动条。
2. 给每一个子元素后边加一个div或者br标签，设置clear：both;清除浮动，但是会增加页面标签。代码冗余。
3. 使用伪类，设置父元素after伪类，clear：both； 配合zoom属性使用。

图片如何实现垂直剧中的

1. table-cell:设置div的display为table-cell,vertical-align:middle;text-align:center; img标签垂直居中。
2. position: 设置div的position:relative; 设置img标签position：absolute; left: 50%; top: 50%; margin-left: 负宽度的一半，margin-top：负高度的一办，但是只能用在一直宽高的图片中。
3. css3的box：设置divstyle：text-align: center;display: -webkit-box;-webkit-box-align: center;-webkit-box-pack: center;display: -moz-box;-moz-box-align: center;-moz-box-pack: center;display: -o-box;-o-box-align: center;-o-box-pack: center;display: -ms-box;-ms-box-align: center;-ms-box-pack: center;display: box;box-align: center;box-pack: center;

css hack你知道哪些？

1. 属性前缀法(即内部类hack)："-"减号是IE6专属hack，"\9"是IE6、7、8、9、10都生效，"\0"是IE8、9、10都生效，"\9\0"是 只对IE9、10生效。
2. 条件注释法： render tree渲染树 --> 绘制到屏幕上）

什么是重排？什么时候会触发重排?

• 重排也叫回流，就是因为元素改变位置或者文档内容结构发生变化的时候，重新布局渲染树的过程。DOM操作如增删节点、元素为止变化、元素样式变化、元素隐藏显示、样式表发生变化、浏览器调整窗口大小、伪类样式激活等都会触发重排。

什么是重绘？什么时候会触发重绘?

• 重绘是局部样式改变例如颜色背景色引发的渲染树变化，就是样式改变不影响元素在文档流中的位置的时候发生的。

JS运行机制

如何理解JS的单线程

• 单线程就是当js代码执行的时候，是按照从上到下的顺序一次执行同步代码，异步代码执行的时候，其实是把他们放在了任务队列中，当主线程的代码都执行完以后，会依次执行任务队列中的代码。就算是html5新增的async和defer，也只是不阻塞当前代码执行，异步加载，但是加载完以后还是会放在任务队列中排队等待执行。

什么是Event Loop,请简述其过程

• Event Loop是js中的事件循环机制，主要就是因为js是单线程的，所有一些异步的操作回调函数都会放在消息队列或者说任务队列中，然后当当前js主线程执行完所有代码的时候，就去去消息队列中取消息，其实就是回调函数，然后执行他，消息队列遵循的是先进先出的原则，最先放到队列中的消息优先取出。

页面性能

前端性能优化的方法有哪些？至少说出10种以上

• 雅虎军规：
1. 尽量减少http请求次数
2. 减少DNS查找次数
3. 避免跳转，301,302
4. 可缓存的AJAX
5. 推迟加载内容
6. 预加载
7. 减少DOM元素数量
8. 根据域名划分页面内容
9. 使iframe的数量最小
10. 不要出现404错误
11. 使用内容分发网络
12. 为文件头制定Expires或者Cache-Control
13. Gzip压缩文件内容
14. 配置Etag
15. 尽早刷新输出缓冲
16. 使用GET来完成AJAX请求
17. 把样式表置于顶部
18. 避免使用css表达式
19. 使用外部JavaScript和Css
20. 减少JavaScript和css
21. 用代替@import
22. 避免使用滤镜
23. 把脚本置于页面底部
24. 剔除重复脚本
25. 减少DOM访问
26. 开发智能事件处理程序
27. 减小cookie体积
28. 对于页面内容使用无cookie的域名
29. 优化图像
30. 优化css Spirite，雪碧图
31. 不要再HTML中缩放图像
32. fovicon.ico要小而且可缓存
33. 保持单个内容小于25k
34. 打包组件成复合文本

如何实现JS的异步加载? async和defer的区别是什么?

• js异步加载主要方式：动态创建script、async、defer
• async和defer的区别在于async是当前js只要加载完成以后就会执行，defer是当所有元素解析完成以后，才会按照加载顺序执行。

缓存

Expires和Cache-Control是如何工作的？

• Expires是设置资源过期时间，Cache-Control是设置过多长时间失效。Expires是http 1.0里边的缓存设置方式，Cache-Control是http 1.1以后设置缓存的方式，如果二者同时存在Cache-Control会覆盖Expires,当客户端发送请求的时候会先判断是否过期，如果没有过期就直接从缓存中读取内容，不再发送请求。

Last-Modified和Etag是如何工作的？

• Last-Modified是资源在服务端最后修改的日期，会在响应头中返回给客户端，客户端存储Last-Modified，当客户端再次发送请求的时候，如果缓存已经过期，就会带着Last-Modified的日期发送到服务端，如果时间没变化，直接304，返回空的响应体，客户端还是从缓存中取数据。如果修改时间不一致，就会响应修改以后的内容，并且在响应头中返回新的last-modified给客户端。
• Etag是资源在服务端的标识码，当客户端请求资源的时候，服务端会生成相应的标识码在响应头中返回给客户端，客户端存储Etag，当客户端再次请求该资源的时候，会带着Etag，如果服务端的Etag和请求体中的Etag相同的话，就是直接304，从缓存中读取数据。如果不一致，就会响应修改以后的内容，同时在响应头中返回一个新的Etag给客户端。

请描述cookie、sessionStorage和localStorage的区别

• cookie和loaclStorage、sessionStorage都是存储在客户端。
• 1、大小不同：cookie存储最多4k的内容，storage可以存储差不多5M的内容。2、有效时间：cookie是设置过期时间，只要是在过期时间之前都是有效的；localStorage是持久数据，除非手动清除，否则会一直存储在客户端中；sessionStorage是session级别的，当浏览器窗口关闭的时候就会清除。3、他们与服务端的交互方式：cookie会在请求资源的时候带着，在请求体中，同时服务端也可以写cookie到客户端，storage不会在请求的时候带着。

框架

前端路由的实现原理

1. hash：通过#拼接的方式，改变当前地址，同时不会向服务器发送请求，但是会触发hashState事件，然后再hashState事件中处理地址和其他相应的操作。
2. history API: pushState,replaceState二者都会像页面中添加一条历史记录同时地址栏发生变化，但是不会向服务端发送请求，会触发popState事件，同时在popState事件中获取url处理相应的内容变化。

MVVM框架解决了什么问题？带来了什么问题？

1. 关注点分离；操作数据即操作DOM；动态模板

浏览器地址栏里面的'＃' 如何清楚？mode共有几个参数，参数有什么区别？

1. 通过history的pushState和relaceState方法可以改变地址栏的链接而且不会刷新当前页面。路由的另一种方式。
2. mode暂时不知道是什么。

vue中父组件如何给子组件传递值

1. 使用props进行传递，子组件需要监听watch并赋值，否则获取到的数据是空数组。
2. 父组件通过ref属性调用子组件中的方法，通过参数把数据传递给子组件，子组件获取参数数据并使用。

react的优缺点

• 优点：1、React速度非常快，因为它采用的是虚拟dom的技术，性能好。2、一切都是component，代码复用更容易，更加模块化。3、跨浏览器兼容，虚拟DOM解决了跨浏览器问题，在IE8中也没有问题。4、代码兼容性好，因为只是view层，可以更好的现在的代码结合。5、基于this.props和this.state生成HTLML，bug少。
• 缺点：1、React只是view层，必须结合使用Redux、ReactRouter等才能构建大型应用程序。

React组件中props和state有什么区别？

• props一般用于父组件想子组件传递数据使用，父子组件通信使用。state主要用于组件内的状态维护，数据更新渲染传递等。

什么是JSX

• JSX是react中的一种语法，JavaScript XML语法，方便模板的生成输出。

React中不同组件传递数据的方式有哪些？至少说出三种

1. props：父组件通过props把数据传递给子组件
2. context：通过设置当前组件的context，可以再他的子孙组件中通过this.context获取数据
3. 父组件调用子组件的函数并且把数据当做参数传递给子组件
4. 父组件把函数传递给子组件，子组件调用函数并传递参数

请描述React的组件加载生命周期函数以及shouldComponentUpdate方法的实际使用场景?

• getInitialState、componentWillMount、render、componentDidMount、componentWillUnmount
• componentWillReseiveProps、shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate、componentWillUnmount
• shouldComponentUpdate是在组件接收到新的props的时候调用，通过接收到的数据进行判断是否进行更新。

说一下angular、vue、react的相同点和不同点?各适用于什么样的项目场景?

工程化

什么叫模块化？你用过哪些模块化解决方案？

什么叫组件化？你在工作中是如何实现组件化的？

gulp和webpack的相同点和不同点?

什么是热加载?

HTTP

HTTP报文的组成部分

GET和POST的区别

HTTP常见状态码

什么是Restful API?

HTTPS和HTTP的区别是什么?

从在浏览器中输入URL到页面渲染出来都经过了什么过程？

JSON和JSONP 区别是什么？JSONP的原理是？

用过那些跨域技术

ajax的参数

前后端通信

什么是同源策略及限制?

前后端如何通信?

用原生JS模拟一下jquery的ajax方法

跨域通信的几种方式?

安全

CSRF的原理以及如何防御

XSS的原生和如何防御

服务器

如何在web应用中在实现权限控制?

Web服务器、应用服务器、Web容器、反向代理服务器的区别和联系?

错误处理

前端错误的分类?

程序出现bug了，你是如何调试的?

如何分类捕获不同的错误?

如何把生产环境的错误上报？

项目问题

介绍一下你的项目？这个项目有哪些模块？你负责哪些模块？

你在项目中的角色

你觉得在项目中做的最出彩的点有哪些？

遇到过哪些非常难以解决的问题？最终是如何解决的？

如果你是项目负责人，你会如何分配任务？如何保证按时完成？如何让成员够持续成长？

正常非技术问题

请你自我介绍一下你自己？

你觉得你个性上最大的优点是什么？

说说你最大的缺点？

你对加班的看法？

在五年的时间内，你的职业规划？

你朋友对你的评价？

你还有什么问题要问我的吗？

你的业余爱好是什么？

你为什么从上家公司离职?

故意挖坑的问题

你的直属上级和顶级上级对一件事情的意见不一致，你会听谁的意见？

如果部门开发的时候和你的主管发生了争吵，你会如何处理？

与上级意见不一致，你将怎么办？

你喜欢跟什么样的主管共事？

我们为什么要聘用你?

你没有工作经验如何能胜任这份工作？

你最崇拜的人是谁?

你有创业的想法吗？

代码运行结果，并解释

if(!("a" in window)){var a = 1;
}
console.log(a);
复制代码

function MyObj(){this.p.pid++;
}
MyObj.prototype.p = {'pid':0}
MyObj.prototype.getNum = function(num){return this.p.pid+num;
}
var _obj1 = new MyObj();
var _obj2 = new MyObj();
console.log(_obj1.getNum(1)+_obj2.getNum(2))
复制代码

var func = (function(a){this.a = a;return function(a){a+=this.a;return a;}
})(function(a,b){return a;
}(1,2));
func(4);
复制代码

function Foo() {getName = function () { alert (1); };return this;
}
Foo.getName = function () { alert (2);};
Foo.prototype.getName = function () { alert (3);};
var getName = function () { alert (4);};
function getName() { alert (5);}//请写出以下输出结果：
Foo.getName();
getName();
Foo().getName();
getName();
new Foo.getName();
new Foo().getName();
new new Foo().getName();
复制代码

for(var i=0;i<10;i++){alert(i);break;}alert(i);for(var i=0;i<10;i++){continue;alert(i);}alert(i)
复制代码

function C1(name){if(name) this.name = name;
}
function C2(name){
this.name =name;
}
function C3(name){this.name = name ||'join';
}
C1.prototype.name='Tom';
C2.prototype.name='Tom';
C3.prototype.name='Tom';
alert(new C1().name)+(new C2().name)+(new C3().name);复制代码

var a=1;
Var obj ={“name”:”tom”
}
function fn(){var a2 = a,obj2 = obj,a2 =a,obj2.name =”jack”
}
fn();
console.log(a);
console.log(obj);
复制代码




本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！