浅谈前端优化的那些事

前端优化方面的一些事情,也算是老生常谈了,不论是开发er 面试中,或者是实际项目中,都是应该掌握的,本文将就作者本身所知晓的一些地方来和大家谈谈前端优化的几个点,如有错漏,辛苦补充与修改。

前端优化是一个庞大的体系工程,代码、服务、部署服务器硬件、cdn、等等多个方面,本次涉及方面主要以用户感知为中心,重点为用户体验方面

\color{red}{ps: 代码层次的性能优化(dom缓存、css滤镜、js懒加载、eval、模块打包等),有必要的话,可以另开一文细讲}

话不多说,直接正题

\color{#3296FA}{一、代码层次}

先从代码层级切入、更容易切身体会到

文档声明<!DOCTYPE>

HTML 4.01 基于 SGML,<!DOCTYPE> 声明引用 DTD,DTD 规定了标记语言的规则,所以正确的声明才能让浏览器正确地呈现内容

样式前置,脚本后置

  根据浏览器的渲染流程,样式的前置在于使dom展现的时候有自身应有的样式,避免因dom先渲染样式后加载导致的 “页面闪烁” 问题。

  同理脚本后置更能使用户更快的获得界面体验,从而避免了JavaScript的问题阻塞页面的渲染

样式/脚本文件压缩

  文件压缩去除多余空格、精简变量等操作能够显著的减少你文件的体积、达到更快的在协议上(第二点讲)传输

骨架图

  骨架图的出现,更好的提升了用户体验,从而使用户加载页面时白屏的时间得到缩减,同时能大体的看出网站的布局,体验上更加接近app
  需注意骨架图本身也是一种资源,合理的在需要的地方使用骨架图也是你需要考虑的地方

\color{#3296FA}{二、协议层次}

请求优化等等主要表现在如何更快速的拿到所需要的代码
以下已目前常使用的1.1和1.0版本为背景

代码合并、注释去除

  通常项目中我们书写代码均是以格式化的形式进行书写,一方面提升了可阅读性,也同时更方便了开发,但是当面对用户时,多余的回车、空格等都会增加脚本或样式文件的大小,此时我们应该在构建时去除多余的字符,并精简方法名等,达到缩小文件体积,更快的在网络中传输的目的。

规范协议类型

  目前我们常用的类型主要集中在GET、POST、PUT、DELETE中。合理的使用协议的对应类型很有必要、GET,POST举例来说,GET的效率会略高于POST,产生影响的点在于POST会比GET多封装一个包,但是就目前的硬件配置来说,此项可以忽略,传输速率基本上相同,更多的区别体现在安全性上,涉及一些需要隐藏的信息,或增删改操作,一般情况下使用POST,在做简单数据查询展示时,可直接使用GET。此项更多偏向于开发代码层次,不做深入,如有必要,再说~

合理使用协议缓存

  缓存是前端常见的一个优化点,合理的使用缓存是目前项目中必须的一个点。
  这里我大概提两个点,一个是server端缓存,另一个是浏览器缓存。
  server端缓存静态资源更多的是通过nginx等来实现静态资源快速获取,在指定时间内将会通过确认是否过期,如果过期才会重新获取资源,这里简单的再提一下,判断是否有缓存主要通过协议ETag字符串信息的对比,和Last-Modified最后一次修改时间的对比来确定。
  浏览器缓存就是常见的304,加载页面浏览器会首先查看当前文件是否缓存如果会那么请求中只包含head信息并无body。否则重新拉取
缓存字段cache-control、pragma、IF-match/IF-no-match、IF-modified-since等等字段请自行深入

正确使用cdn

  再次之前我们需要简单了解一下cdn
  cd的大概组成可以理解为dns服务器和负载均衡设备以及多个节点组成的网络体系,各个点中还设计到更加复杂的负载均衡算法,高性能Cache磁盘等自行了解
  CND又是如何工作的呢,首先用户一条正常的请求通过dns解析后发送到对应的运营商,运营商在给出目标服务器的ip,此时目标服务器就是cdn自己的dns,他将通过分析用户的ip的出地区和想要的url资源发送至当前区域内的负载均衡设备上,在通过算法得出当前地区内所有节点压力最小相应最快的节点返回给用户想要的资源,此时本身在做自己的缓存策略

可以看到,合理的使用CND能够有效地解决不同地区节点相差甚远导致的网络传输问题,同时自身也有成熟的缓存解决方案。

先写到这里吧,脑子里太多要优化的地方了,每一个点都又能详细的展开介绍,受限于文笔,无法将自身的思路合理的表达出来。有问题请私信

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,377评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,390评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,967评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,344评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,441评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,492评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,497评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,274评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,732评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,008评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,184评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,837评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,520评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,156评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,407评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,056评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,074评论 2 352

推荐阅读更多精彩内容