美文网首页
前端基础:优化前端网页性能

前端基础:优化前端网页性能

作者: 番茄炒西红柿L | 来源:发表于2019-02-20 09:45 被阅读0次

1.减少http请求

网页响应时间大多数花在下载网页内容(images,stylesheets,javascript,scripts等),减少https请求来缩短响应时间,我们可以优化页面设计来提高性能

  • CSS Sprite (雪碧图)也成css精灵,是一种css图像合并技术,把页面多个icon和背景图合并到一张图上,页面使用的时候用css中 background-images和background-position 定位出雪碧图中的区域 达到一次http请求就可以获得全部图片,从而来提高网页性能。
  • 多个 js/css 文件合并成一个 js/css 文件,减少下载次数来缩短网站响应时间

2.减少DNS查询次数

页面尽量避免引用外部文件,dns查询结果会在本地系统和浏览器中缓存一段时间,但是页面首次加载会增加响应时间

3.避免非200返回值

每一个http请求都有一个相对于的返回状态标志当次请求是否如期完成,如:
(1)xx:请求收到,这些状态代码表示临时的响应。
(2)xx:操作成功,这类状态代码表明服务器成功地接受了客户端请求。
(3)xx:重定向,客户端浏览器必须采取更多操作来实现请求。
(4)xx:客户端错误,发生错误,客户端似乎有问题。
(5)xx:服务器错误,服务器由于遇到错误而不能完成该请求。
所以,如果有http请求返回为非200的状态码,我们认为这一次请求时无意义的,占用了稀缺的网络资源,所应该避免非200的返回状态码。

4.css和js的引用位置

  • css 在浏览器渲染过程中谈到,dom树构建完成后。CSS要放到html代码的开头的head标签结束前。如果网页是动态生成的,那么在head代码完成后可以页面输出,这样浏览器就会更快地解析出来head中的内容,开始下载CSS文件资源。而CSS放在底部则会引起重新绘制,用户侧感受到“闪屏”的不好体验。
  • js JS在下载的时候会引起两个问题:阻止网页内容的展示并阻止其他资源下载。在“减少http数量”部分中,我们谈到各种资源的下载是并行的,根据不同域名不同浏览器内核并行数量有所不同,所以下载js时候,并行下载机制失效。并且在js中可能包括document.write等改变页面布局的操作,所以渲染引擎会等待js下载完成再开始渲染。所以用户侧页面加载时间会因为等待而变得更长。

5.css和js代码压缩

压缩css/js代码,缩小http传输过程数据。

6.图片懒加载

先加载loading图片,可以减少首次打开网页的响应时间

相关文章

  • 前端性能优化(中)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(上)...

  • 前端性能优化(下)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(中)...

  • 前端基础:优化前端网页性能

    1.减少http请求 网页响应时间大多数花在下载网页内容(images,stylesheets,javascrip...

  • 前端性能优化(上)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 为什么要进行前端性能...

  • 前端性能优化

    js性能小贴士——优化循环 前端网页与js性能优化 我总结的js性能优化的小知识 提高 web 应用性能之 Jav...

  • 前端性能 优化 大全

    js性能小贴士——优化循环 前端网页与js性能优化 我总结的js性能优化的小知识 提高 web 应用性能之 Jav...

  • Web性能优化

    网页渲染性能优化 —— 渲染原理https://zhuanlan.zhihu.com/p/39879808 前端不...

  • 2020-04-11

    前端工程化相关 前端动画相关 优化前端性能

  • 前端面试必问及加分点---性能优化篇

    如何进行网站性能优化 你有用过哪些前端性能优化的方法? 谈谈性能优化问题 代码层面的优化 前端性能优化最佳实践

  • 关于前端性能优化问题详解

    关于前端性能优化问题详解 出处:http://segmentfault.com/blogs 前端性能优化指南 AJ...

网友评论

      本文标题:前端基础:优化前端网页性能

      本文链接:https://www.haomeiwen.com/subject/wjhcyqtx.html