web前端优化之内容优化

前端内容优化主要有以下几条:

1.尽量减少http请求

  (1)合并文件,把多个css文件合并在一起;

  (2)css Sprites,把css相关的background元素进行背景图绝对定位;

  (3)图像地图;

  (4)使用data:URL scheme在实际的页面嵌入图像数据;

2.减少DNS(Domain Name System,域名系统)查找

  DNS查找开销是很大的。对于国内站点来说,过多的使用站外的widget很容易引起更多的DNS查找问题。

3.尽量减少重定向

4.使得ajax可缓存

  ajax的响应时间对于用户的体验是个至关重要的问题,提高响应时间的有效手段就是cache。

5.延迟载入组件

6.预加载组件

7.减少DOM元素数量

8.切分组件到多个域

  主要是提高页面的并行下载能力,不要跨域名太多,否则和第二条冲突。

9.最小化iframe数量

  iframe是SEO大忌,对于前端来说,有利有弊。

10.杜绝http 404错误

  

时间: 2024-10-06 10:01:17

web前端优化之内容优化的相关文章

9/23百度web前端开发一面内容

[9/23百度web前端开发一面内容]左定宽  右自适应iframe选择元素arr.reverse  arr浏览器兼容 IE 如何hackpng类型Spritecss选择器优先级  内联 import哪个高垂直居中 文字 和块级元素appcache manifest无法更新 长尾问题性能优化apply call 区别ajax实现 状态码html加载 repaint reflowli换行导致空白问题

关于web前端开发过程中SEO优化的注意点

SEO优化通俗点说就是为了让网站在各大搜索引擎中更容易的被搜到,即提高搜索排行,从而提高网站流量的一个技术手段 在写web页面的时候,为了让网络爬虫更容易的搜索到页面,需要注意几个点: html语义化 刚接触web前端开发的时候很奇怪,既然html标签可以通过css进行更改它的内置属性,为什么还有这么多的标签存在 <div>,<h1>,<span>,<strong>.... 而现在,随着对前端的不断深入,才逐渐明白它的用处 语义化的html可以让开发者更容易

web前端9大性能优化方案汇总

网页的性能问题是产品开发过程中的一个重要的环节,在产品成功地把功能实现后,性能能好与坏就直接影响了用户体验,以至于影响了产品的成败! 作为web前端开发者,对前端部分进行性能上的优化,是责无旁贷,刻不容缓的工作.下面简介一下9种性能优化方案. 一.罪魁祸首是http请求 一般网页,80%的响应时间花在下载网页内容(images, stylesheets, javascripts, scripts, flash等).减少请求次数是缩短响应时间的关键!可以通过简化页面设计来减少请求次数,但页面内容较

【Web前端】jQuery界面优化

随着互联网的发展,网站的前端界面会越来越重要,它关注的是用户的直接体验.市场上同类型的网站越来越多,一个比其他同类网站更流畅.优雅的界面能让用户摈弃你的竞争对手.所以,让自己的网站前端运行的更快.界面更优美成为了一个重要的话题.从而,前端界面优化技术也成为了优秀前端开发人员必备的技能,这是核心竞争力. 今天介绍的是jQuery这个流行的前端javascript开发框架里的一些优化技术,这些优化技术需要我们深入理解JavaScript以及Web浏览器中DOM与JavaScript引擎关系. 减少D

web前端之网站seo优化学习笔记

这两天因为一些公司业务上的原因,学习了一些关于网站seo优化的方法和技巧. 之前在码代码的过程中其实还没有考虑过对于网站导流和优化网站关键字搜索排名的问题. 在了解了一些这方面的资料之后,觉得这是一个很有意思的领域.把这几天的学习笔记记下来. 个人理解是在一个项目基本上完成主要需求后需要运营需求加入的时候,此时seo优化就非常重要.所以在网站开发的最开始有经验的前端coder们在搭架子的时候就应该提前把以后运营汪们可能会提出的运营需求,特别是一些针对影响关键字排名和与搜索引擎相关的部分就可以考虑

全方位分析web前端如何进行性能优化

前言: 最近刚刚完成项目,空闲一段时间,想起之前有被问起怎么对前端进行性能优化,自己也是脑中零零散散的总不成体系,现特来总结,欢迎补充指教. 1.整体资源 (1)js.css源码压缩 (2)css文件放到文档顶部,js 文件放到文档底部 因为浏览器渲染网页是自上而下的,用户第一眼见到的是页面,先加载页面相关的提高页面加载速度,另外避免js在页面没有完全加载完成操作DOM带来错误 (3)进行CDN托管(具体可参看https://div.io/topic/930) (4)data缓存 2.css (

web前端读取文本文件内容

html5+js实现,参照xxyy888的CSDN博客文章<使用HTML+javascrpt读取txt文本文件>失败,将作者文章中的代码重新整理了下依然不行,文章代码存在的问题是括号错误,基本上都是弄成了全角字符,整理后的代码如下, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona

web前端课程技术内容之如何做一个简单的手机端页面的翻页

[如何做一个简单的手机端页面的翻页] 第一步:创建移动端页面内 HTML + CSS [注]可用弹性布局 但需要注意的是 外层盒子的定位 第二步: 思考问题 要实现怎样的效果? 1. 手指滑动时触发事件[左右]两个方向 2.点击footer部分的下标实现切换效果 3.点击footer部分的下标实现下标颜色变化 第三步:编写JS代码 添加监听事件 document.addEventListener('DOMContentLoaded',function(){ 创建一个数组用于调用数组属性值 或者

web前端性能

由于web前端性能测试包含的知识点很多:浏览器工作原理.浏览器缓存.相关的http头信息.http状态码.完整的一个http请求及响应过程.响应时间.web前端性能测试工具以及优化方法等等,所以决定分两篇文章来总结,这一篇主要介绍一些跟web前端性能有关的一些概念,最近也在收集阅读相关文档,一边学习一边理解消化一边总结,有什么不对的希望指出. 浏览器的主要构成: 1>.用户界面 - 包括地址栏.后退/前进按钮.书签目录等,也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分. 2>.