前端优化总结(代码片段)

wxcbg wxcbg     2022-12-20     152

关键词:

web前端是应用服务器处理之前的部分,前端主要包括:HTML,CSS,javascript,image等各种资源,针对不同的资源有不同的优化方式。

  • 内容优化

    (1)减少HTTP请求数:这条策略是最重要最有效的,因为一个完整的请求要经过DNS寻址,与服务器建立连接,发送数据,等待服务器响应,接收数据这样一个消耗时间成本和资源成本的复杂的过程。常见方法:合并多个CSS文件和js文件,利用CSS Sprites整合图像,Inline Images(使用 data:URL scheme在实际的页面嵌入图像数据 ),合理设置HTTP缓存等。
    (2)减少DNS查找
    (3)避免重定向
    (4)使用Ajax缓存
    (5)延迟加载组件,预加载组件
    (6)减少DOM元素数量:页面中存在大量DOM元素,会导致javascript遍历DOM的效率变慢。
    (7)最小化iframe的数量:iframes 提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。但其创建速度比其他包括JavaScript和CSS的DOM元素的创建慢了1-2个数量级。
    (8)避免404:HTTP请求时间消耗是很大的,因此使用HTTP请求来获得一个没有用处的响应(例如404没有找到页面)是完全没有必要的,它只会降低用户体验而不会有一点好处。
  • 服务器优化

    (1)使用内容分发网络(CDN):把网站内容分散到多个、处于不同地域位置的服务器上可以加快下载速度。
    (2)GZIP压缩
    (3)设置ETag:ETags(Entity tags,实体标签)是web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制。
    (4)提前刷新缓冲区
    (5)对Ajax请求使用GET方法
    (6)避免空的图像src
  • Cookie优化

    (1)减小Cookie大小
    (2)针对Web组件使用域名无关的Cookie
  • CSS优化

    (1)将CSS代码放在HTML页面的顶部
    (2)避免使用CSS表达式
    (3)使用<link>来代替@import
    (4)避免使用Filters
  • javascript优化

    (1)将JavaScript脚本放在页面的底部。
    (2)将JavaScript和CSS作为外部文件来引用:在实际应用中使用外部文件可以提高页面速度,因为JavaScript和CSS文件都能在浏览器中产生缓存。
    (3)缩小JavaScript和CSS
    (4)删除重复的脚本
    (5)最小化DOM的访问:使用JavaScript访问DOM元素比较慢。
    (6)开发智能的事件处理程序
    (7)javascript代码注意:谨慎使用with,避免使用eval Function函数,减少作用域链查找。
  • 图像优化

    (1)优化图片大小
    (2)通过CSS Sprites优化图片
    (3)不要在HTML中使用缩放图片
    (4)favicon.ico要小而且可缓存
    

    本文仅用来记录自己在学习中的总结,来源:https://segmentfault.com/a/1190000008829958

前端性能优化(代码片段)

gitbook完整版集合文章目录gitbook完整版集合性能优化初始阶段(加载优化)首页加载优化1、首页加载图片过多1、总结:2、首页请求过多2、总结(首页请求量过多,可以通过一些手段来减少资源的请求量)... 查看详情

前端项目性能优化记录~(代码片段)

前端性能优化总结原因:最近公司一个项目即将上线,作为它的主要构建者之一(亲爸爸)一直在思考如何能给它更好的性能优化于是博主开始了网上大量的学习,集百家之所长,试图把这些骚操作应用在自己的项目中,完事之后记... 查看详情

打个总结:web性能优化(代码片段)

...逐一对其进行优化。根据资源请求的不同,大致可以分为前端资源性能和后端程序性能两个方面。先分析一下前端资源吧:Deferoffscreenimages。Chrome给出的建议是:Considerlazy-loadingoffscreenandh 查看详情

前端seo优化详细方案(代码片段)

前言:在好久之前就总结过一个版本的搜索引擎优化,但是那时只是很肤浅的做一些meta中的,description,keywords,以及一些简单的语义化标签,并没有在谷歌搜索引擎中心搜索到自己的网站,这次更新才是真正的做到... 查看详情

前端总结--性能优化(代码片段)

...析的结果展示给用户1.2性能优化思维导图2.网络篇(http)2.1前端能做的网络优化输入URL到显示页面这个过程中,涉及到网络层面的,有三个主要过程:DNS解析TCP连接HTTP请求/响应对于DNS解析和TCP连接两个步骤,我们前端可以做的努... 查看详情

api接口性能优化总结(代码片段)

...还需要掌握一些常用的手段,避免写出慢的接口。从前端发起调用到后端一般经过网关层、应用层、存储层。每一层都可以优化,本篇文章主要是应用层优化。常见性能优化思路从理论上分析,性能优化手段通常有批... 查看详情

api接口性能优化总结(代码片段)

...还需要掌握一些常用的手段,避免写出慢的接口。从前端发起调用到后端一般经过网关层、应用层、存储层。每一层都可以优化,本篇文章主要是应用层优化。常见性能优化思路从理论上分析,性能优化手段通常有批... 查看详情

你知道的前端优化手段(代码片段)

...0c;也是每个工程师心中永远在撩拨的刺。总结一下常用的前端性能优化的方法,希望对大家有些帮助~。性能可能带来的影响(贩卖焦虑警告❗️)试想当你做的酷炫特效因为慢了0.1秒就少被一个人看到时的落寞(ㄒoㄒ)& 查看详情

scrum项目冲刺_day10会议总结(代码片段)

今日团队任务:图片转excel(5天)(已完成)优化前端,统一风格优化接口调用的servlet为数据库优化     任烁玚       图片转html(8天)  (已完成)前端开发(需团队风格统一)图... 查看详情

markdown代码优化总结(代码片段)

查看详情

phpwordpress前端优化(代码片段)

查看详情

text前端总结(代码片段)

查看详情

前端性能优化(代码片段)

前言性能优化,一直作为前端的一个热点问题,作为一个优秀的前端开发人员,性能优化时必备技能。本文将从减少http请求次数、减少单次请求资源大小、渲染优化、资源加载优化等四个大方向,下分诸多小方向,全面总结常... 查看详情

前端性能优化:桌面浏览器前端优化策略(代码片段)

摘要:前端性能优化是一个很宽泛的概念,本书前面的部分也多多少少提到一些前端优化方法,这也是我们一直在关注的一件重要事情。配合各种方式、手段、辅助系统,前端优化的最终目的都是提升用户体验,改善页面性能,... 查看详情

前端性能的优化总结

前端性能优化可以分为两大类分别是页面级别优化包含了http请求数以及内联脚本位置优化,代码级别的优化包含DOM操作优化,CSS选择符优化以及图片优化等前端里面包含的内容是丰富的,它包括HTML,CSS以及JS和图片等各种各样... 查看详情

mysql优化总结(代码片段)

从三种角度优化:表的设计,sql优化,索引优化。一、表的设计规约(来自阿里)1、  1.对查询进行优化,要尽量避免全表扫描,首先应考虑在where及orderby涉及的列上建立索引。2.应尽量避免在where子句中对字段进行null值... 查看详情

web前端:html最强总结附详细代码(代码片段)

Web前端基础:Web前端:HTML最强总结附详细代码Web前端:CSS最强总结附详细代码Web前端:JavaScript最强总结附详细代码Web前端工具:Web前端:JQuery最强总结(附上详细代码)Web前端:Bootstrap最强总... 查看详情

sqlhive优化配置项(含建表属性)总结(代码片段)

查看详情