博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端优化总结
阅读量:6150 次
发布时间:2019-06-21

本文共 1287 字,大约阅读时间需要 4 分钟。

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)使用
    来代替@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

转载于:https://www.cnblogs.com/wxcbg/p/11039872.html

你可能感兴趣的文章
查看端口,关闭端口
查看>>
代码托管平台简介
查看>>
linux:yum和apt-get的区别
查看>>
Sentinel 1.5.0 正式发布,引入 Reactive 支持
查看>>
数据库之MySQL
查看>>
2019/1/15 批量删除数据库相关数据
查看>>
数据类型的一些方法
查看>>
Mindjet MindManager 2019使用教程:
查看>>
游戏设计的基本构成要素有哪些?
查看>>
详解 CSS 绝对定位
查看>>
AOP
查看>>
我的友情链接
查看>>
NGUI Label Color Code
查看>>
.NET Core微服务之基于Polly+AspectCore实现熔断与降级机制
查看>>
vue组件开发练习--焦点图切换
查看>>
浅谈OSI七层模型
查看>>
Webpack 2 中一些常见的优化措施
查看>>
移动端响应式
查看>>
python实现牛顿法求解求解最小值(包括拟牛顿法)【最优化课程笔记】
查看>>
js中var、let、const的区别
查看>>