当我们在浏览器地址栏中输入一个URL的时候,网页开始请求,我们在页面上看到的内容就是许多个HTTP请求从服务器返回的数据展示,这些展示的快慢很大程度依赖前端的优化,怎样做好前端的优化,我这里总结了几点:

一  减少HTTP请求,重复使用LINK

1  合并CSS JS文件

2  background 使用一个图

二  页面压缩,包括CSS JS 图片等

三  尽量使用浏览器缓存,设置过期时间

四  压缩组件,发送给客户端的数据经过gzip压缩,减少带宽

五  预加载,比如:图片 JS  css等

六  脚本位置,JS放在底部,CSS放在头部

七  合并静态文件,2~3个域名分组,减轻单个服务压力

web优化(一 前端)的更多相关文章

  1. 腾讯Web工程师的前端书单

    2014年一月以来,自己接触web前端开发已经两年多了,记录一下自己前端学习路上看过的,以及道听途说的一些书,基本上按照由浅入深来介绍. JavaScript 入门 <JavaScript权威指 ...

  2. web优化及web安全攻防学习总结

    web优化 前端:(高性能网站建设进阶指南) 使用gzip压缩(节省服务器的 网络带宽) 减少http请求( 减少DNS请求所耗费的时间. 减少服务器压力. 减少http请求头) 使用cdn(用户可以 ...

  3. Java Web 高性能开发,前端的高性能

    Java Web 高性能开发,第 2 部分: 前端的高性能 Web 发展的速度让许多人叹为观止,层出不穷的组件.技术,只需要合理的组合.恰当的设置,就可以让 Web 程序性能不断飞跃.Web 的思想是 ...

  4. Web优化躬行记(1)——CSS

    Web优化的对象包括页面性能.用户体验.开发效率.代码优化.网络延迟等,本系列会列举出众多常用的优化技巧,每个技巧都可深入分析,在此只做抛砖引玉. 本系列优化内容提炼于<前端面试宝典>.& ...

  5. 推荐一份Web 工程师的前端书单

    014年一月以来,自己接触web前端开发已经两年多了,记录一下自己前端学习路上看过的,以及道听途说的一些书,基本上按照由浅入深来介绍. JavaScript 入门 <JavaScript权威指南 ...

  6. 购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端,以及前后端Session

    原文:购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端,以及前后端Session chsakell分享了前端使用AngularJS,后端使用ASP.NE ...

  7. web设计师和前端设计师的互动—前端工程师应该具备的三种思维

    如果你是一个天才工程师(马上可以离开),可以独立完成一个很多事情,你可以是一个怪咖,因为我相信没有一个人不会不佩服你.但现实归现实,多数人都不是天才,而我们在职场上也不是单打独斗,我们需要团队合作,需 ...

  8. 转:Web优化 及常用工具包

    Web优化: 减少http请求 避免404错误 在html页面header加入缓存标签 Gzip压缩网页 减少cookie体积 使用外部的js和css 消减js和css 压缩js 使用css spri ...

  9. .NET-架构优化实战-前端优化

    原文:.NET-架构优化实战-前端优化 前言 上一篇<.NET-架构优化实战-梳理篇>整理了基本的业务知识,同时也罗列了存在的问题,本篇主要是针对任务列表的页面进行性能优化. 该篇主要涉及 ...

  10. 从web现状谈及前端性能优化

    从web现状谈及性能优化 原文出处:<Karolina Szczur: The State of the Web> 性能优化指南The Internet is growing expone ...

随机推荐

  1. redis解决方案之三种集群模式的概念与部署

    上篇文章为大家总结了redis命令并讲述了持久化,今天我们来看一下redis的三种集群模式:主从复制,哨兵集群,Cluster集群 本篇文章先介绍redis-cluster集群模式,然后再依次介绍它的 ...

  2. Bugku-CTF之你从哪里来

    Day 27 你从哪里来 http://123.206.87.240:9009/from.php 本题要点: http referer头的修改     查看源码什么也没有   抓个包看一下

  3. Googletest Primer

    Googletest Primer 原文地址:https://github.com/google/googletest/blob/master/googletest/docs/primer.md In ...

  4. JAVA中对null进行强制类型转换

    今天很好奇,对null进行强转会不会抛错.做了如下测试得到的结果是,如果把null强转给对象,是不会抛异常的,本身对象是可以为null的.但是如果是基本类型,比如 int i = (Integer)o ...

  5. 【Python】爬虫原理

    前言 简单来说互联网是由一个个站点和网络设备组成的大网,我们通过浏览器访问站点,站点把HTML.JS.CSS代码返回给浏览器,这些代码经过浏览器解析.渲染,将丰富多彩的网页呈现我们眼前: 一.爬虫是什 ...

  6. blog主题——樱花

    贮存一下,blog代码 QAQ 页脚html <!--live2d--> <script src="https://blog-static.cnblogs.com/file ...

  7. SniperOJ-as fast as you can-Writeup

    SniperOJ-as fast as you can-Writeup 题目描述: 打开所给的题目地址 很容易可以看出这是一个简单的爬虫问题,爬去网页的信息并post,但在界面及网页源码中均没发现有价 ...

  8. 读写json文件

    def read_json(path): """return dict""" with open(path,'r+')as f: retur ...

  9. 空指针异常与Optional类

    一.什么是空指针异常 当程序需要对象实例的时候返回null就会抛出空指针异常(NullPointerException,简称NPE).包括以下情况: 调用一个null对象实例的方法 访问或修饰null ...

  10. 猴博士4小时讲完C语言视频教程

    猴博士4小时讲完C语言视频教程,一共有9节课. 目录结构如下: 目录:/2020030-猴博士4小时讲完C语言 [1G] ┣━━1.C语言基本语句(上)(更多资源访问:www.jimeng365.cn ...