12月7日的web前端面试

3.jpg

一、代码优化的方法
CSS优化:
1、利用继承
Css的继承机制可以帮我们在一定程度上缩减字节数,我们知道css很多属性可以继承,即在父容器设置了默认属性,子容器会默认也使用这些属性。
可继承的属性举例:
所有元素都可以继承的属性:visibility 、cursor
内联元素和块元素可以继承的属性:
Letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
块状元素可以继承的属性:Text-indent、text-align;
列表元素可以继承的属性:
List-style、list-style-type、list-style-position、list-style-image
表格元素可以继承的属性:Border-collapse

不可以继承的属性:
Display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-break-before、unicode-bidi

2、css放在head中,减少repaint和reflow
Css方法在页面的顶部,有利于优化的原因???
当浏览器从上到下一遍下载html生成dom tree,一边根据浏览器默认以及现有css生成render tree来渲染页面。当遇到新的css的时候下载并结合现有css重新生成render tree。则刚才的渲染功能就全废了。当我们把所有css放在页面的顶部,就没有重新渲染的过程了。

3、不要用标签或class来限制id。

test .info /div #test这都属于画蛇添足

Id已经可以唯一而且快速的定位到一个元素了。

JavaScript优化总结
1、避免全局查找
在一个函数中尽量将全局对象存储为局部变量来查找,因为访问局部变量的数要更快一些。
function(){
alert(window.location.href+window.location.host);
}
修改为:
funciton(){
var location=window.location;
alert(location.href+location.host);
}

2、使用后测试循环
在js中,我们使用for(;;),while(),for(in)三种循环。for(in)的效率极差。因为他需要查询散列键,只要可以,就应该尽量少用。
for(;;)和while循环,while优于for(;;),可能for(;;)结构问题,需要经常的跳转。do..while更好。

3、可以用三目运算符替换条件分支,可以提高效率

4、把脚本置于页面底部,可以使页面加载速度更快一些。

5、使用外部JavaScript和CSS
可以调用外部的。cdn公共库:http://www.haorooms.com/post/cdn_all

Web性能优化
1、通过css sprites来整合图像
若页面中有6个小图像,那么浏览器在显示时会分别下载,你可以通过css sprites将这些图像合并成为一个,可以减少页面加载所需要的时间。
Css sprites两个步骤:整合图像,定位图像

2、如果你的css和js较小,可以将css和js内嵌到html页面中,这样可以减少页面加载所需要的文件数,从而加快页面的加载。

3、指定图像尺寸
当浏览器加载页面的html时,有时候需要在图片下载完成前,对页面布局进行定位。如果hmtl里的图片没有指定尺寸,或者代码描述的尺寸和实际的图片尺寸不符合时,浏览器需要在图片下载完成后在回溯到该图片,并重新显示,这将消耗额外的时间。
最好的页面中每一张图片都指定尺寸,不管在html里的img中,还是在css中。

4.jpg

二、js(Event)事件:
//点击添加事件
//它有三个参数,第三个参数若是true,则表示采用事件捕获,若是false,则表示采用事件冒泡。
function addEvent(ele, type, fun) {
if (ele.addEventListener) {
ele.addEventListener(type, fun, false);
} else if (ele.attachEvent) {
ele.attachEvent(type, fun);
}
}
//点击移除事件
function removeEvent(ele, type, fun) {
if (ele.removeEventListener) {
ele.removeEventListener(type, fun, false);
} else if (ele.detachEvent) {
ele.detachEvent(type, fun);
}
}
//阻止默认事件
function prevent(e) {
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
}
//阻止冒泡事件
function stop(e) {
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
}
//点击事件
function targets(e) {
e = e || window.event;
if (e.target) {
//获取事件对象
return e.target;
} else {
//获取事件源
return e.srcElement;
}
}

5.jpg

三、$.get()和$.post()和$.ajax()的区别和联系
区别:
$.get():
通过远程 HTTP GET 请求载入信息。这是一个简单的 GET 请求功能以取代复杂的$.ajax().请求成功时可调用回调函数。
如果需要在出错时执行函数,请使用$.ajax()
$.post():
通过远程 HTTP POST 请求载入信息。这是一个简单的 POST 请求功能以取代复杂的$.ajax().请求成功时可调用回调函数。
如果需要在出错时执行函数,请使用$.ajax()
$.ajax():
通过 HTTP 请求加载远程数据。jQuery 底层 AJAX 实现。
联系:
前两者是$.ajax()的简单易用实现,以方便我们的使用。
当把$.ajax()中的参数type设为Get或Post,则分别同get()或post()

样式调整:
function setFontSize() {
var doc = document,
width = doc.documentElement.clientWidth,
times = width / 320;
doc.documentElement.style.fontSize = (times * 100) + "px";
}
setFontSize();
window.onresize = function() {
setFontSize();
}

(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);


6.jpg

你可能感兴趣的:(12月7日的web前端面试)