美文网首页
如何优化你的页面

如何优化你的页面

作者: 1263536889 | 来源:发表于2018-07-11 16:21 被阅读0次

一、提倡前端开发工程师在书写xhtml的时候做到结构语义化。

结构中主要包括了head和body两个部分,但是我们经常说的是结构语义化主要是body中的标签,但是我在这里还是简单的说一下head,head中其实包括了一些对于我们seo很有用的一些东西,比如title,Description,Keywords,这些东西在蜘蛛抓取的时候都是有帮助的,当然,还有其他的一些,我在此就不一一说明了,比如设置缓存等一些其他的信息。

那么body中的话,包括的标签就很多了,我觉得作为一个合格的前端开发人员你应该去熟悉他们,比如div,span,h,ul,ol,dl,p等等这类的标签的使用。应该非常合理,还有就是注意h标签的断层,及h1标签的使用,这些都是非常重要的。

同时在我们的结构中不要出现style和onclick这样的内联的样式和事件。希望大家能够注意结构与表现、行为的分离。

二、css,js文件数量及大小的优化

那么关于css、js的优化的话,一般情况下建议css和js采用外联式。但是如果你的页面内容比较多,设计师把整个效果做得比较花的话,恐怕css就非常多了,那么这种情况下,你一定要把你的css规划好,尽量的采用缩写,这样可以减少css文件的大小,那么对css做相应的规划也可以减少css的个数,减少http请求数,js同理。
三、背景图片数量及大小的优化
由于我们的背景图片数量比较多,这样的话,会给服务器带来影响,增加了http请求数,我们是否有一种好的解决办法呢?这个答案是肯定的,如果你是一个合格的前端开发,你应该清楚,在我们的css定义背景的时候,可以通过坐标来实现对背景进行定位的,既然如此,那么我们可以将这些背景合并起来,这样即可减少http请求数,同时,我们在背景整合的时候,也需要考虑图片质量,同时也需要考虑图片的大小.
你的背景图片保证不超过3个以上,你的css文件不超过2个,js文件不超过3个。而且良好的遵守web标准的一些规定,css放到head中,js文件放到</body>之前或者之后.
建议body中增加text-align:center
用 <link> 代替 @import
作为大型网站来说,首页使用内联式样式表,这样可以减少http请求数的同时,也可以防止裸奔。当然其他页面需要使用外联样式表,这样才可以方便维护。因为作为大型网站来说,他的首页访问量是非常的大的,所以。。

把样式表置于顶部
把脚本置于页面底部
避免使用 CSS 表达式(Expression)
使用外部 JavaScript 和 CSS
削减 JavaScript 和 CSS
用 <link> 代替 @import
避免使用滤镜
剔除重复脚本
减少DOM访问
开发智能事件处理程序

最好的方案就是按照 HTML 规范在文档 <head /> 内加载你的样式表。

对于拥有较大浏览量的首页来说,有一种技术可以平衡内置代码带来的 HTTP 请求减少与通过使用外部文件进行缓存带来的好处。其中一个就是在首页中内置 JavaScript 和 CSS ,但是在页面下载完成后动态下载外部文件,在子页面中使用到这些文件时,它们已经缓存到浏览器了。

Coockie:
减小Cookie体积
对于页面内容使用无coockie域名

图片:
优化图像
优化CSS Spirite
不要在HTML中缩放图像
favicon.ico要小而且可缓存

相关文章

  • 网站单页面优化的进阶之路(优化思维)

    针对于网站页面优化的细节,在前面已经讲了如何做好网站单页面的基础优化;如果你把单页面的细节优化都做到位,但依然没有...

  • 如何优化你的页面

    一、提倡前端开发工程师在书写xhtml的时候做到结构语义化。 结构中主要包括了head和body两个部分,但是我们...

  • 如何优化你的页面

    一、提倡前端开发工程师在书写xhtml的时候做到结构语义化。 结构中主要包括了head和body两个部分,但是我们...

  • 如何优化你的页面

    一、提倡前端开发工程师在书写xhtml的时候做到结构语义化。 结构中主要包括了head和body两个部分,但是我们...

  • App页面性能优化 -- Core Animation篇

    写在前面 什么时候需要考虑页面性能问题 如何进行页面性能评估 如何具体实施性能优化 PS: 任何提前优化都是魔鬼 ...

  • 性能、打包题目

    前端性能优化 页面DOM节点太多,会出现什么问题?如何优化? DOM太多会造成页面加载卡顿, 操作DOM节点 在外...

  • 沈洛:单页面优化教程

    单页面搜索引擎优化的工作是个精细的工作,单页面优化需要把优化工作做到极致。所以,单页面优化工作不光考察你的SEO技...

  • 前端性能初步优化

    性能优化有两个方向 优化页面渲染 减小页面体积,提升网络加载 优化页面渲染 对于优化页面渲染可以进行如下方案来进行...

  • 撩课-Web大前端每天5道面试题-Day25

    1.web前端开发,如何提高页面性能优化? 2.前端开发中,如何优化图像?图像格式的区别? 3.Vue的双向数据绑...

  • 撩课-Web大前端每天5道面试题-Day22

    1.web前端开发,如何提高页面性能优化? 2.前端开发中,如何优化图像?图像格式的区别? 3.Vue的双向数据绑...

网友评论

      本文标题:如何优化你的页面

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