关于web前端性能优化问题
好久没有来博客写随笔了,可能是懒了吧,哈哈,
最近很想整理一篇关于前端性能优化的问题,毕竟能提高网站的观赏性对吧。提升网站性能,提升用户体验
那 什么是web性能优化?
可以这么理解:从用户访问资源到资源完整的展现在用户面前的过程中,通过技术手段和优化策略,缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。
那么怎么才能提高web性能优化呢? 可以从这几个方面考虑:
1.减少HTTP请求
注:这个是很基础且必须遵循的知识点,可是为了文章的完整性勉为其难加进来吧,嘿嘿。
引入外部文件好处是显而易见的,而且是项目稍稍复杂一点的时候就有必要了这样做了。
易维护、易扩展,方便管理和重复利用。
正确的方式:
JavaScript是浏览器中的霸主,为什么这么说,因为在浏览器在执行JavaScript代码时,不能同时做其它事情,
因为这个阻塞的特点,建议把JavaScript代码放到标签以前,这样既能有效的防止JavaScript的阻塞,又能使得页面的HTML结构能更快的释放
6.压缩 CSS, JS 和 HTML
压缩技术可以从文件中去掉多余的字符。你在编辑器中写代码的时候,会使用缩进和注释,这些方法无疑会让你的代码简洁而且易读,
<link rel="prefetch" href="http://www.example.com/"> <!-- Firefox -->
浏览器的空闲时间去先下载用户 指定需要的内容,然后缓存起来,这样用户下次加载时,就直接从缓存中取出来,效率就快了.
对一个网站而言,CSS、javascript、logo、图标这些静态资源文件更新的频率都比较低,而这些文件又几乎是每次http请求都需要的,如果将这些文件缓存在浏览器中,可以极好的改善性能。通过设置http头中的cache-control和expires的属性,可设定浏览器缓存,缓存时间可以是数天,甚至是几个月。
在某些时候,静态资源文件变化需要及时应用到客户端浏览器,这种情况,可通过改变文件名实现,即更新javascript文件并不是更新javascript文件内容,而是生成一个新的js文件并更新HTML文件中的引用。
9、异步请求Callback(就是将一些行为样式提取出来,慢慢的加载信息的内容)
在某些页面中可能存在这样一种需求,需要使用 script标签来异步的请求数据。类似:
- <span style="font-size:14px;">/*Callback 函数*/
- function myCallback(info){
- //do something here
- }
- HTML:
- Callback返回的内容 :
- myCallback('Hello world!');
- </span>
以上是我所了解的web性能优化,欢迎各位访客指点和评论,我都会和您沟通