对于Web性能优化, 了解和经验
我们在发布项目之前压缩CSS和JavaScript源代码,这样文件体积就变小了,用户加载必要资源所花的时间也就更短了。
压缩源码和图片
JavaScript文件源代码可以采用混淆压缩的方式,CSS文件源代码进行普通压缩,JPG图片可以根据具体质量来压缩为50%到70%,PNG可以使用一些开源压缩软件来压缩,比如24色变成8色、去掉一些PNG格式信息等。
选择合适的图片格式
如果图片颜色数较多就使用JPG格式,如果图片颜色数较少就使用PNG格式,如果能够通过服务器端判断浏览器支持WebP,那么就使用WebP格式和SVG格式。
合并静态资源
包括CSS、JavaScript和小图片,减少HTTP请求。
开启服务器端的Gzip压缩
这对文本资源非常有效,对图片资源则没那么大的压缩比率。
使用CDN
或者一些公开库使用第三方提供的静态资源地址(比如jQuery、normalize.css)。一方面增加并发下载量,另一方面能够和其他网站共享缓存。
延长静态资源缓存时间
这样,频繁访问网站的访客就能够更快地访问。不过,这里要通过修改文件名的方式,确保在资源更新的时候,用户会拉取到最新的内容。
把CSS放在页面头部,把JavaScript放在页面底部
这样就不会阻塞页面渲染,让页面出现长时间的空白。
每一个条目都可以进一步深层挖掘下去。
Web性能优化分为服务器端和浏览器端两个方面。
此外,由于中文的歧义性,Web性能优化这个词既可以解读成页面加载速度(Page Speed)的优化,也可以解读成页面渲染性能(Page Performance)的优化。或者是二者的集合。所以,应聘者如果能在这个问题上多做一些分析,会有很高的加分。但是A君在网络性能方面的研究只是浅 尝辄止,停留在压缩资源方面,这说明他还没有足够理解HTTP协议本身。
关于网络性能和HTTP协议,作为大公司的前端工程师是非常看重的,因为每一个页面都会有亿万用户访问量,任何一点对服务器带宽压力都会积少成多,最终造成很大的成本。关于这方面的技术详解,我在后面会有一篇单独的文章来分析。
对于Web性能优化, 了解和经验的更多相关文章
- web性能优化 来自《web全栈工程师的自我修养》
最近在看<web全栈工程师的自我修养>一书,作者是来自腾讯的前端工程师.作者在做招聘前端的时候问应聘者web新能优化有什么了解和经验,应聘者思索后回答“在发布项目之前压缩css和 Java ...
- 关于WEB 性能优化 (摘抄)
压缩源代码和图片 JavaScript文件源代码可以采用混淆压缩的方式,CSS文件源代码进行普通压缩,JPG图片可以根据具体质量来压缩为50%到70%,PNG可以使用一些开源压缩软件来压缩,比如24色 ...
- Web性能优化-合并js与css,减少请求
Web性能优化已经是老生常谈的话题了, 不过笔者也一直没放在心上,主要的原因还是项目的用户量以及页面中的js,css文件就那几个,感觉没什么优化的.人总要进步的嘛,最近在被angularjs吸引着,也 ...
- web性能优化——浏览器相关
简介 优化是一个持续的过程.所以尽可能的不要有人为的参与.所以能自动化的或者能从架构.框架级别解决的就最更高级别解决. 这样即能实现面对开发人员是透明的.不响应,又能确保所有资源都是被优化过的. 场景 ...
- Web性能优化系列
web性能优化之重要,这里并不打算赘述.本系列课程将带领大家认识.熟悉.深刻体会并且懂得如果去为不同的站点做性能优化 同时,本系列将还会穿插浏览器兼容性相关问题的解决方案,因为在我看来,兼容性同样属于 ...
- 移动web性能优化笔记
移动web性能优化 最近看了一些文章,对移动web性能优化方法,做一个简单笔记 笔记内容主要出自 移动H5前端性能优化指南和移动前端系列——移动页面性能优化
- 关于SQL性能优化的十条经验
1.查询的模糊匹配 尽量避免在一个复杂查询里面使用 LIKE '%parm1%'—— 红色标识位置的百分号会导致相关列的索引无法使用,最好不要用. 解决办法: 其实只需要对该脚本略做改进,查询速度便会 ...
- web性能优化之--合理使用http缓存和localStorage做资源缓存
一.前言 开始先扯点别的: 估计很多前端er的同学应该遇到过:在旧项目中添加新的功能模块.或者修改一些静态文件时候,当代码部署到线上之后,需求方验收OK,此时你送了一口气,当你准备开始得意于自己的ma ...
- Web 性能优化:Preload与Prefetch的使用及在 Chrome 中的优先级
摘要: 理解Preload与Prefetch. 原文:Web 性能优化:Preload,Prefetch的使用及在 Chrome 中的优先级 作者:前端小智 Fundebug经授权转载,版权归原作者所 ...
随机推荐
- vue3 父菜单渲染出来了,但是子菜单渲染不出来的原因
子菜单始终渲染不出来,控制台出现警告如下: 在查看框架源码时,发现在渲染时应用了递归.在这个博客找到答案,原因是升级的vue的版本没有升级@vue/compiler-sfc的版本,这两个版本应该保持一 ...
- 不同目录存在相同名称的py文件,执行时,报错的解决方法
1.问题现象如下,执行时报错 imported module 'test_case_execution' has this __file__ attribute platform win32 -- ...
- PowerShell【变量篇】
PS C:\Users\Administrator> $str='这是一个变量' PS C:\Users\Administrator> $str 这是一个变量 PS C:\Users\Ad ...
- Jquery通过遍历数组给checkbox赋默认值
需求:有一个数组:(北京菜,粤菜),checkbox如下: 现在想通过遍历这个数组,使数组里包含的值,在checkbox选中 代码: var flavors = new Array([北京菜 , 粤菜 ...
- 使用 try-catch
ECMA-262 第 3 版引入了 try-catch 语旬,当 try-catch 语句中发生错误时, 浏览器会认为错误已经被处理了 ,因而不会报告错误.对于那些不要求用户懂技术,也不需要用户理解错 ...
- 第10组 Beta冲刺 (4/5)
1.1基本情况 ·队名:今晚不睡觉 ·组长博客: https://www.cnblogs.com/cpandbb/p/14018650.html ·作业博客:https://edu.cnblogs.c ...
- SQL高级优化(一)之MySQL优化
不同方案效率对比 MySQL各字段默认长度(一字节为8位) 整型: TINYINT 1 字节 SMALLINT 2 个字节 MEDIUMINT 3 个字节 INT 4 个字节 INTEGER 4 个字 ...
- Leetcode算法系列(链表)之删除链表倒数第N个节点
Leetcode算法系列(链表)之删除链表倒数第N个节点 难度:中等给定一个链表,删除链表的倒数第 n 个节点,并且返回链表的头结点.示例:给定一个链表: 1->2->3->4-&g ...
- PowerPoint2010实现折线图动态展示
原文链接:https://www.toutiao.com/i6797629648881582596/ 我们经常会制作折线图表来表达一个过程的趋势变化,而如果让折线图动起来,会更加的生动.接下来我们将一 ...
- 基于windows环境VsCode的ESP32开发环境搭建
1. 基于windows环境VsCode的ESP32开发环境搭建,网上有各类教程,但是我实测却不行. 例如我在vscode内安装的乐鑫插件,扩展配置项是下图这样: 而百度的各类博文却都是这样: 经过网 ...