当前位置: 首页 > Web前端 > HTML

前端开发基础面试题分享

时间:2023-03-29 11:41:49 HTML

【问题描述】为了优化前端性能,你做了哪些工作?1.页面级优化减少了HTTP请求的数量。将外部脚本放在底部(页面信息内容加载完成后再加载脚本内容)异步执行内联脚本(其实原理同上,保证脚本在页面内容后面加载。)LazyLoadJavascript(只在需要加载的时候才加载,一般不加载信息内容。)将CSS放在HEAD中异步请求Callback(即提取一些前端训练行为样式,慢慢加载信息内容)以减少不必要的HTTP跳转,避免重复请求资源2.代码级优化【问题描述】Javascript(1)。DOM:DOM操作应该是脚本中性能最密集的操作,例如添加、修改、删除DOM元素或对DOM集合进行操作。(2).谨慎与(3)一起使用。避免使用eval和Function(4)。Reducescopechainsearch(这方面是为了解决一些与内容相关的问题)(5)。数据访问(6)。字符串拼接【问题描述】浏览器兼容性问题有哪些?IE6不支持png-24透明图像。解决办法:使用gif格式或者png-8格式的图片。[问题描述]像素问题:解决方法:对另一个div使用float;【问题描述】浏览器默认的margin和padding不一样。解决方案是添加一个全局*{margin:0;padding:0;}来统一。[问题描述]IE5-IE8不支持opacity解决方法:这时候可以添加iefilteralpha[问题描述]IE6无法定义宽度为1px左右的容器解决方法:因为line-height在IE6下有默认值,setline-height:1px|overflow:hidden|zoom:0.08【问题描述】IE6不支持min-*:问题所在浏览器:IE6及以下版本解决:IE6不识别!重要的是,为元素设置固定高度,并自动设置元素高度。[问题描述]Doublemarginfloating问题:IE6及以下版本解决方法:设置元素的display属性为inline,因为元素是浮动的,所以这样设置[问题描述]Firefox点击出现的虚线框链接:Firfox浏览器的解决方法:为了和其他浏览器保持一致,我们需要去掉虚线框,我们可以给a标签设置outline属性【问题描述】Cookie、session和localStorage的区别答:cookie的内容主要包括:名称、值、过期时间、路径、域。路径与域一起构成了cookie的范围。如果不设置时间,则表示cookie的生存期为浏览器会话期间,浏览器窗口关闭时cookie会消失。这种生命周期为浏览器会话的cookie称为会话cookie。会话cookie一般不存储在硬盘上,而是存储在内存中。当然,这种行为不是由规范指定的。如果设置了过期时间,浏览器会将cookie保存到硬盘,关闭再打开浏览器后,这些cookie仍然有效,直到超过设置的过期时间。对于存储在内存中的cookies,不同的浏览器有不同的处理会话机制。当程序需要为客户端的请求创建一个会话时,服务器首先检查客户端的请求是否已经包含了一个会话标识符(称为sessionid)。如果包含,说明之前已经为这个客户端创建过session,服务端根据sessionid取回session并使用。sessionid的值应该是一个既不重复又不易被模仿的字符串。这个sessionid会在这个response中返回给客户端保存。Cookies可以用来保存sessionid,这样浏览器在交互过程中就可以根据规则自动将这个标识符发送给服务器。