前端开发复习关键点：事件委托、兼容性与性能优化

"本文主要探讨了前端开发中的事件委托方法，以及如何解决在不同浏览器下事件绑定的问题。同时，提供了一份前端复习资料，涵盖了HTML、CSS、JavaScript、JQuery等相关知识点，包括页面兼容性、网页标准、前端优化、SEO、DOM操作、CSS选择器、样式定义、CSS Hack、元素布局、透明度控制等多个方面。" 事件委托是一种在DOM元素上绑定事件处理程序的策略，通常用于处理大量子元素的交互，以提高性能和减少内存消耗。在标题提及的问题中，IE和Firefox浏览器对`onload`事件处理程序的处理方式有所不同。为确保跨浏览器兼容性，可以采用两种方法：一是使用`new Function('inject()')`创建一个新的函数实例来绑定`onload`事件，二是直接在`onload`中写入匿名函数来执行代码。 前端复习资料详细列举了一系列前端开发的核心概念和问题，例如： 1. HTML和CSS的兼容性测试，涉及不同浏览器的内核。 2. Doctype的作用，它用于声明文档类型，影响浏览器的渲染模式。 3. Quirks模式和Standards模式的区别，前者遵循旧的IE5标准，后者遵循W3C标准。 4. div+css布局相比table布局的优势，如分离内容和表现，利于SEO和响应式设计。 5. img的alt和title属性，alt是图片不可见时的文字替换，title是鼠标悬停时显示的提示信息；strong和em标签，前者强调内容的重要性，后者表示情感或语义上的强调。 6. 渐进增强和优雅降级的对比，前者从基本功能开始，逐步增加复杂性，后者先构建完整功能，然后为不支持的浏览器降级。 7. 使用多个域名存储资源可以分散请求，减少同一域名下的并发限制，提高页面加载速度。 8. 网页标准的重要性在于确保一致性、可访问性和可维护性，制定机构如W3C推动行业发展。 9. cookies、sessionStorage和localStorage的区别在于生命周期和可用范围，cookies适用于跨域，而sessionStorage和localStorage则局限于单个站点，且localStorage的持久性更强。 10. src引用外部资源，href链接到其他文档或位置。 11. 图片格式如JPEG、PNG、GIF等，根据需求选择合适的压缩和透明度支持。 12. 微格式是将结构化数据嵌入HTML中，便于机器解析，前端构建时应考虑其对于搜索引擎和辅助技术的影响。 13. JS请求的缓存处理可能发生在HTTP缓存、浏览器缓存、本地存储等多个环节。 14. 图片优化策略包括延迟加载、合并图片为雪碧图、使用WebP格式等。 15. HTML结构语义化意味着元素选择有意义的标签，提高可读性和无障碍性。 16. SEO优化要考虑关键词、元标签、URL结构、内链、页面速度等因素。 17. 可通过内联样式、内部样式表、外部样式表以及JavaScript操作DOM设置CSS样式。 18. CSS选择器包括ID选择器、类选择器、标签选择器、属性选择器等。 19. CSS中通过`display:none`或`visibility:hidden`隐藏元素。 20. 超链接访问后，`:hover`样式不出现是因为已激活的链接状态，可以通过CSS伪类解决。 21. CssHack是指为了解决浏览器兼容性问题而采用的特殊语法，如`_height`是IE6的hack。 22. 行内元素不能设置宽高，但可以设置padding和margin（IE6例外）；块级元素可以设置宽高。 23. 外边距重叠是相邻块级元素垂直外边距合并的现象，结果是取最大外边距。 24. rgba()允许设定半透明颜色，而opacity影响整个元素及其所有子元素的透明度。 25. `text-align`和`vertical-align`属性可用于水平和垂直方向的文本对齐。 26. 垂直居中浮动元素可以使用负margin、绝对定位、Flexbox或Grid布局实现。 27. px是固定单位，em是相对单位，与父元素字体大小相关。 28. "reset" CSS文件清除浏览器默认样式，normalize.css则是标准化各种元素的样式，它们的不同在于是否保留某些基本样式。 29. Sass和LESS是预处理器，允许使用变量、嵌套规则、混合等功能，简化CSS编写。 这份资料全面覆盖了前端开发的基础和进阶知识，对于开发者来说是宝贵的复习和学习资源。