前端优化

前言 基本HTML加载，需要 20ms 左右 Nginx配置，关闭 keepalive、etag、gzip、if_modified_since 协议：HTTP/1.1 浏览器：Chrome 减少HTTP请求 加载未合并外部css，需要 35ms 左右 加载合并外部css，需要 25ms 左右 两个合并后的css，加载减少了10ms，如果将页面所有的css、js、图片（CSS sprites ）合并，减少的时间将很可观。 DOM以及CSS 上图是浏览器解析HTML和渲染树之间的流程。浏览器在获取到HTML页面后开始解析页面，解析到head标签后，发现外部CSS，会异步发出请求，CSS获取后，解析CSS。 HTML解析后生成DOM Tree，CSS解析后生成CSSOM Tree， 两者结合开始渲染树。 1、首屏的页面要快速的渲染出来，CSS最好放在页面头部。同时有多个css文件的时候，也要将基本样式放在其他样式之前加载（边获取边渲染）。 2、HTML以及CSS的元素层级要尽量少,加快页面渲染。 3、对于首页，可以将基本样式内联放在头部。（快速渲染，灵活应用） JS 上图是浏览器解析流程，蓝色是样式解析，黄色是JS脚本执行，顺序执行。JS脚本执行会阻塞样式或DOM解析 1、JS脚本放在页面下面，防止阻塞页面渲染。 2、不要在JS里执行长时间的程序。 3、减少JS对DOM的操作

前端项目优化01 1. webpack-bundle-analyzer 文件打包模块可视化插件 该插件主要用于分析项目打包后的文件体积大小， 2. compression-webpack-plugin js文件gzip压缩插件 该插件主要是用gzip算法来进一步压缩js文件（压缩空间≈70&） 现有项目配置： package.json // 新增两个依赖 " devDependencies ": { "compression-webpack-plugin": "1.1.12", // 压缩 "webpack-bundle-analyzer": "^3.3.2", // 可视化 } // 新增npm执行指令 " scripts ": { "build:gzip": "cross-env NODE_ENV=production GZIP=true webpack --progress --hide-modules", // 生产打包且初始化压缩环境变量 "analyzer": "cross-env NODE_ENV=production ANALYZER=true webpack --progress --hide-modules", // 生产打包且初始化可视化环境变量 } webpack.config.js 模块导入 ： var BundleAnalyzerPlugin =

1今天完成的工作 今天完成了一个前端的订单详情的页面。 然后就是继续进行软件课设实验报告的内容书写。 2明日计划 明天的计划是继续优化小程序，然后一边也写着实验报告，构思正文的结构和内容。 3今日小结 今天在写页面的时候发现比开始熟练很多了，速度也变快了，果然只有不停的实践才有最好的效果。还有在写实验报告的时候发现需要写的内容很多，尤其是正文需要详细说明。 来源：博客园 作者： dy99 链接：https://www.cnblogs.com/dydy9999/p/11487958.html

for(var i=0;i<5;i++) { var op = document.createElement("span"); var oText = document.createTextNode(i); op.appendChild(oText); document.body.appendChild(op); } 当然,你也可以建个新的节点,比如说div,先将oP添加到div上,然后再将div添加到body中.但这样要在body中多添加一个<div></div>.但文档碎片不会产生这种节点. var oDiv = document.createElement("div"); for(var i=0;i<10000;i++) { var op = document.createElement("span"); var oText = document.createTextNode(i); op.appendChild(oText); oDiv.appendChild(op); } document.body.appendChild(oDiv); 代码如下: //先创建文档碎片 var oFragmeng = document.createDocumentFragment(); for(var i=0;i<10000;i++) { var op = document

从输入 URL 到页面加载完成，完整的链路 http层面优化 DNS 解析: DNS 实现域名到IP的映射。通过域名访问站点，每次请求都要做DNS解析。目前每次DNS解析，通常在200ms以下。一般采用DNS Prefetch 一种DNS 预解析技术，当你浏览网页时，浏览器会在加载网页时对网页中的域名进行解析缓存，这样在你单击当前网页中的连接时就无需进行DNS的解析，减少用户等待时间，提高用户体验。 <link rel="dns-prefetch" href="www.baidu.com" /> 只有部分浏览器支持 TCP 连接： 采用http2.0，可以复用tcp通道，采用二进制格式而非文本格式，使用报头压缩，HTTP/2降低了开销，支持cache push 浏览器并发 基于端口跟线程切换开销，浏览器不可能无限的并发请求。chrome的并发为6，超过限制数目的请求就会被阻塞； 对于某些静态资源，图片等等，我们可以对其URL分散处理 ，不同的资源域名(部署在cdn上)。 http请求次数 减少http的请求次数，将多个请求合并成同一个，减少http的开销 webpack 充分利用webpack提供给我们的能力，利用DllPlugin与commonPlugins等插件对我们代码进行 优化，文件的分割与合并，公共代码的提取，长缓存等策略，webpack是个很好的东西，值得大家仔细研究

一、网页标题( title ) title 具有不可替代性，是我们的页内第一个重要标签，是搜索引擎了解网页的入口，和对网页主题归属的最佳判断点。 标题的长度：Google(70KB)，35个中文；Baidu(56KB)，28个中文 关键字分布：最先出现的词语权重越高 关键词频：主关键词出现3次，辅关键词出现1次 建议： 首页标题包含网站名(产品名)和网站介绍 二、网站说明(Description) 对于关键词的作用明显降低，但由于很多搜索引擎，仍然大量采用网页的MATA标签中描述部分作为搜索结构的“内容摘要”。 就是简要说明我们网站主要是做什么的。 注意要点： 1.描述中出现关键词，与正文内容相关，这部分内容是给人看的，所以要写详细，让人感兴趣，吸引用户 2。同样遵循简短原则，字符数含空格在内不要超过120个汉字 3.补充在title和keywords中未能充分表述的说明 4.用引文逗号　　关键词1，关键词2 <meta name="description" content="京东JD.COM-专业的综合网上购物商城，销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品，便捷、诚信的服务，为您提供愉悦的网上购物体验！"> 　　 三、 Keywords关键词 Keywords 是页面关键词，是搜索引擎关注点之一。Keywords应该限制在6

