文档章节

Web性能优化:前端工程师

为毛我名叫酱油
 为毛我名叫酱油
发布于 2016/06/27 10:27
字数 388
阅读 21
收藏 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前端工...

DarkSpy13
2017/11/28
0
0
想学前端,为什么不看这些书呢?

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

小懒人23
2016/05/20
69
0
前端协作流程

Web系统   在介绍协作流程之前,首先简单地了解Web系统的结构   从宏观上来说,Web系统是部署在服务器上用于为web客户端提供服务的系统。不同的Web客户端根据不同的需求,发送请求到服务...

sshpp
2017/07/24
0
0
浅谈在过去的一年中,我所认识的前端开发---------

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

grootzhang
2016/03/08
0
0
Web前端的学习路线到底是什么,看完秒懂!

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

web前端02
03/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Vue- 对象语法 v-bind:class与对象语法的使用

我们可以传给 v-bind:class 一个对象,以动态地切换 class 。 <div v-bind:class="{ active: isActive }"></div>//对象语法也就是在v-bind:class绑定一个对象的时候,里面的值将影响最终取值...

文文1
9分钟前
1
0
epoll中使用

1、一个线程epoll_wait时,另一个线程调用epoll_ctl是安全的。 2、使用edge触发,在socket有数据到来后,不收取数据,再次调用epoll_ctl将socket加入,仍会触发下一次动作。 asio用该方法来发...

gelare
37分钟前
1
0
PHP规范PSR2

PSR标准 - PSR-2 为了尽可能的提升阅读其他人代码时的效率,下面例举了一系列的通用规则,特别是有关于PHP代码风格的。 各个成员项目间的共性组成了这组代码规范。当开发者们在多个项目中合作...

geek土拨鼠
52分钟前
5
0
【极简】如何在服务器上安装SSL证书?

本文适合任何人了解,图形化操作。下面以腾讯云为例,并且服务器(linux)也安装了宝塔面板。 1.登陆腾讯云账号进入控制台,找到SSL的产品 2.按要求申请并填写表单,记住私钥密码 3.提交后,待...

皇冠小丑
今天
1
0
深入理解编译器

深入理解编译器 原文出处 欢迎向Rust中文社区投稿,投稿地址,好文将在以下地方直接展示 1 Rust中文社区首页 2 Rust中文社区Rust文章栏目 3 知乎专栏Rust语言 编程语言是如何工作的 从内部理解...

krircc
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部