【高并发】的前端面试题汇总及解析—（I）
废话很少说，直接奔主题
1、 图片优化
项目中图片处理相关的优化，项目中用到的优化方案，图片大小达到多少的时候选择处理？javascript
1. 首先了解在web开发中常见的图片有那些格式。css
JPG 一般使用的背景图片，照片图片，商品图片等等。这一类型的图片都属于大尺寸图片或较大尺寸图片通常使用的是这种格式。html
PNG 这种格式的又分为两种 一种PNG-8 一种 PNG-24java
PNG-8格式不支持半透明，也是IE6兼容的图片存储方式。css3
PNG-24图片质量要求较高的半透明或全透明背景，保存成PNG-24更合适（为了兼容IE6能够试用js插件pngfix）通常是背景图标中试用的多。git
GIF 这种格式显而易见的是在须要gif动画的时候试用了。github
2．优化方案web
l 样式代替图片bootstrap
例如：半透明、圆角、阴影、高光、渐变等。这些效果主流的浏览器都可以完美支持，而对于那些低端浏览器，咱们并不会彻底抛弃他们，“渐进加强”则是一个很好的解决方案。移动web开发
l 精灵图
CSS Sprites，将同类型的图标或按钮等背景图合到一张大图中，减小页面请求。
l 字体图标
Icon Font，将图标作成字体文件。优势是图标支持多个尺寸，兼容全部浏览器，减小页面请求等。美中不足的是只支持纯色的icon。SVG，对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。如今主流浏览器都支持SVG了，因此可放心使用！
l Base64
将图片转化为base64编码格式，资源内嵌于CSS或HTML中，没必要单独请求。
Base64格式
data:[][;charset=][;base64],
Base64 在CSS中的使用
.demoImg{ background-image: url("data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...."); }复制代码
Base64 在HTML中的使用
<img width="40"
height="30" src="data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...."
/>复制代码
l 图片响应式
一般图片加载都是能够经过lazy加载的形式来的，那么能够在加载的时候来判断屏幕的尺寸来达到加载大图仍是小图的目的来达到优化。
2、 提升网站的性能
你知道有哪些方法能够提升网站的性能？
咱们从两个方面来说：
1. 资源加载
CSS顶部, JS底部
CSS JS文件压缩
尽可能使用图片使用精灵图，字体图标
图片加载可经过懒加载的方式。
总之就是减小资源体积减小资源请求次数。
2. 代码性能
CSS:
使用CSS缩写，减小代码量；
减小查询层级：如.header .logo要好过.header .top .logo；
减小查询范围：如.header>li要好过.header li；
避免tag标签与class或id并存：如a.top、button#submit；
删除重复的CSS；
….
html:
减小DOM节点：加速页面渲染；
正确的闭合标签：如避免使用<div/>，浏览器会多一个将它解析成<div\></div\>的过程；
减小页面重绘。好比 给图片加上正确的宽高值：这能够减小页面重绘，
……
js：
尽可能少用全局变量；
使用事件代理绑定事件，如将事件绑定在body上进行代理；
避免频繁操做DOM节点；
减小对象查找，如a.b.c.d这种查找方式很是耗性能，尽量把它定义在变量里；
….
3、 z-index
说说z-index的工做原理及适用范围?
原理：
z-index 这个属性控制着元素在z轴上的表现形式。
该属性仅适用于定位元素。即拥有 relative , absolute , fixed 属性的position 元素。
堆叠顺序（Stacking Level）
堆叠顺序是当前元素位于 z 轴上的值。数值越大代表元素的堆叠顺序越高，越靠近屏幕。
未定义时 后来居上
若是未指定 z-index 的属性，元素的堆叠顺序基于它所在的文档树。默认状况下，文档中后来声明的元素具备更高的堆叠顺序
当父元素的堆叠顺序被设置的时候，这也意味着，它的子元素的堆叠顺序不能高于或低于这一顺序 (相对于父元素的堆叠上下文)。。
适用范围：
1.网页两侧浮动窗口(播放器,置顶按钮,浮动广告，功能按钮等)
2.导航栏浮动置顶。
3.隐藏div实现弹窗功能(经过设置div的定位和z-index控制div的位置和出现隐藏)
4、响应式开发
可否简述一下如何使一套设计方案，适应不一样的分辨率，有哪些方法能够实现？
流式布局：
使用非固定像素来定义网页内容，也就是百分比布局，经过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
这样的布局方式 就是移动web开发使用的经常使用布局方式
这样的布局能够适配移动端不一样的分辨率设备。
响应式开发：
那么Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站可以兼容多个终端。
愈来愈多的设计师也采用了这种设计。
• CSS3中的Media Query（媒介查询）
• 经过查询screen的宽度来指定某个宽度区间的网页布局。
• 超小屏幕（移动设备） 768px如下
• 小屏设备 768px-992px
• 中等屏幕 992px-1200px
• 宽屏设备 1200px以上
因为响应式开发显得繁琐些，通常使用第三方响应式框架来完成，好比bootstrap来完成一部分工做，固然也能够本身写响应式。
5、事件封装和自定义
如何实现事件的封装、如何实现自定义事件？
什么是事件：
JavaScript 使咱们有能力建立动态页面。事件是能够被 JavaScript 侦测到的行为。
网页中的每一个元素均可以产生某些能够触发 JavaScript 函数的事件。比方说，咱们能够在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。
事件的封装：
function addEvent(dom,type,callback){
if(dom.addEventListener){
dom.addEventListener(type,callback,false);
}else if(dom.attachEvent){
dom.attachEvent('on'+type,callback);
}
};
function removeEvent(dom,type,callback){
if(dom.removeEventListener){
dom.removeEventListener(type);
}else if(dom.detachEvent){
dom.detachEvent('on'+type);
}
};复制代码
事件封装：
好比zepto中的touch事件都是自定义事件。
6、渐进坚强、优雅降级
你能描述一下渐进加强和优雅降级之间的不一样吗？
优雅降级和渐进加强印象中是随着css3流出来的一个概念。因为低级浏览器不支持css3，但css3的效果又太优秀不忍放弃，因此在高级浏览中使用css3而低级浏览器只保证最基本的功能。咋一看两个概念差很少，都是在关注不一样浏览器下的不一样体验，关键的区别是他们所侧重的内容，以及这种不一样形成的工做流程的差别。
举个例子：
a{
display: block;
width: 200px;
height: 100px;
background:aquamarine;
/*我就是要用这个新css属性*/
transition: all 1s ease 0s;
/*但是发现了一些低版本浏览器不支持怎么吧*/
/*往下兼容*/
-webkit-transition:all 1s ease 0s;
-moz-transition:all 1s ease 0s;
-o-transition: all 1s ease 0s;
/*那么一般这样考虑的和这样的侧重点出发的css就是优雅降级*/
}
a:hover{
height: 200px;
}
复制代码
/*那若是咱们的产品要求咱们要重低版本的浏览器兼容开始*/
a{
/*优先考虑低版本的*/
-webkit-transition:all 1s ease 0s;
-moz-transition:all 1s ease 0s;
-o-transition: all 1s ease 0s;
/*高版本的就确定是渐进渐强*/
transition: all 1s ease 0s;
}复制代码
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。
“渐进加强”观点则认为应关注于内容自己。
7、 客户端数据存储
请描述一下cookies，sessionStorage和localStorage的区别？
cookies兼容全部的浏览器，Html5提供的storage存储方式。
Document.cookie
Window.localstorage
Window.sessionstorage
复制代码
cookie数据始终在同源的http请求中携带（即便不须要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
存储大小限制也不一样，cookie数据不能超过4k，同时由于每次http请求都会携带cookie，因此cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，能够达到5M或更大。
数据有效期不一样，sessionStorage：仅在当前浏览器窗口关闭前有效，天然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，所以用做持久数据；cookie只在设置的cookie过时时间以前一直有效，即便窗口或浏览器关闭。
做用域不一样，sessionStorage不在不一样的浏览器窗口中共享，即便是同一个页面；localStorage 在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的。
8、重置浏览器的CSS默认属性
描述一个”reset”的CSS文件并如何使用它。知道normalize.css吗？你了解他们的不一样之处？
由于浏览器的品种不少，每一个浏览器的默认样式也是不一样的，好比<button>标签，在IE浏览器、Firefox浏览器以及Safari浏览器中的样式都是不一样的，因此，经过重置button标签的CSS属性，而后再将它统必定义，就能够产生相同的显示效果。
你可能会用Normalize来代替你的重置样式文件。它没有重置全部的样式风格，但仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理，但又不扰乱其余的东西（如粗体的标题）。
9、 IE和DOM事件流的区别
首先咱们得搞懂 IE和DOM 是指的啥？
这里主要问的是 你IE浏览器和DOM兼容的浏览器也就是非IE浏览器或IE的高版本浏览器的事件方面的兼容性问题。
而后要搞明白的是 什么是事件流
IE5.5顺序是div --body--document.
在IE6中div-body--html--document.
mozilla的顺序是div--body- -html--document--window.
在IE中只有冒泡事件类型的事件流。
而在DOM兼容的浏览器中还有事件捕获
首先window--document--body--div--click.
而后click--div--body--document--window.
处理函数的区别
在IE 中,每一个元素和window对象都有2个方法:attachEvent()和detachEvent();attachEvent用来给一个事件附加事件处理函数.
dom中对应的方法是addEventListener()和removeEventListener ,这两个方法有3个参数,事件名称,要分配的函数和处理函数是用于冒泡阶段仍是捕获阶段.若是事件处理函数是用在捕获阶段,第三个参数为true
<div>
<a href="javascript:;">dddd</a>
</div>
<script>
window.onload = function(){
document.getElementsByTagName('a')[0].addEventListener('click',function(e){
console.log('a');
},true);
/*处理函数在捕获阶段执行*/
document.getElementsByTagName('div')[0].addEventListener('click',function(e){
console.log('div');
/*在捕获的时候 禁止冒泡*/
e.stopPropagation();
},true);
/*处理函数在捕获阶段执行*/
}
</script>复制代码
10、 call和apply的区别
Javascript的每一个Function对象中有一个apply方法：
| 1 |
|
还有一个相似功能的call方法：
| 1 |
|
它们各自的定义：
apply：应用某一对象的一个方法，用另外一个对象替换当前对象。
call：调用一个对象的一个方法，以另外一个对象替换当前对象。
它们的共同之处：
都“能够用来代替另外一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由 this 指定的新对象。”
它们的不一样之处：
apply：最多只能有两个参数——新this对象和一个数组 argArray。若是给该方法传递多个参数，则把参数都写进这个数组里面，固然，即便只有一个参数，也要写进数组里面。若是 argArray 不是一个有效的数组或者不是 arguments 对象，那么将致使一个 TypeError。若是没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用做 thisObj， 而且没法被传递任何参数。
call：则是直接的参数列表，主要用在js对象各方法互相调用的时候，使当前this实例指针保持一致,或在特殊状况下须要改变this指针。若是没有提供 thisObj 参数，那么 Global 对象被用做 thisObj。
更简单地说，apply和call功能同样，只是传入的参数列表形式不一样：如 func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,[var1,var2,var3])
var func1 = function(a,b,c){
this.name = 'func1';
//func2.call(this,a,b,c);
//func2.apply(this,arguments);
};
var func2 = function(){
console.log(this.name);
console.log(arguments);
};
func1(1,2,3);复制代码
此次就先整理这么多了，毕竟还得劳逸结合啊，欲知更多知识，请待下次更新。
- 1. 前端面试题汇总
- 2. 前端面试题汇总 笔试题
- 3. web前端面试题目汇总 Web前端面试题目汇总
- 4. 【半月刊 2】前端高频面试题及答案汇总
- 5. 【半月刊】前端高频面试题及答案汇总
- 6. 【半月刊 3】前端高频面试题及答案汇总
- 7. 【半月刊 4】前端高频面试题及答案汇总
- 8. 前端高频面试题及答案汇总！
- 9. 前端高频面试题及答案汇总
- 10. 前端面试的问题汇总-1
- 更多相关文章...
- • Redis悲观锁解决高并发抢红包的问题 - 红包项目实战
- • Redis乐观锁解决高并发抢红包的问题 - 红包项目实战
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • 算法总结-归并排序
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Duang!超快Wi-Fi来袭
- 2. 机器学习-补充03 神经网络之**函数(Activation Function)
- 3. git上开源maven项目部署 多module maven项目（多module maven+redis+tomcat+mysql）后台部署流程学习记录
- 4. ecliple-tomcat部署maven项目方式之一
- 5. eclipse新导入的项目经常可以看到“XX cannot be resolved to a type”的报错信息
- 6. Spark RDD的依赖于DAG的工作原理
- 7. VMware安装CentOS-8教程详解
- 8. YDOOK：Java 项目 Spring 项目导入基本四大 jar 包 导入依赖，怎样在 IDEA 的项目结构中导入 jar 包 导入依赖
- 9. 简单方法使得putty（windows10上）可以免密登录树莓派
- 10. idea怎么用本地maven
- 1. 前端面试题汇总
- 2. 前端面试题汇总 笔试题
- 3. web前端面试题目汇总 Web前端面试题目汇总
- 4. 【半月刊 2】前端高频面试题及答案汇总
- 5. 【半月刊】前端高频面试题及答案汇总
- 6. 【半月刊 3】前端高频面试题及答案汇总
- 7. 【半月刊 4】前端高频面试题及答案汇总
- 8. 前端高频面试题及答案汇总！
- 9. 前端高频面试题及答案汇总
- 10. 前端面试的问题汇总-1