【问题描述】前端性能的优化做过哪些?

一、页面级优化

1. 减少 HTTP请求数

2. 将外部脚本置底(将脚本内容在页面信息内容加载后再加载)

3. 异步执行 inline脚本(其实原理和上面是一样,保证脚本在页面内容后面加载。)

4. Lazy Load Javascript(只有在需要加载的时候加载,在一般情况下并不加载信息内容。)

5. 将 CSS放在 HEAD中

6. 异步请求 Callback(就是将一些前端培训行为样式提取出来,慢慢的加载信息的内容)

7. 减少不必要的 HTTP跳转

8. 避免重复的资源请求

二、代码级优化

【问题描述】 Javascript

(1). DOM:DOM操作应该是脚本中最耗性能的一类操作,例如增加、修改、删除 DOM元素或者对 DOM集合进行操作。

(2). 慎用 with

(3). 避免使用 eval和 Function

(4). 减少作用域链查找(这方面设计到一些内容的相关问题)

(5). 数据访问

(6). 字符串拼接

前端开发之基础面试题分享_前端培训

【问题描述】浏览器兼容性的问题有哪些?

IE6不支持png-24透明图片

解决方法:图片使用gif格式,或者png-8格式图片。

【问题描述】像素问题:

解决方法:对另一个div也使用float;

【问题描述】浏览器默认的margin和padding不同

解决方案是加一个全局的*{margin:0;padding:0;}来统一。

【问题描述】 IE5-IE8不支持opacity

解决方法这时可以另外添加ie滤镜alpha

【问题描述】IE6不能定义1px左右宽度的容器

解决方法:因为行高line-height在IE6下有默认值,设置 line- height:1px|overflow:hidden|zoom:0.08

【问题描述】IE6不支持min-*:问题出现的浏览器:IE6及其更低的版本

解决方法:利用IE6不识别!Important,给元素设置固定高度,并且设置元素高度自动。

【问题描述】双外边距浮动问题:IE6及其更低的版本

解决办法将元素的display属性设置为inline,因为元素是浮动的,所以这么设置

【问题描述】Firefox点击链接出现的虚线框:Firfox浏览器

解决方法:我们为了和其他浏览器保持一致,需要去掉虚线框,我们可以给a标签设置outline属性

【问题描述】Cookie、session和localStorage的区别

答:cookie的内容主要包括:名字、值、过期时间、路径和域。路径与域一起构成cookie的作用范围。若不设置时间,则表示这个cookie的生命期为浏览器会话期间,关闭浏览器窗口,cookie就会消失。这种生命期为浏览器会话期的cookie被称为会话cookie。

会话cookie一般不存储在硬盘而是保存在内存里,当然这个行为并不是规范规定的。若设置了过期时间,浏览器就会把cookie保存到硬盘上,关闭后再打开浏览器这些cookie仍然有效直到超过设定的过期时间。对于保存在内存里的cookie,不同的浏览器有不同的处理方式session机制。

当程序需要为某个客户端的请求创建一个session时,服务器首先检查这个客户端的请求里是否已包含了一个session标识(称为session id),如果已包含则说明以前已经为此客户端创建过session,服务器就按照session id把这个session检索出来使用(检索不到,会新建一个),如果客户端请求不包含session id,则为客户端创建一个session并且生成一个与此session相关联的session id,session id的值应该是一个既不会重复,又不容易被找到规律以仿造的字符串,这个session id将被在本次响应中返回给客户端保存。保存这个session id的方式可以采用cookie,这样在交互过程中浏览器可以自动的按照规则把这个标识发送给服务器。