美文网首页
web前端优化

web前端优化

作者: Aniugel | 来源:发表于2019-06-18 20:46 被阅读0次

一、减少http请求

①雪碧图
②捆绑文件:将多个脚本文件、样式表文件捆绑成一个文件,以此来减少文件下载速度
③inline images: 通过编码的字符串将图片内嵌到网页文本中,例如将图片转为base64格式的数据编码

二、减少DNS查询次数

DNS查询也消耗响应时间,如果我们网页内容来自各个不同的domain(例如嵌入了开放广告或者引入了外部图片或者脚本),首次解析这些domain也需要消耗一定时间,DNS查询结果缓存在本地系统和浏览器中一段时间,所以DNS查询一般是对首次访问速度有影响

三、缓存ajax

ajax可以帮助我们异步下载网页内容,但是有些网页内容即使是异步的,用户还是在等待它的返回结果,例如ajax的返回是用户联系人的下拉列表,所以我们还是要注意应用一些规则提高ajax的响应速度

添加Expires或Cache-Control报文头使回复可以被客户端缓存
压缩回复内容
减少DNS查询
精简js
避免跳转
配置Etags

四、懒加载

网页的加载其实是按照代码书写顺序加载的,这就涉及到了加载的优先级,首先应该让谁先加载,先显示,剩下的次要内容就可以延迟加载
js是典型的可以延迟加载的内容,一个比较激进的做法是在开发网页时确保网页在没有js的情况下也可以基本工作,然后通过延迟加载脚本完成一些高级功能

五、预加载

与延迟加载相反,提前加载是为了提前加载接下来网页中访问的资源,下面是提前加载的了类型

无条件提前加载:当网页加载完成后,马上去下载一些其他内容,例如google会在页面加载成功后马上去下载一个所有结果中都会用到的image sprite

有条件加载:根据用户输入推断需要加载的内容,很常见的就是用户输入一些关键字搜索引擎就会显示很多相关词条,还没有按下搜索键就自动跳转到搜索内容

六、减少DOM元素数量

网页中元素过多对网页的加载和脚本的执行都是沉重负担,500个元素和5000个元素在加载速度上会有很大差别

七、使用CDN

减少网页下载的内容,提高下载速度可以通过内容分发网络-CDN来提升,CDN通过部署在不同地区的服务器来提升客户的下载速度,可以通过免费的CDN供应商来分发网页资源

八、根据域名划分内容

浏览器一般对同一个域的下载连接数有所限制,按照域名划分下载内容可以浏览器增大并行下载连接,但是注意控制域名使用在2-4个之间,不然dns查询会增多
可以将静态资源放在类似于static.example.com,动态内容放example.com,这样做还有一个好处是可以在静态域名商避免使用cookie

九、减少iframe数量

iframe使用有优点也有缺点
优点

可以用来加载速度较慢的内容,例如广告
安全箱保护,浏览器会对iframe中内容进行安全控制
脚本可以并行下载
缺点
即使iframe为空也消耗加载时间
会阻止页面加载
没有语义

十、避免404

404代表服务器没有找到资源,客户端发送一个请求但是服务器却返回一个无用的结果,时间浪费掉了
更糟糕的是我们网页加载中需要加载一个外部脚本,结果却返回一个404,不仅阻塞了其他脚本的下载,下载回来的内容客户端还会将其当成是js去解析

原文

相关文章

  • Web前端性能优化,应该怎么做?

    想要成为一名合格的Web前端工程师,Web前端性能优化是一个必须要掌握的知识,那么应该怎么进行Web前端性能优化呢...

  • 武汉HTML5前端开发工程师为何涨薪这么快?

    目前web产品交互越来越复杂,用户使用体验和网站前端性能优化这些都得靠web前端工程师去做,web前端工程师是设计...

  • web前端面试需要的技术程序

    目前web产品交互越来越复杂,用户使用体验和网站前端性能优化这些都得靠web前端工程师去做web前端工程师是设计加...

  • 前端开发

    HTML、CSS、JavaScript Web前端手机Html5前端性能优化浏览器兼容移动应用内置WEB页兼容 J...

  • 性能优化

    +WEB前端性能优化:HTML,CSS,JS和服务器端优化对前端开发工程师来说,前端性能优化的重要性是不言而喻的,...

  • Web前端优化

    一、Web前端优化最佳实践之 内容 尽量减少HTTP请求; 合并文件,比如把多个css文件合成一个;CSS Spr...

  • Web前端优化

    一、Web前端优化最佳实践之 内容 1. 尽量减少HTTP请求; 合并文件,比如把多个css文件合成一个;CSS ...

  • web前端优化

    因为别人的推荐,所以看了《高性能网站建设指南》,之前一直想好好做个总结,但是拖延症有点严重,过两天可能会有一个转正...

  • web前端优化

    一、减少http请求 ①雪碧图②捆绑文件:将多个脚本文件、样式表文件捆绑成一个文件,以此来减少文件下载速度③inl...

  • web前端优化

    1.使用CDN加速,2.静态资源的压缩合并,3.减少HTTP请求,4.尽可能的减少DOM操作,5.由于浏览器渲染机...

网友评论

      本文标题:web前端优化

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