1000字范文,内容丰富有趣,学习的好帮手!
1000字范文 > 游戏开发商网站前端模板 【读书笔记】如何进行web前端性能优化 – 前端技术 – 前端

游戏开发商网站前端模板 【读书笔记】如何进行web前端性能优化 – 前端技术 – 前端

时间:2022-05-12 20:20:59

相关推荐

游戏开发商网站前端模板 【读书笔记】如何进行web前端性能优化 – 前端技术 – 前端

那如何才能优化前端性能?归纳为三步

一、关键资源字节数

字节数也就是通常说的减少资源文件(js、css、image、video…)的大小。

1、压缩

前端使用uglify混淆压缩

后端开启gzip

对图片进行压缩,使用压缩比例更高的格式(WebP)

2、缓存

强缓存(http状态码:200),不用请求服务器直接使用本地缓存,协商缓存(http状态码:304),使用时先请求服务器若被告知缓存没过期则使用本地缓存,不用下载资源,使用localstorage对数据进行存储。

3、针对首屏优化

对非关键资源延迟加载、异步加载,减少首屏资源大小

二、关键资源连接数

1、合并请求

使用http2.0的多路复用合并请求配置combo,在无法使用http2.0的情况下作为一种合并资源请求的手段。

2、减少图片请求数

使用spite图,使用svg-symbol。

3、针对一些场景采用css、js内联的方式。

4、使用强缓存减少了一次服务器请求。

5、非关键资源延迟、异步加载,减少了首屏资源连接数。

三、关键渲染路径

1、bigpipe分块输出

这里主要是因为要完成一整个页面的输出后端需要处理很多个任务,大家可以将这些多个任务进行分块,谁先完成谁就先输出,最终通过JS回填的方式输出DOM节点,这种方式主要解决了直出页面阻塞的问题。

2、bigrender分块渲染

常规的手段就是采用前端模板渲染页面,针对首屏时间主要减少了首次构建DOM树时的节点数

3、针对reflow,repaint,composit路径处理。

4、涉及到动画时关于layer的概念render layer、graphics layer。

5、css放在头部、js放底部避免阻塞DOM树的构建,关于css、js的位置对于页面渲染的影响大家可以关注下相关的文章。核心:css资源不会阻塞DOM树的构建但会阻塞DOM的渲染,JS会阻塞DOM树的构建,CSS会阻塞JS的执行。

以上就是针对Web前端性能优化归纳出的解决方案。更多Web前端学习资料,关注“武汉千锋”微信公众号领取。

举个例子:运维研发人员

一个全面的前端是运维开发的关键,因为很有可能不会有产品经理,不会有logo等UI设计人员,而且需要懂django模板(没几个前端懂这个),所以懂前端的运维开发一定懂django或者其他框架, 也就是能写后端代码了,而且得会写js/css等。

在写前端之前,首先得选个UI框架,比如Bootstrap、easyUI,这两个是非常基础常用的,在开发企业内部系统首选,偶会选lazyUI/腾讯蓝鲸UI布局,bootstrap 作为补充使用。

一般是不可以的,游戏前端主要是美工美工,web前端主要是编写网页代码实现前端页面。两者的不同点如下:

1、游戏前端:一般是设计游戏中的任务或者画面场景,要求有较高的美术功底,其主要任务是设计或者制作图片场景,一般是不涉及代码的编写和游戏的制作,工作类似与web前端中的美工。

2、web前端现在和前端美工一般是独立工作的,web前端需要将web美工制作的网站效果图制作成为网站页面,需要编写html、css、js等代码来完成工作。

3、座椅游戏前端可以转行做web前端美工而不能做web前端工程师,现在美工和前端工作是完全分离的。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。