前言 虽然前端开发作为 GUI 开发的一种,但是存在其特殊性,前端的特殊性就在于“动态”二字，传统 GUI 开发，不管是桌面应用还是移动端应用都是需要预先下载的,只有先下载应用程序才会在本地操作系统运行,而前端不同,它是“动态增量”式的,我们的前端应用往往是实时加载执行的,并不需要预先下载,这就造成了一个问题,前端开发中往往最影响性能的不是什么计算或者渲染,而是加载速度,加载速度会直接影响用户体验和网站留存。 《Designing for Performance》 的作者 Lara Swanson 在2014年写过一篇文章 《Web性能即用户体验》 ，她在文中提到“网站页面的快速加载，能够建立用户对网站的信任，增加回访率，大部分的用户其实都期待页面能够在2秒内加载完成，而当超过3秒以后， 就会有接近40%的用户离开你的网站 ”。 值得一提的是,GUI 开发依然有一个共同的特殊之处,那就是 体验性能 ,体验性能并不指在绝对性能上的性能优化,而是回归用户体验这个根本目的,因为在 GUI 开发的领域,绝大多数情况下追求绝对意义上的性能是没有意义的. 比如一个动画本来就已经有 60 帧了,你通过一个吊炸天的算法优化到了 120 帧,这对于你的 KPI 毫无用处,因为这个优化本身没有意义,因为除了少数特异功能的异人,没有人能分得清 60 帧和 120 帧的区别,这对于用户的体验没有任何提升

前端项目优化01 1. webpack-bundle-analyzer 文件打包模块可视化插件 该插件主要用于分析项目打包后的文件体积大小， 2. compression-webpack-plugin js文件gzip压缩插件 该插件主要是用gzip算法来进一步压缩js文件（压缩空间≈70&） 现有项目配置： package.json // 新增两个依赖 " devDependencies ": { "compression-webpack-plugin": "1.1.12", // 压缩 "webpack-bundle-analyzer": "^3.3.2", // 可视化 } // 新增npm执行指令 " scripts ": { "build:gzip": "cross-env NODE_ENV=production GZIP=true webpack --progress --hide-modules", // 生产打包且初始化压缩环境变量 "analyzer": "cross-env NODE_ENV=production ANALYZER=true webpack --progress --hide-modules", // 生产打包且初始化可视化环境变量 } webpack.config.js 模块导入 ： var BundleAnalyzerPlugin =

作为一名前端工程师我们除了写得了编程修得了样式之外，我们需要注意的就是如何进行前端性能优化。 先说下前端性能优化的目的，我们从用户角度和服务商角度来说。 1.用户方面：优化能让页面加载更快，对用户的操作响应更及时，能够给用户提供更为友好的体验； 2.服务商方面：优化能够减少页面请求数，或者减少请求所占带宽，能够节省客观的资源 分析完优化目的，下面说说从什么途径进行优化或者说怎么进行优化？优化的方法有哪些？ 一、页面级别的优化 1.1 减少http请求数以及减少请求资源的大小 理由：一个完整的HTTP请求需经过以下几个流程：域名解析，DNS寻址 --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求，浏览器得到html代码 --> 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） --> 浏览器对页面进行渲染呈现给用户。整个流程除耗时成本不说若当下载资源过大时，页面加载如何能快？所以减少http请求数有助于提高页面加载速度。 方法： 1,.1.1、 尽量合并和压缩css和js文件。通过打包工具webpack和gulp 1.1.2、 尽量所使用的字体图标或者SVG图标来代替传统png图.因为字体图标或者SVG是矢量图， 　　 代码编写出来的，方大不会变形，而且渲染速度快 1.1.3、 减少DNS查找 1.1.4

摘要： 前端的性能对于Web应用的用户体验来说非常重要。不要以为你的Web应用的性能已经足够好了，其实还会有很多可以提升的地方。本文将介绍Google和雅虎关于前端优化的最佳实践以及工具，你可以逐一检验你的Web应用。 前端的性能对于一个Web应用来说非常重要，如果一个Web应用的页面加载速度非常快、对于用户的操作可以及时响应，那么产品的用户体验将会极大地提升。下图显示了页面加载速度对于用户体验的影响。 你的Web页面的速度是否已经足够快了？其实可能还有很多可以提升的地方。Google和雅虎也提出了一些Web应用的前端优化建议，并发布了一些工具，你可以逐一检验你的Web应用，以便达到更高的性能。 这些优化不仅仅可以给用户提供更好的体验，从开发者角度来说，进行优化还可以减少页面的请求数、降低请求所占的带宽、减少资源的浪费。 下面来看看Google和雅虎提供的Web页面优化最佳实践。 一、Google的Web优化最佳实践 1. 避免坏请求 有时页面中的HTML或CSS会向服务器请求一个不存在的资源，比如图片或HTML文件，这会造成浏览器与服务器之间过多的往返请求，类似于： 浏览器：“我需要这个图像。” 服务器：“我没有这个图像。” 浏览器：“你确定吗？这个文档说你有。” 服务器：“真的没有。” 如此一来，会降低页面的加载速度。因此，检查页面中的坏链接非常有必要，你可以通过