文档章节

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前端开发工程师 工作地点:北京昌平 经验:有参与过2个或以上项目开发 最低学历:计算机/网页设计/IT 大专或以上 管理经验:否 工作性质:全职 职位描述: 1. 负...

张同
2011/12/18
331
0
web前端工程师入门须知,你全部了解吗?

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

DarkSpy13
2017/11/28
0
0
360与Facebook工程师畅聊大前端,360互联网技术训练营第四期

活动速递 360互联网技术训练营首位海外讲师来啦~小伙伴们列队欢迎 奇舞团不是跳舞的,他是360公司的一支前端队伍; 裕波,w3ctech社区的发起人,360奇舞团成员; Facebook前端工程师黄士旗加...

360tech
2015/11/06
1K
0
想学前端,为什么不看这些书呢?

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

小懒人23
2016/05/20
69
0
线上商城系统开发需求前端开发工程师(兼职可远程)

1、负责移动端H5页面前端开发,编写HTML、CSS和JS代码,配合后台工程师完成应用开发 2、制定JS、CSS、HTML开发规范并推进执行,扎实的JS功底,精通VueMV框架(如Vue, 3、了解前端模块化,工程...

shanwell
2016/09/05
3
2

没有更多内容

加载失败,请刷新页面

加载更多

图像库stb_image

https://github.com/nothings/stb 目前一般主流的图像格式也就是bmp,jpg,png,tga,dds,除了DDS一般是给DX用的,虽然一堆OpenGL程序也有用的,但是我一般只用png和tga, png不用说了,带a...

robslove
15分钟前
1
0
Spring 事务提交回滚源码解析

前言 在上篇文章 Spring 事务初始化源码分析 中分析了 Spring 事务初始化的一个过程,当初始化完成后,Spring 是如何去获取事务,当目标方法异常后,又是如何进行回滚的,又或是目标方法执行...

TSMYK
33分钟前
2
0
百度黄埔学院将培养一批首席AI架构师,为“国之重器”赋能

深度学习高端人才不仅是AI发展的重要养分,也是企业转型AI巨大推动力。2019年1月19日,百度黄埔学院——深度学习架构师培养计划在百度科技园举行开学典礼,深度学习技术及应用国家工程实验室...

深度学习之桨
今天
3
0
扒站wget仿站

wget -c -r -p -np -k http://xxx.com/xxx 其中: -c, --continue (断点续传) 接着下载没下载完的文件 -r, --recursive(递归) specify recursive download.(指定递归下载) -p, --page...

临江仙卜算子
今天
2
0
Nextjs+React非页面组件SSR渲染

@随风溜达的向日葵 Nextjs Nextjs是React生态中非常受欢迎的SSR(server side render——服务端渲染)框架,只需要几个步骤就可以搭建一个支持SSR的工程(_Nextjs_的快速搭建见Next.js入门)...

随风溜达的向日葵
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部