文档章节

Web性能优化:前端工程师

为毛我名叫酱油
 为毛我名叫酱油
发布于 2016/06/27 10:27
字数 388
阅读 21
收藏 0
点赞 0
评论 0

压缩源码和图片

JavaScript文件源代码可以采用混淆压缩的方式,CSS文件源代码进行普通压缩,JPG图片可以根据具体质量来压缩为50%到70%,PNG可以使用一些开源软件来压缩,比如24色变8色、去掉一些PNG格式信息等。


选择合适的图片格式

如果图片颜色较多就使用JPG格式,如果图片颜色较少就使用PNG格式,如果能够通过服务器端判断浏览器支持WebP,那么就使用WebP格式和SVG格式。


合并静态资源

包括CSS、JavaScript和小图片,减少HTTP请求。


开启服务器端的Dzip压缩

这对文本资源非常有效,对图片资源则没有那么大的压缩比率。


使用CDN

或者使用第三方提供的静态资源地址(比如JQuery、normalize.css)。一方面增加并发下载量,另一方面能够和其他网站共享缓存。


延长资源缓存的时间

频繁访问网站的用户就能够更快的访问。不过,这里要通过修改文件名的方式,确保在资源更新的时候,用户会拉取到最新的内容。


把CSS放在页面头部,把JavaScript放在页面底部

这样不会阻塞页面渲染,让页面出现长时间的空白。


-----摘自《Web全栈工程师的自我修养》

© 著作权归作者所有

共有 人打赏支持
为毛我名叫酱油
粉丝 1
博文 2
码字总数 545
作品 0
济南
前端工程的入门须知

本文是写给那些想要入门web前端工程的初学者,高手请路过,也欢迎高手们拍砖。 先说下web前端工程师的价值,目前web产品交互越来越复杂,用户使用体验和网站前端性能优化这些都得靠web前端工...

WEB攻程狮
2017/12/01
0
0
想学前端,为什么不看这些书呢?

目前市场上HTML、CSS 类别书籍,都是大同小异,在当当网、卓越网搜索一下很多推荐。今天web前端大牛根据自己的经验总结如下:Javascript 的书籍推荐看老外写的,国内很多 Javascript 书籍的作...

小懒人23
2016/05/20
69
0
web前端工程师入门须知,你全部了解吗?

本文是写给那些想要入门web前端工程的初学者,高手请路过,也欢迎高手们拍砖。 先说下web前端工程师的价值,目前web产品交互越来越复杂,用户使用体验和网站前端性能优化这些都得靠web前端工...

DarkSpy13
2017/11/28
0
0
《Web性能权威指南》.PDF

简介 本书是谷歌公司高性能团队核心成员的权威之作,堪称实战经验与规范解读完美结合的产物。本书目标是涵盖Web 开发者技术体系中应该掌握的所有网络及性能优化知识。全书以性能优化为主线,...

jackmk
2017/08/12
0
0
各岗位职责和基本能力要求

前端要求 熟悉HTML/CSS/JavaScript等前端技术 熟练运用JavaScript/jQuery/Ajax完成服务器交互及动态效果 前端职责 负责网站和软件前端开发,与后台工程师、设计师协作,输出web前端 完成数据...

小仙女KOMons
2016/12/07
0
0
WEB前端学习面试常见问题:CSS优化性能的方法有哪些?

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰
05/12
0
0
Web前端的学习路线到底是什么,看完秒懂!

最近一直有朋友问我前端的学习路线,今天我就这个问题给大家回答一下。首先我们必须了解前端需要学那些东西,然后再确定怎么学。 前端开发工程师 不仅要掌握基本的Web前端开发技术,网站性能...

web前端02
03/29
0
0
放个大招,招聘的招

直接说正事,放个大招,招人的招!!BIM这么火,需求这么热,让我们干起来,创造美好世界的同时实现个人价值,买车、买房、实现财务自由、赢取白富美~,想想都有点小激动~ 会有小伙伴问,BIM...

