`
baukh789
  • 浏览: 27933 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

前端优化小细节

 
阅读更多

大方向网上很多,只说小细节。


JS\CSS引入位置
css放头部,JS放尾部这个都知道了,就不说了。
但根据情况不同,有时就需要使用其它方式。
    首页类的文件,在页面加载完成之后,对将要在内页或其它页使用到的JS进行引入。HTML5有预加载机制,我个人感觉直接引入来的方便。
    至于引入的方式,如果不受布局限制,建意将这些JS单独存放于一个HTML文件中。在onload事件中进行加载,如果受布局限制也可以直接放于body封口前。
    内页类的文件,将所有用到的JS放至顶部。虽然该页面重新引了该JS,但该JS已存在于缓存之中。
    用这种方式,既不会影响至首页的加载速度,又在使用异步load含有JS的页面时可以减少load的数据传输量。
    但需要注意对于带初始化的JS,需要进行处理,重复初始化将会导致页面报错。建意在初始化方法中加入验重判断。
    缓存是把剑,握刀柄别握刀身。   

图片优化:
1、根据图片的使用场景对图片质量进行不同处理,使用不同格式与品质。个人建意不同情况不同处理,根随设计师的脚步,在处理图片问题上不要因此造成页面视觉效果变质。
2、对图片进行合并时,应该避免首页与其它页使用到的图片放在同一个文件内,毕竟首页的加载速度是最重要的。
3、一个区域内需要使用图片时,除了个人头像及幻灯及不固定的图片外。建意都以背景形式使用,对于前端而言,css类的文件更适合于我们去修改。

JS\CSS压缩:
对于压缩,首先是文件存放及命名问题。
JS与CSS中存在图片及文件路径、如果将压缩后的文件与当前文件不放在同一路径时,会造成文件中指向的图片、文件无法引用问题。
然页如果拥在数量较多的文件时,你会发现你想找到一个你想改的文件着实不易。
我个人使用的方式:/PUBLIC_JS/*.*
原文件:PUBLIC_JS = public/js/
压缩文件:PUBLIC_JS = public/js.min/
这样既解决了路径问题,又便于维护。在维护时,修改常量指向未压缩文件,提交至服务器时再次改回。
压缩软件网上很多,我用的是:http://tool.oschina.net/jscompress

1
0
分享到:
评论

相关推荐

    Qzone前端CPU性能优化

    《Qzone前端CPU性能优化:构建流畅用户体验的艺术》 标题与描述:“Qzone前端CPU性能优化”,这不仅是一句简单的口号,而是Qzone技术团队在不断追求极致用户体验过程中的核心课题。在信息爆炸的时代,用户对网页...

    前端性能优化.pptx

    根据给定的文件信息,我们可以将前端性能优化的相关知识点总结如下: ### 一、概述 前端性能优化是指通过各种技术和策略提高网站或Web应用的加载速度、响应速度以及整体用户体验的过程。良好的前端性能不仅能够...

    前端重构实践(一):性能优化

    前端重构实践(一):性能优化 前端重构实践是指对前端代码进行重构以提高性能和模块化。性能优化是前端开发中非常重要的一部分,因为页面加载速度对用户体验和搜索引擎优化都有着极高的要求。本文将讨论如何对前端...

    如何发现前端的性能问题(前端性能监控与优化专场).pdf

    前端性能优化,有很多细节讲解

    较试实用--web前端优化知识总结+笔试+面试总结1

    总结来说,前端优化是一个多维度的工作,包括资源管理、网络传输效率、代码质量等多个方面。恰当的优化不仅可以提高页面加载速度,提升用户体验,还能有效降低服务器资源消耗。对于开发者而言,理解并掌握这些优化...

    前端性能优化

    语言和运行时的垃圾回收器隐藏了内存分配和释放的具体细节。 许多功能无需考虑内存管理即可实现,但却忽略了它可能在程序中带来重大的问题。不当清理的对象可能会存在比预期要长得多的时间。这些对象继续响应事件和...

    微信直播小程序前端

    微信直播小程序前端是一种基于微信平台开发的轻量级应用程序,专为直播功能设计。它允许用户在微信环境中直接观看和参与直播活动,无需下载独立的应用程序。本文将深入探讨微信直播小程序前端的关键技术和实现原理。...

    前端面试资料(包含web前端优化方法和js面试常见内容以及一些面试常见问题)

    #### 一、Web前端优化方法 1. **减少HTTP请求** 减少HTTP请求是提升Web性能的重要手段之一。可以通过合并文件、使用CSS Sprites技术等方式来实现。 2. **CSS Sprites** CSS Sprites是一种将多个小图标或背景...

    纯前端首屏优化1

    首屏优化是提升网站性能和用户体验的关键步骤,尤其是在前端...以上策略是前端首屏优化的一部分,还有更多细节和方法可以持续探索和完善,如预加载、预渲染、服务端渲染等,都是提升首屏加载速度和用户体验的有效手段。

    前端开发工程师分享PPT

    - **小程序/H5/移动端网址**:随着移动互联网的发展,这些轻量级应用的需求日益增加。前端工程师需要了解如何利用Vue.js等前端框架来快速开发这些应用。 #### 二、合作流程 - **产品技术原型设计**:这是前端开发...

    奇店桶装水小程序V1.3.9安装包+骑手端V2.0.1+小程序前端.zip

    3. **小程序前端**:这部分是用户在微信内直接交互的部分,其技术细节可能包括: - **UI设计**:遵循微信小程序的设计规范,提供美观且易用的界面。 - **组件化开发**:利用微信小程序提供的各种组件,如按钮、...

    前端的一些文档

    每个主题都包含了大量的细节和实践技巧,对于前端开发者来说都是重要的学习内容。掌握这些知识点,不仅可以提升开发效率,也能保证项目的质量和安全性。在实际工作中,不断学习和实践这些技术,是成为一名优秀前端...

    ace.zip_ace 前端是啥_ace 前端_java 前端_前端框架

    总结来说,Ace前端框架是Java开发者的一个强大工具,它提供了完整的前端解决方案,让开发者可以专注于创造优秀的用户体验,而不必过多地关注底层细节。通过学习和熟练掌握Ace,开发者能够更高效地构建高性能、响应式...

    志汇叮咚超级外卖小程序6.4.3全开源+前端.zip微信小程序模板源码

    对于志汇叮咚超级外卖小程序来说,这意味着你可以查看并修改它的业务逻辑、界面设计、数据处理等所有细节,以适应特定的需求。 3. **全开源**: 全开源意味着整个项目的源代码都是开放的,不带任何商业限制。这为...

    微信小程序开发-餐饮小程序前端案例源码.zip

    "微信小程序开发-餐饮小程序前端案例源码.zip" 这个标题揭示了我们要探讨的核心主题,即微信小程序的开发,特别是针对餐饮行业的前端实现。这里提到的"源码"意味着我们将深入研究实际的编程代码,了解如何构建这样的...

    百度前端性能监控与优化实践

    ### 百度前端性能监控与优化实践 #### 一、性能监控平台 百度前端团队构建了一个全面的性能监控平台,旨在实现对各个产品线的统一性能监控。该平台设计的目标包括: - **产品线统一性**:确保所有产品能够在一个...

    小狐狸付费AI创作系统2.8.3独立版 + H5端 + 小程序前端【新增Kimi,百川AI通道,修复bug】

    小狐狸GPT付费体验系统的开发基于国外很火的ChatGPT,这是一种基于人工智能技术的...新增百川AI通道,Kimi通道,修复mj的niji和style参数同时选会出错的问题,修复角色模拟的知识库不起作用的bug,优化细节BUG,等等!

    web前端面试资料

    #### 一、前端优化的重要性及目标 前端优化是指通过一系列技术手段提升Web页面性能的过程,旨在改善用户体验的同时降低服务成本。优化的目标主要包括: 1. **用户角度**:提高页面加载速度,提升交互响应速度,...

Global site tag (gtag.js) - Google Analytics