前端开发总结(三)

调试

IE 下可以采用Firebug Lite进行调试

Firebug Lite使用:在head中引入js便可以

<!--[if IE]-->
  <script type="text/javascript" src="thisjs.js"></script>
<![endif]-->

关于console对象的接口

IE6

半透明问题

Div无法盖住seletc问题

3px问题

双边距问题

Position:fixed不支持问题

某些css导致IE6奔溃问题

IE6 positin 定位问题

直接修改事件属性不会生效

IE6和IE7当弹出层高度发生变化时,页面高度不会随着内容发生变化,需要动态改变弹出层的zoom属性,虽然效果一样,但是浏览器会重新渲染

资源加载的控制

基础数据的缓存,基础数据改变时更新缓存,而且IE6下用ajax请求时,如果出现重复的URL,浏览器不会向服务器发送请求,而是根据之前相同的URL请求结果返回,可以加上时间戳或者jQuery里面的aJax设置参数。

图片可以有预加载和延时加载两种,同时采用csssprite的方式减少请求

JS和CSS文件在上线时都先压缩,能合并的合并。不同页面引用的CSS要保证里面的内容不冲突

HTTPS

https会提示警告的原因:

1) hard-code了http(或其它非https)的URL访问。

        这是一个比较常见的问题,一般来说都不要在WEB页面中硬编码URL,可以采用相对URL。

2) WEB页面中含有没有设置SRC属性的iframe元素。 (主要)

        这个也比较常见,解决也很容易,可以给每个空的iframe设置SRC属性,这个src可以指向一个空的html页面,或是采用src="javascript:void()"这种方式。

3) 调用removeChild()方法去移除一个HTML元素,而这个元素包含一个backgroundImage背景图片的style引用。

        这个严格来说,应该是IE的一个bug,可以在Microsoft官方网站上找到这个问题的描述和解决方案。不过即使是最新的IE8, 这个问题好像依然存在。这里

4) 调用innerHTML()方法给一个HTML元素添加内容,之后再把这个元素添加到HTML DOM中。

        这个问题可能在一些Ajax应用中会碰到,通过Ajax动态更新HTML内容,如果内容包含image图片等等内容,也会弹出这个warning。

5) 使用html()方法替换节点里面的内容时,如果存在隐藏的包含style引用的背景图片的div时

事件绑定

    是使用bind还是还是live还是delegate还是onXXX属性

    Bind:事件绑定到触发节点,对新增的符合选择器的节点不起作用

    Live:将事件最终绑定到document上

    Delegate:绑定到触发节点的父节点,在使用选择器时效率比live高

    Onclick:效率不高,且IE6下使用attr(‘onclick’,’xxxx’)的方式不起作用

    在绑定事件之前如果节点上没有其他事件,可以先使用.die(),防止事件重复绑定

    (随着jQuery版本的提高,现在我建议绑定方式统一为on()方法,解绑方式为off(),如果只绑定一次的就是one())


原文链接:,转发请注明来源!
「前端开发总结(三) 」评论列表

发表评论