Web 前端优化最佳实践之 JavaScript 篇,这部分有 6 条规则,和 CSS 篇 重复的有几条。前端优化最佳实践,最重要的还是"实践",要理解这东西容易得很,关键是要去"实践",去"执行",去"反馈",去获取受益。
1. 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom)
当一个脚本在下载的时候,浏览器干不了其它的事儿(串行了)。所以,把它扔到最后面去处理。对于一些功能性的脚本,可能实现起来有些两难。不过对于国内网站来说,有很多使用 Google Analytics 服务进行网站数据分析的。这这一点来说,绝对可行的建议,放到页面最底下。
2. Make JavaScript and CSS External
参见 CSS 篇的描述
3. 精简 JavaScript 与 CSS (Minify JavaScript and CSS)
参见 CSS 篇的描述
4. 移除重复脚本 (Remove Duplicate Scripts)
对于一些历史遗留站点或是论坛类的网站来说,这倒是比较常见的。接手维护人前后变化过多,每个人都有自己的一套。这就会带来一些潜在的麻烦。
5. 减少 DOM 访问 (Minimize DOM Access)
有三条指导建议:
- 缓存已经访问过的元素 (Cache references to accessed elements)
- "离线"更新节点, 再将它们添加到树中 (Update nodes "offline" and then add them to the tree)
- 避免使用 JavaScript 输出页面布局--应该是 CSS 的事儿 (Avoid fixing layout with JavaScript)
6. Develop Smart Event Handlers
除了英文解释外,这里也提醒一下注意关于 Java Script 内存泄漏的问题。
另外推荐一篇《如何优化 JavaScript 脚本的性能》.
后记1) :整理得差不多之后,发现网络上已经有一篇 《Yahoo!网站性能最佳体验的34条黄金守则》,是翻译稿。看来我做了一部分重复劳动。
后记 2):CSS / JavaScript 都有优化规则。但似乎缺少了对 Flash 的优化实践。
相关推荐
全书以问题为导向,精选了前端开发中的34个疑难问题,从分析问题的原因入手,逐步给出解决方案,并分析各种方案的优劣,最后针对每个问题总结出高效编程的最佳实践和各种性能优化的方法。全书共7章,内容从逻辑上...
Web前端设计修炼之道》以Web 前端设计的流程为主线,以前端设计的方法和原则为基础,围绕原型设计、模型设计、可用性设计、一致性设计和以用户为中心的设计等关键技术探讨了前端设计的规范、技巧与最佳实践。...
这篇文章讲述可以帮助 改善优化前端的技术,非常有用。主要内容有清理代码、压缩图片、压缩外部资源、使用CDN,以及一些其它方法。这些方法会为你的网站带显著的速度提升和整体性能提升。 一. 清理 HTML 文档 HTML,...
内容全部由编写高质量的JavaScript代码的最佳实践组成,从基本语法、应用架构、工具框架、编码风格、编程思想等5大方面对Web前端工程师遇到的疑难问题给出了经验性的解决方案,为Web前端工程师如何编写更高质量的...
在美团支付的前端技术体系里,通过预渲染提升网页首帧优化,从而优化了白屏问题,提升用户体验,并形成了最佳实践。在前端渲染领域,主要有以下几种方式可供选择: 通过对比,同构方案集合CSR与SSR的优点,可以...
这几天,第三轮全站优化结束,测试项目在2G首屏载入速度取得了一些优化成绩,对比下来有10s左右的差距:这次优化工作结束后,已经是第三次大规模折腾公司框架了,这里将一些自己知道的移动端的建议提出来分享下,...
全书内容丰富,主要包括减少HTTP请求、EdgeComputing技术、ExpiresHeader技术、Gzip组件、CSS和JavaScript最佳实践、主页内联、Domain最小化、JavaScript优化、避免重定向的技巧、删除重复JavaScript的技巧、关闭...
《高性能网站建设指南》内容丰富,主要包括减少HTTP请求、Edge Computing技术、Expires Header技术、Gzip组件、CSS和JavaScript最佳实践、主页内联、Domain最小化、JavaScript优化、避免重定向的技巧、删除重复...
此外,模板的设计理念和编码实践都符合当前网页设计和开发的最佳实践,为学生提供了一个理想的学习和实践平台。 这套源代码合集特别适合用作毕业设计、课程设计或大型作业的基础,帮助学生快速搭建现代化的网站原型...
本书在简洁明快地讲述JavaScript和DOM的基本知识之后,过几个实例演示了大师级的网页开发技术,并透彻阐述了一些至关重要的JavaScript编程原则和最佳实践,包括预留退路、循序渐进和以用户为中心等。读者可以非常...
这份118套响应式网站模板的HTML源码合集是前端开发领域的...这套源码非常适合作为毕业设计、课程设计或大型作业的参考模板,它不仅能帮助学生们快速搭建起专业级别的网站,还能在实践中深化对Web前端技术的理解和应用。
系统开发技术栈、Web前端开发技术栈、数据库技术栈、.NET技术栈! http://overflowstack.github.i o 本地化 English: https://github.com/unruledboy/WebFrontEndStack/ 中文博客: ...
Web应用程序入门工具包。 React 最佳化 经过PWA优化的服务器端呈现,与Service Workers脱机优先,在后台预取 包括 通知事项 设定档 去做 在开发模式下运行 去做 建造 去做 在生产模式下部署和运行 去做 使用Docker...
jQuery以其轻巧的体积、强大的选择器、出色的DOM封装、丰富的插件支持使得广大的Web前端开发者得心应手,极大地提高了他们的开发效率;此外,jQuery中完善的Ajax功能、行为与结构层的分离、可靠的事件处理机制也同样...
devfolio-project-starter 该入门工具旨在使您入门并使用React-Redux堆栈上的最新Frontend技术,从而简化开发流程,优化Web性能,同时保持代码质量和最佳实践。安装基于此启动器创建一个新项目: git clone ...
前端学习笔记HTMLCSSJavaScriptECMAScriptWeb APIIndexedDBWebWorkerWebSocketVueVue 学习基础Vue 框架原理Vue 最佳实践VuexReactReact 基础React HooksTypeScriptTypeScript 基础浏览器BrowserDOMEventTarget微信...
它在生产模式下正确捆绑了React,并优化了构建以获得最佳性能。 最小化构建,文件名包含哈希。 您的应用已准备好进行部署! 有关更多信息,请参见有关的部分。yarn eject 注意:这是单向操作。 eject ,您将无法...