史迪奇2号
2017/06/05
0
0
高手问答第 175 期 —— 沪江 iKcamp 团队前端高效开发实践分享

OSCHINA 本期高手问答(11 月 1 日 - 11 月 7 日)我们请来了@iKcamp团队为大家解答关于移动 Web 前端高效开发方面的问题。 “iKcamp团队”由沪江 Web 前端团队中热爱原创和翻译的小伙伴发起,...

局长
2017/10/31
2.1K
27
浅谈在过去的一年中,我所认识的前端开发---------

  不知不觉,时间敲敲的从指间溜走,它就像一个爱捣蛋熊孩子,每一刻都不曾停止对我发起新的挑战。翻阅过去一年我所积累的程序代码、设计文稿,回过头来看自己走过的弯路,再一次重新审视自...

grootzhang
2016/03/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JPA @MappedSuperclass 注解说明

基于代码复用和模型分离的思想,在项目开发中使用JPA的@MappedSuperclass注解将实体类的多个属性分别封装到不同的非实体类中。 1.@MappedSuperclass注解只能标准在类上:@Target({java.lang....

海博1600
12分钟前
0
0
Scala Configuration 相关API

Play使用了 Typesafe config library,但是也提供了一个有着更多Scala高级特性的的 Configuration 封装。不熟悉Typesafe配置的开发者可以移步 configuration文件的语法和特性文档。 读取配置...

Landas
今天
1
0
使用cookie技术 记住账号

1. 效果 2. 实现过程 2.1 前端 将用户的选中传递给后台 这个参数的获取是 参考:https://my.oschina.net/springMVCAndspring/blog/1860498 // var rememberLogin = $("#rememberLoginId").i...

Lucky_Me
今天
1
0
《趣谈网络协议》02之网络分层的真实含义

一、提出问题 1.提出问题 当你听到什么二层设备、三层设备、四层 LB 和七层 LB 中层的时候,是否有点一头雾水,不知道这些所谓的层,对应的各种协议具体要做什么“工作”? 2.这四个问题你弄...

aibinxiao
今天
2
0
Python3学习日志二 Python中的集合set和字典dict

1.集合set 定义一个集合set 我们可以看到定义集合set有两种不同的形式,如果要定义一个空的集合set不能用{}而是要用set();另外,集合是无序的,而且set中的元素是不可重复的,如果你定义了一...

Mr_bullshit
今天
0
0
adb 操作指令详解

ADB,即 Android Debug Bridge,它是 Android 开发/测试人员不可替代的强大工具,也是 Android 设备玩家的好玩具。 注:有部分命令的支持情况可能与 Android 系统版本及定制 ROM 的实现有关。...

孟飞阳
今天
0
0
nodejs安装以及环境配置(很好的node安装和配置文章,少走很多弯路)

一、安装环境 1、本机系统:Windows 10 Pro(64位) 2、Node.js:v6.9.2LTS(64位) 二、安装Node.js步骤 1、下载对应你系统的Node.js版本:https://nodejs.org/en/download/ 2、选安装目录进...

sprouting
今天
1
0
Redisson

了解了Redisson,发现使用挺简单的,接下来准备深入学习一下。 Redisson介绍 Redisson是架设于Redis基础之上的一个Java驻内存数据网格(In-Memory Data Grid) Redisson在基于NIO的Netty框架上...

to_ln
今天
0
0
python有哪些好玩的应用实现,用python爬虫做一个二维码生成器

python爬虫不止可以批量下载数据,还可以有很多有趣的应用,之前也发过很多,比如天气预报实时查询、cmd版的实时翻译、快速浏览论坛热门帖等等,这些都可以算是爬虫的另一个应用方向! 今天给...

python玩家
今天
0
0
python爬虫日志(3)-爬去异步加载网页

在浏览器检查元素页面中,选取Network中的XHR选项即可观察每次加载页面,网页发出的请求,观察url的规律即可利用封装的函数对每一页进行爬取。

茫羽行
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部