全方位分析web前端如何进行性能优化

前言:

最近刚刚完成项目,空闲一段时间,想起之前有被问起怎么对前端进行性能优化,自己也是脑中零零散散的总不成体系,现特来总结,欢迎补充指教。

 

1、整体资源

  (1)js、css源码压缩

  (2)css文件放到文档顶部,js 文件放到文档底部

    因为浏览器渲染网页是自上而下的,用户第一眼见到的是页面,先加载页面相关的提高页面加载速度,另外避免js在页面没有完全加载完成操作DOM带来错误

  (3)进行CDN托管(具体可参看https://div.io/topic/930)

  (4)data缓存

 

2、css

(1)避免使用css expression (css 表达式) 

        微软在IE5时支持,IE8就不支持了,过老的内核,这个基本没有人会使用

 (2)使用CSS Sprites(图片精灵)

  将图片合到一张大图,并且控制图片大小(在满足显示的情况下,过大图片可以进行质量压缩),目的减小体积,减小http访问次数

 (3)js中动态改变元素样式时,使用类名修改,而不是直接在DOM中更改css 属性,避免页面进行重构

 

3、image

    (1)大型web应用中,可以搭建图片服务器,存放图片以及视频资源(具体实施请自行百度)

 (2)在 对于有图片画廊及图片占大比重的网站中,采取图片预加载的方式,提升用户体验

   (可参考https://blog.csdn.net/sunshine940326/article/details/53536535?locationNum=3&fps=1)

 

4、js

(1)模块化编程,养成封装方法的习惯,提高代码的重复利用率

(2)减少闭包的使用频率,减少内存占用

 

目前想到的是以上,欢迎补充和指教!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370148.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

DshanMCU-R128s2 SDK 架构与目录结构

R128 S2 是全志提供的一款 M33(ARM)C906(RISCV-64)HIFI5(Xtensa) 三核异构 SoC,同时芯片内部 SIP 有 1M SRAM、8M LSPSRAM、8M HSPSRAM 以及 16M NORFLASH。 本文档作为 R128 FreeRTOS SDK 开发指南,旨在帮助软件开发工程师、技术支持工程师快速上手&am…

数据导出

数据导出和数据导入刚好是相反的,把逻辑反过来就可以了。 源码:https://github.com/SeaLee02/FunctionModule/blob/master/UploadFiles/WebDemo/COM/DataToOut.aspx 效果: 然后勾选需要导出的数据,生成Excel 部分前台:…

c语言清空输入缓冲区函数,c语言:C语言清空输入缓冲区在标准输入(stdin)情况 -电脑资料...

C语言清空输入缓冲区在标准输入(stdin)情况下的使用程序1://功能:先输入一个数字,再输入一个字符,输出hello bit#include int main(){int num 0;char ch ;scanf("%d", &num);scanf("%c", &ch);pri…

Spring MVC 3:上传多个文件

只是在办公室又漫长的一天,数据库不可用,一个团队成员现在滞后一周。 因此,我们必须作为一个团队来交付它。 在Spring3,它看起来很直接上传文件。 但是,从jsp文件上载多个文件几乎没有帮助。 上载多个文件需要完成三件…

spring 事务隔离级别和传播行为_Spring事务传播性与隔离性实战

一、事务传播性1.1 什么是事务的传播性事务的传播性一般在事务嵌套时候使用,比如在事务A里面调用了另外一个使用事务的方法,那么这俩个事务是各自作为独立的事务执行提交,还是内层的事务合并到外层的事务一块提交那,这就是事务传播…

前端为什么非要动静分离 说一下CDN托管的意义

大型Web应用对速度的追求并没有止步于仅仅利用浏览器缓存,因为浏览器缓存始终只是为了提升二次访问的速度,对于首次访问的加速,我们需要从网络层面进行优化,最常见的手段就是CDN(Content Delivery Network,…

unity语音聊天之 www.GetAudioClip

最近在开发语音聊天功能,游戏需要跨平台安卓与ios,上传本地录制的wav文件至服务器后,需要根据服务器返回的地址进行语音文件的下载并进行播放。 这里通过使用www进行下载并播放 其中在ios播放时却不行了,查询官方文档后发现,ios必…

轻谈BFC

BFC 定义 CSS2.1的定义 Block formatting contexts 9.4.1 Block formatting contexts Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with overflow other …

Java中的Selenium / WebDriver示例

几年前,我正在忙于一些工作,客户希望了解如何解决现实世界中的问题。 他们要求我自动化woot.com网站上的某些任务。 他们的任务是访问各个网站,并阅读当天商品的名称和价格。 我写了一些Selenium代码,以为可以将其张贴在这里&am…

c语言中怎样实现空格的替换,C语言实现去除字符串中空格的简单实例

在网上看了些去除空格的代码,觉得都不是很简洁,就自己写代码实现它本着高效率,不使用额外存储空间的想法实现该功能去除空格一共有三种:1、去除全部空格;2、一种是去除左边空格;3、去除右边空格想去除左右两边空格,只要先去除左边…

python消息队列中间件_python-RabbtiMQ消息队列

1.RabbitMQ简介AMQP,即Advanced Message Queuing Protocol,高级消息队列协议,是应用层协议的一个开放标准,为面向消息的中间件设计。消息中间件主要用于组件之间的解耦,消息的发送者无需知道消息使用者的存在&#xff…

CSS position(定位)属性

关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left 属性则决定了该元素的最终位置。 然后来看看什么是文档流(normal flow),下面是 www.w3.org 的描述: Normal flo…

tomcat配置文件server.xml详解

版权声明:本文为博主原创文章,未经博主允许不得转载。 目录(?)[] 元素名 属性 解释 server port 指定一个端口,这个端口负责监听关闭tomcat 的请求 shutdown 指定向端口发送的命令字符串 service name 指定service 的名字 Con…

均值,方差,协方差,协方差矩阵,特征值,特征向量

大牛博客,收藏一下 http://blog.csdn.net/yangleo1987/article/details/52845912转载于:https://www.cnblogs.com/gaohai/p/8086626.html

Java ByteBuffer –速成课程

以我的经验,当开发人员第一次遇到java.nio.ByteBuffer时,会引起混乱和细微的错误,因为如何正确使用它尚不明显。 在我对API文档感到满意之前,需要反复阅读API文档和一些经验以实现一些微妙之处。 这篇文章是关于如何正确使用它们的…

c语言cth三角函数表示,三角函数与双曲函数基本公式对照表

圆函数(三角函数)1.基本性质:sin tan cos x x x ,cos cot sin xx x 1sec cos x x ,1csc sin x x tan cot 1x x sin csc 1x x sec cos 1x x 22sin cos 1x x 221tan sec x x ,221cot csc x x 2.奇偶性:sin()sin x x -- cos()cos x x - tan()tan x x --3.…

实现编辑功能有哪几个action_Web 应用的撤销重做实现

背景前不久,我参与开发了团队中的一个 web 应用,其中的一个页面操作如下图所示:GIF这个制作间页面有着类似 PPT 的交互:从左侧的工具栏中选择元素放入中间的画布、在画布中可以删除、操作(拖动、缩放、旋转等&#xff…

为什么我们要做三份 Webpack 配置文件

时至今日,Webpack 已经成为前端工程必备的基础工具之一,不仅被广泛用于前端工程发布前的打包,还在开发中担当本地前端资源服务器(assets server)、模块热更新(hot module replacement)、API Pro…

使用maven插件构建docker镜像

为什么要用插件 主要还是自动化的考虑,如果额外使用Dockerfile进行镜像生成,可能会需要自己手动指定jar/war位置,并且打包和生成镜像间不同步,带来很多琐碎的工作。 插件选择 使用比较多的是spotify的插件:https://github.com/spo…

windows下如何安装pip以及如何查看pip是否已经安装成功?

最近刚学习python,发现很多关于安装以及查看pip是否安装成的例子都比较老,不太适合于现在(python 3.6 )因此,下一个入门级别的教程。 0:首先如何安装python我就不做介绍了。 1:如果安装的是pyth…