博问问题内容页面的前端优化

写前端优化的文章在博客园高手云集的地方有点班门弄斧的感觉，不过自己对有些地方的处理还是自我感觉良好，也的确看到了效果，好了，闲话少说，切入正题。

首先划分页面的重要区域，如图：

由上图可知，对于一个问题内容页面来说，用户进入页面首先想看到的是问题区域和答案区域，也就是说这两个区域对用户来说最重要，所以关键是怎样让页面上的其他资源不影响这两个区域的加载。这里的其他资源对博问的问题页面就是那些HTML编辑器的js，打开firebug分析如下：

从上图可以看出，这些JavaScript严重影响了页面的加载，所以为了不影响问题区域和答案区域的加载，我将编辑器的JavaScript放置在了紧挨着编辑器的上面，如图：

解决了上面的问题之后，还有一个问题就是Google广告的问题了，首先广告位置在右侧的顶部，这些广告是通过JavaScript加载的，因此这些JavaScript是肯定不能放在head中的，如果网速慢的话是很影响页面的加载的。如果放在左侧和右侧中间又影响了右侧的加载。但是广告又不能放在右侧最下部，如何解决呢：

先看下图：

主要是通过css设置postition完成改变div的位置

经过上面两个方面的优化以后页面的加载达到了自己想要的解决，当然可以优化的地方很多，我会继续学习，不断重构页面。

最后推荐一些链接：

如何提高网页的效率——提高网页效率的14条准则
     Quickly Configure or Disable ETags in IIS7 or IIS6
     Client Cache <clientCache>
     IIS7: How to quickly and easily optimize your website using GZip compression
     CSS之看穿绝对定位

如果你对前端感兴趣的话，可以考虑这本书：

转载于:https://www.cnblogs.com/dushouke/archive/2009/08/04/1539136.html

博问问题内容页面的前端优化相关推荐

WEB前端优化之内容篇
WEB前端优化之内容篇 Web前端优化过程中难免对相关的前台内容进行重新安排.其中主要的一些点如下: 1尽量减少 HTTP 请求 (Make Fewer HTTP Requests) 作为第一条,可能 ...
网站内容页面怎样优化？深度解析内容页面优化技巧
网站SEO优化,内容是基础.一个网站如果没有内容,谈再多的SEO优化技术都是空谈.网站内容可以是文字.图片或者是视频,但是我们知道,搜索引擎是比较喜欢图文结合的内容,所以,讯阅网xuuyue.com在 ...
161026、更快速将你的页面展示给用户[前端优化篇]
现在许多公司往往注重后端优化,而忽略了前端优化想想如果辛苦优化了服务器,后台,排查了sql,却在最后页面加载展示的时候很慢,也得不偿失其实,前后台优化都是相辅相成的,后台优化好了,响应请求速度快, ...
[转] Web前端优化之内容篇
原文网址: http://lunax.info/archives/3090.html Yahoo! 的 Exceptional Performance team 在 Web 前端方面作出了卓越的贡献. ...
Web前端优化最佳实践及工具集锦(如减少页面加载时间)
前端的性能对于一个Web应用来说非常重要,如果一个Web应用的页面加载速度非常快.对于用户的操作可以及时响应,那么产品的用户体验将会极大地提升.下图显示了页面加载速度对于用户体验的影响. 你的Web页 ...
前端项目 - 博客系统(纯页面)
预览效果 1. 实现博客列表页导航栏 common.css blog_list.html blog_list.css 2. 实现博客正文页 blog_detail.html blog_detail. ...
06_前端优化系列之一_DNS预获取dns-prefetch提升页面载入速度
title: 前端优化系列之一:DNS预获取 dns-prefetch 提升页面载入速度 urlname: 06_前端优化系列之一_DNS预获取dns-prefetch提升页面载入速度 date: 2 ...
前端优化系列之DNS预获取 dns-prefetch 提升页面载入速度
前端优化系列之一:DNS预获取 dns-prefetch 提升页面载入速度 DNS Prefetch,即DNS预获取,是前端优化的一部分.一般来说,在前端优化中与 DNS 有关的有两点: 一个是减少D ...
前端优化系列:DNS预获取 dns-prefetch 提升页面载入速度
DNS Prefetch,即DNS预获取,是前端优化的一部分.一般来说,在前端优化中与 DNS 有关的有两点: 一个是减少DNS的请求次数,另一个就是进行DNS预获取 . DNS 作为互联网的基础协议 ...

博问问题内容页面的前端优化

博问问题内容页面的前端优化相关推荐

最新文章

热门文章