web前端性能优化

前端性能优化点,涉及的功能 1)网络层面。2)构建层面。3)服务端层面。4)浏览器渲染层面。 资源的合并与压缩,图片编解码原理和类型选择,浏览器渲染机制。 掌握前端性能优化的原理,这些优化点如何与业务相互结合,业务优化点有哪些可以优化的点。 了解当前大公司在性能优化上所做的实践,学会分析自身业务,选择合适的性能优化方式。


资源的合并与压缩

掌握知识要点:
理解减少http请求数量和减少请求资源大小两个优化要点;
掌握压缩与合并的原理;
掌握通过在线网站和fis3两种实现压缩与合并的方法。
CS架构:
BS架构:开发人员将前端代码发
布到远程服务器webserver以及远程CDN上,用户打开浏览器输入相应网址,这是浏览器向远程服务器发送请求,动态增量式的去加载静态资源,因次web前端去访问过程是一个动态增量地加载静态资源过程,通过http请求,通过浏览器发出到server并且返回,最终拿到资源,这个过程中我们拿到资源接口返回数据更快,那么对我们web前端来讲体验会更好。
浏览器的一个请求从发送到返回都经历了什么?
web前端性能优化_第1张图片
 
 
请求过程中一些潜在的性能优化点:
  • dns是否可以通过缓存减少dns查询时间?
  • 网络请求的过程走最近的网络环境?
  • 相同的静态资源是否可以缓存?
  • 能否减少请求http请求大小?
  • 减少http请求
  • 服务端渲染
深入理解http请求的过程是前端性能优化的核心,基于对业务更深入的理解,及对业务技术栈更深入的理解。
资源的合并与压缩包含哪两种知识点?
减少http请求数量合并;减少请求资源的大小(压缩);
 
html压缩
html代码压缩就是压缩这些在文本文件中有意义,但是在html中不显示的字符,包括空格,制表符,换行符等,还有一些其他有意义的字符,如html注释也可以被压缩。
如何进行html压缩:
1)使用在线网站进行压缩(现在很少使用这种方式进行,大多数公司使用webpack构建工具进行压缩);
2)nodejs提供了html-minifier工具;
3)后端模板引擎渲染压缩;
css压缩:
无效代码删除;css语义合并;
如何进行css压缩:
1)使用在线网站进行压缩;
2)使用html-minifier对html中的css进行压缩;
3)使用clean-css对css进行压缩;
js压缩与混乱:
无效字符的删除,剔除注释,代码语义的缩减和优化;代码保护层面 ;
如何进行js压缩和混乱:
1)使用在线网站进行压缩;
2)使用html-minifier对html中的js进行压缩;
3)使用uglifyjs2对js进行压缩;
文件合并存在的问题:
1)首屏渲染问题(React、Vue );2)缓存失效问题;
针对上面2个问题如何解决?
1)公共库合并;在真实的业务场景中,将公共库打包成一个文件,将业务代码(频繁改变)打包成一个文件,就算我们改动业务代码的时候,也不会影响到业务层代码的情况
2)不同页面的合并;针对经常单页应用,单页面应用在渲染的时候会请求当前页面对应的js,而不是把所有js都打成一个包,请求回来是不合理的。在真实的业务场景中,我们期望的是单页面中某一个页面被路由到的时候,才去加载那个页面的组件,请求那个页面的js。把不同页面的js分别打包,当前端路由路由到哪个页面的时候才去加载那个页面的组件(对应js文件)。这种方式在webpack中是可以实现,异步加载组件结合现在的框架。
3)见机行事,随机应变;
如何进行文件合并:
使用在线网站进行文件合并;使用nodejs实现文件合并;
进行文件合并有些情况下还有一个原因就是:受限于我们浏览器所支持一个域名的并发情况。比如说
浏览器可以并行加载100个js文件,其实它会发100个请求,是实际上浏览器本身因为受限它起的线程数量,所以浏览器针对每一个域名并发请求js的数量(静态资源数量)是有限的,比如。。100个js通过

你可能感兴趣的:(web前端性能优化)