web页面重构和前端性能优化

访客4年前黑客文章895

网站重构:

在不改变外部行为的前提下,简化结构、添加可读性,而在网站前端保持一致的行为。 也就是说是在不改变UI的情况下,对网站举行优化,在扩展的同时保持一致的UI。 


对于传统的网站来说重构通常是: 

表格(table)结构改为DIV+CSS 
使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有用的) 
对于移动平台的优化 
针对于SEO举行优化 
深层次的网站重构应该思量的方面 
削减代码间的耦合 
让代码保持弹性 严酷按规范编写代码 
设计可扩展的API 
取代旧有的框架、语言(如VB) 
增强用户体验 
通常来说对于速率的优化也包含在重构中 
压缩 *** 、CSS、image等前端资源(通常是由服务器来解决) 
程序的性能优化(如数据读写) 
接纳CDN来加速资源加载 
对于 *** DOM的优化 
HTTP服务器的文件缓存 


你有用过哪些前端性能优化的方式?

   (1) 削减http请求次数:CSS Sprites, *** 、CSS源码压缩、图片大小控制合适;网页Gzip,CDN托管,data缓存 ,图片服务器。 

 (2) 前端模板 *** +数据,削减由于HTML标签导致的带宽虚耗,前端用变量保留AJAX请求效果,每次操作内陆变量,不用请求,削减请求次数 

 (3) 用innerHTML取代DOM操作,削减DOM操作次数,优化javascript性能。 

 (4) 当需要设置的样式很多时设置className而不是直接操作style。 

 (5) 少用全局变量、缓存DOM节点查找的效果。削减IO读取操作。 

 (6) 制止使用CSS Expression(css表达式)又称Dynamic properties(动态属性)。

 (7) 图片预加载,将样式表放在顶部,将剧本放在底部 加上时间戳。 

 (8) 制止在页面的主体结构中使用table,table要等其中的内容完全下载之后才会显示出来,显示比div+css结构慢。 对通俗的网站有一个统一的思绪,就是只管向前端优化、削减数据库操作、削减磁盘IO。向前端优化指的是,在不影响功效和体验的情况下,能在浏览器执行的不要在服务端执行,能在缓存服务器上直接返回的不要到应用服务器,程序能直接取得的效果不要到外部取得,本机内能取得的数据不要到远程取,内存能取到的不要到磁盘取,缓存中有的不要去数据库查询。削减数据库操作指削减更新次数、缓存效果削减查询次数、将数据库执行的操作尽可能的让你的程序完成(例如join查询),削减磁盘IO指只管不使用文件系统作为缓存、削减读写文件次数等。程序优化永远要优化慢的部门,换语言是无法“优化”的。


思源资源网:分类流动

1.阿里云: 本站现在使用的是阿里云主机,平安/可靠/稳固。点击领取2000米代金券、领会最新阿里云产物的种种优惠流动点击进入

返回列表

上一篇:notice.js

下一篇:CoffeeScript

相关文章

精准找客户的黑客app(找黑客软件)

精准找客户的黑客app(找黑客软件)

本文导读目录: 1、找客户软件大家现在都用什么的? 2、找客户的软件? 3、什么软件可以找客户资源? 4、有没有好的找客户软件? 5、有什么朋友圈精准抓客系统,能够快速锁定和跟进目标客...

剑与远征五一劳动节兑换码最新 五一劳动节兑换码介绍一览

剑与远征五一劳动节兑换码最新 五一劳动节兑换码介绍一览

剑与远征五一劳动节兑换码是什么?五一劳动节兑换码介绍一览。新的月份怎么能够没有新的兑换码呢,不少玩家都想知道剑与远征五一有什么兑换码?下面apk8小编为玩家们带来了五一劳动节兑换码兑换详情一览,快点进...

黑客帝国命运(黑客帝国世界真相)

黑客帝国命运(黑客帝国世界真相)

本文目录一览: 1、《黑客帝国》中,为什么尼奥中枪还活了? 2、你没看懂的《黑客帝国4》:一部代表觉醒和自由的生命启示 3、《黑客帝国》中史密斯说什么是一个圈套呢? 4、黑客帝国的剧情...

塔罗牌怎么玩图解(78张塔罗牌占卜的玩法)

塔罗牌怎么玩图解(78张塔罗牌占卜的玩法)

目前世界上有各种不同类型的塔罗牌,所使用的占卜仪式和禁忌都是不同的,如果您发现自己使用的占卜方法和小编有所不同,也是正常的哦。 准备好一副塔罗牌。小编使用的是命运塔罗牌。如果你相信塔罗牌的力量,...

黑客蛋,可以找黑客帮忙盗回qq吗,黑客网站 手机定位

1.3进程保活计划介绍 26 VPN维护不充分。 在测验的ATM中,一切的软件和硬件VPN计划都没有敞开。 假如VPN客户端在ATM之外,或进犯者能够拜访ATM cabinet,那么进犯者就能够装置在...

注册安全工程师报考条件(注册安全工程师考试科目)

  注册安全工程师报考标准(注册安全技术工程师考试内容)百思特我带大伙儿去了解一下      注册安全工程师报考标准(注册安全技术工程师考试内容)   一、组织架构:   人力资源管理社保部、我国安全...