高效web前端开发  book

PageSpeed  出自google公司  是一款  免费的工具  性能分析

Timeline网页交互  和渲染  所要花费的时间

Profile谁  可以查看网页cpu以及内存占有的情况报告

Audits  中提供了各种资源及配置的优化建议和未使用的css规则的列表

代码的压缩

文本服务器开启Gzip压缩。

UglifyJs  不仅仅是一个压缩工具，同事具有JS语法分析和代码美化工能

图片压缩工具  以在线工具居多  TinyPNG  压缩  PNG格式图片。

使用  JPEGmini   压缩   JPG格式图片

本地应用程序  推荐使用  ImageOptim

发布阶段  也可以用  ANT来构建  代码 和 资源压缩的任务。

id   用 _   连接   class  用  -  连接。

css文件  头部 也可以写上注释   还有就是  解释性说明

文件 版本  版权信息  作者等

js注释

局部变量 采用首字符小写  其他单词首字母大写的方式

面向对象   私有接口小写  公有接口大写。

给jquery  变量 前面加上  $前缀

验证页面大麦

HTML Validator自动纠正  和美化代码

更好的语义化

用<del>  代替  <s>  <strike>

<abbr>表示的是一个缩写的  标签  内容缩写

<noscript>表示 没有 js的时候 使用的。替代方案  但是有的时候会无效

较好的做法是  不能使用javascript的时候  传值到服务器上 有服务期计算 返回

可以设置页面在禁用js的情况下 跳转网页  百度的做法是

<noscript><meta http-equiv = “refresh” content = “0; url=/baidu.html?from=noscript”/></noscript>

meta 的属性

name  元信息

http-equiv  指令请求

content

charset  字符编码

name  content  构成  名/值  对用于描述 网站信息

名称包括  application-name  author  description  generator

http-equiv属性  和content属性  组合，设置特定的HTTP指令

content-type   default-style(很少用) refresh  （前三个已经确定）content-language set-cookie

<meta http-equiv=”refresh” content =”300”>  5分钟后刷新

务必在 <title> 标签 之前 设置charset

可以手动设置一些页面的兼容模式  不是不标准  但是是常用的meta

<meta http-equiv=”x-UA-Compatible” content=”IE=8”/>   从ie8 开始支持

会在 IE9以及以下浏览器激活chrome frame 强制IE使用chrome frame 渲染页面

<meta http-equiv=”x-UA-Compatible” content=”chrome = 1”/>

是设备在移动设备中显示正常

<meta name=”viewport” content=”width = device-width,initial-scale = 1,maximum-scale = 1”>

IE 浏览器的固定网站的功能

<meta name=”misapplication-task” content=”name=”xinxianshi”;action-uri=http://www.renren.com/home;icon-uri=http://a.xnimg.cn/n/res/icons/newsfeed.ico” />

语义化标签

div  和 span 是没有语义化的

在css 中是可以用 content=“|”  来设置内容，而不必所有内容都放在html中

.spliter:before

:before 选择器在被选元素的内容前面插入内容。

请使用 content 属性来指定要插入的内容。

使用可以平稳退化 而且具有语义化的标签实现

<li class="reader-action-library">libarary</li>  又由于文字 不用显示

.reader-main-action li{

text-indent:-99999px;

}

没有禁用css时候不会显示文字 当禁用css 的时候 能够平稳显示

html 新加入的标签

<header>   <footer>  <article>  <section>  <nac>  <aside>

提高html  的  语义  重要属性  alt   title

上面的元素一个在左边 一个在右边  下面的元素要想不受上面的元素的影响

需要先清除浮动  clear：both；

text-indent    来达到影藏文字的目的

使用table  标签构建 登陆 表单  语义化 不明确 而且代码臃肿

最好用label  展现登录表单的文本标签

label  实现关联  用for  后面指向关联的 标签id  在单选框  和 多选框 有很大的  优点

<form>

<fieldset disabled>  //  表单分组 并且禁止输入

<legend>健康信息</legend>   // 标题信息

身高：<input type="text" />

体重：<input type="text" />

</fieldset>

</form>

tabindex 设置tab顺序切换

required = ‘true’ 即输入 不能为空

块元素可以包含其他元素

行内元素只能包含行内元素

html5  不必记住这些  更多的是语义化的记忆

html5 <meta charset=”UTF-8”>  //表示的是定义页面编码

在HTML4.01 中<meta http-equiv=”content-Type” content = “text/html;chars=utf-8”>

变得更为简洁方便

html5 引入css样式表

<link rel=”stylesheet” href=”/cssdafda”>  //都不用再次设定type=“text/css”

引入js

<strcipt src=”afdaf.js”></script>  //type=“text/javascript”

新的输入类型的空间会得到平稳的降级

script  的 两个属性 defer  和  async  只有在src  设置了以后才会作用

defer  表示  并行下载 并且不会修改dom树  最后加载执行

async  表示  异步加载  下载完成后 会立刻直接执行代码  有依赖关系  不能使用这个

如果页面有内联的脚本依赖于加载的脚本，则不适合使用defer属性。

<base>   设置a  标签的  默认 target  比如 _blank

属性值  自定义  data-length=“xx”   读取这个属性值  .dataset[‘length’]  设置同样

<i>  <b>  <u>  <small>  斜体  黑体  下划线  小字体

h5 有很多的标签 废弃了 strike  和  big 。。

还有一些标签的属性被移除

ie  老的  可以  通过  creatElement  方法 产生的标签

框架 支持 h5  旧了浏览器  html5shim

Modernizr  表示监测新特性的框架

type  都是 总共的类  和  格式名称

<sourc src=”video.mp4” type=”video/mp4”>

<iframe  插入一些东西>

css  中的文件 一个默认样式文件 一个共有文件  一个IE特有的文件

在页面中使用IE浏览器独有的条件注释方式引用此文件

<!—[if lt IE 8]>

<link rel=stylesheet’ href=”ie-style.css” />

<![endif]-->

要对html5中的新标签 在 IE89 中显示正常要定义一个display  cssreset  中的一项要求

YUI框架似乎很强大。

css  中的样式排序  字母从小到大  推荐

按照对页面影响的大小排序  形象布局排在前面 不影响布局排在后面

csscomb   css  免费自动化排序程序

css  权重

ID>类 伪类 属性选择器 >标签类型 伪对象 > 通配符

尽量 不用id选择器 复用的css  会减少

为了提高兼容样式的优先级  可以再更元素 <html>  或者是 <body>上正对 不同的刘来气添加不同的样式类

<!—[if lt IE 8]>   //  还有一种方法  <!—[if gt IE 8]><!-->  <html>  <!--<![endif]-->

<html class=”ie7”>

<![endif]-->

相对单位  和  绝对单位  px pt cm mm in pc

相对单位  视窗相对单位vw  vh vmin vmax  字体相对单位em ex ch rem

尽量设置性对尺寸  当整体模块更改时就不需要更改 模块内部子模块的尺寸了。

可以显式的设置body的字体大小为  16px  后面的 子模块 用  0.8 em  之类的

rem  是根据  根元素设定  相对值的

css的匹配规则和我们的习惯是相反的 是从右向左的。

避免使用通配符  *

因为 id选择器都是唯一的  前面加上标签名 无意识画蛇添足 增加匹配时间

css selectors Test 表示的是测试css 的开销

尽量不要设定图片的大小 正价系统渲染的cpu的开销

缩略图 和  正常的大图片不要使用相同的图片 分成两个图片

sprint图 推荐长*宽  《=2500 雪碧图最好控制在200k以内 图片态度啊会消耗更多的传输时间

csssprit 生成器 Generator在线的

css sprit cow  雪碧图  css  代码生成器

spriteMe  通过分析网站  产生雪碧图 和对应的css 代码  *****挺好的吧

css  很多属性是可以继承的  color  font  line-heighttext-align text-tansform

chrome  可以有工具  可以出 不必要的  css

audits  中的remove unused cssrules

针对特定的浏览器前缀  -webkit  chrome  safari

firefox  -moz

ie  -ms  opera  -o

自动化添加浏览器前缀

Perfixr  autoperfixr

html5please  对应的建议网站

JS

避免全局变量污染   封装在一个变量对象上面  var myCurrentAction = {

length:0,

init:function(){},

action:function(){}

}

var myCurr = (function  () {

var length = 0;

function init(){}

function action(){}

return init:init;//  外部代码访问init()方法是  可以通过调用 myCurr.init    返回  公开的接口

})()

null  与  undefined  自己 互相 比较 为true

原始类型（数值，布尔，字符类型）  都会转换为数值类型进行比较

对象 和原始类型比较时  会将对象对象转换为原始类型进行比较

with(object){

}

js运行的时候会给with单独建立一个作用于  这个作用于里的变量变为了局部变量

避免 使用with  只有运行时才知道 变量属于那个对象

with  兼容问题  ecma 5  和  6  在width  []  参数上实现 不同

eval(“x = 1;y = 2;x*y”)  就是把字符串的内容作为代码执行。  存在安全问题

最好不要编写浏览器判断逻辑  直接检测浏览器特性支持

只要在 script  中添加 如下

“use strict”;

最好不要在全局中使用严格模式

最好写在  函数中

JS代码检查工具  JSHint

JS  可以设置  obj.style.cssText += “border:1px solid #f00”

上述不是最佳做法  最佳做法是更改 class

通过 innerHTML  生成  元素的内部子元素

<script id = “xxx” type=”text/x-tmpl”>

</script>

当需要获取模板代码的时候  通过

var infoTemplate = document.getElementById(‘main_info’).innerHTML;

<template>  HTML5中的标签

Mustache 模板系统

mvc  CMV

JS模块  化 规范  主要有两种  commonjs  和  amd

同步  与  异步加载模块  一个主要用在 服务器  和一个主要用在前端

实现AMD  模块的  js库  主要有requireJS

Ajax  不能滥用  否则 替换y一整个 ui  可以 换页面  破坏浏览器上的 后退按钮jquery有相关插件

JS  是单线程 阻塞状态下下载 和  加载的

推荐  把js放在  body的底部

defer

告诉浏览器 这个js代码不会产生任何页面内容，因此浏览器可以在加载此引用时继续解析页面的后续内容。

按需求加载

少用forin

js  不存在 块作用域

多个函数嵌套定义的时候会形成作用域包含的关系关系称为  作用域链

内部作用多次外部的数据 精良简写为一次

var doc = document;

prototype 原型对象

实例上的属性和方法 来自自身  和和对应的原型对象。

原型链上的对象和属性 频繁读取会影响性能。

DOM  和js  是存储到两个不相干的模块中的  模块的交互会导致性能的损耗

而且dom的重排和重绘  也会导致 性能的损耗

DOM 的增加 和删除  和修改  可见DOM元素。

请求 DOM  元素布局信息 会造成很到的性能损耗  offersetTop clientX

频繁修改DOM样式

ele.style.border …..

不提倡  合并为一种

优化  更改classname   cssText +=

克隆  dom  内存操作

var  old = document.daadfafdsaf

var clone = old.cloneNode(true);

动画效果 设定为 fixed  或者是 absolute   避免页面的重新排布。

事件 绑定过多 会导致  性能变差  最好是  使用冒泡机制  在父元素上绑定事件即事件托管

利用TIMELINe 工具 chrome

在线代码性能分析工具  jsPerf

常见的web前端攻击方式

XSS  尽一切  办法在浏览器页面上运行 不是  浏览器的代码

csrf   可以没有  js参与

DDos

劫持  上面覆盖一个iframe

cookie  设置为 HttpOnly禁止js操作cookie

viewport  对移动端的支持

兼容移动端  使用  流式布局  百分比定宽

借用 media queries  技术

@media (max-wdith:600px){

.facet_sidebar{

display: none;

}

}

/*按照上面的从大到小 编写相应的 媒体查询 显示 特定的 html*/

正对  不同的设别像素比 设定不同清晰的图片

@media only screen animation-delay:  (min-device-pixel-radio:1.5){

#my-image{

background:url(high.png);

}

}

/*同样也可以用图片的方法*/

background-image:image-set(

/*表示像素 比 是1  和 2 */

url(icon1x.jpg) 1x,

url(icon2x.jpg) 2x

);

更多的是使用  技术类库 picturefill

Bootstap  响应式设计  有关

Howtogomo  检查网站对移动设备的兼容性效果

移动端站点一般选取桌面端网站的二级域名  m开头

监测移动设备的 信息  use-agent

设计移动应用为单页模式 避免页面跳转

移动端开发框架 jquery mobile

chrome  中有相关的技术 可以实现手机端 开启debug  然后电脑端 开始调试

希望浏览器能够自动识别电话号码

<meta name=”format-detection” content=”telephone=yes”>

<a href=”tel:1-406-666-xxxx”>ddafdaf</a>    电话

<a href=”sms:1-406-666-xxxx”>ddafdaf</a>  短信

移动端 尽量少用 table  和  iframe

用 ul  ol  代替

图表类型的字体  Font Awesome

内联图片  Base64

一些不需要长按跳出对话框的 方法

user-select：none;

mouse相关事件 有对应的手势相关事件

tab  事件 是click事件的模拟  因为click事件在移动端 会造成300ms的延迟

还有一个tabhold事件 通过实践判定是哪一个事件~

在web移动开发的时候  避免使用Timer来完成需要准确控制时间的任务。

入门书籍 web前端开发最佳实践的更多相关文章

  1. web前端开发最佳实践笔记

    一.文章开篇 由于最近也比较忙,一方面是忙着公司的事情,另外一方面也是忙着看书和学习,所以没有时间来和大家一起分享知识,现在好了,终于回归博客园的大家庭了,今天我打算来分享一下关于<web前端开 ...

  2. 【社区公益】送《Web前端开发最佳实践》给需要的人

    算起来至今,我进入软件开发行业已经有11年之久.从最初的研究人工智能,到后来的Web开发,控件开发,直到现在纯粹的Web前端开发.虽然没有大的作品问世,但也是勤勤恳恳,踏实做事,低调做人.从来不吹牛逼 ...

  3. Web前端开发最佳实践系列文章汇总

    Web前端开发最佳实践(1):前端开发概述 Web前端开发最佳实践(2):前端代码重构 Web前端开发最佳实践(3):前端代码和资源的压缩与合并 Web前端开发最佳实践(4):在页面中添加必要的met ...

  4. Web前端开发最佳实践（9）：CSS代码太太乱，重复代码太多？你需要精简CSS代码

    前言 提高网站整体加载速度的一个重要手段就是提高代码文件的网络传输速度.之前提到过,所有的代码文件都应该是经过压缩了的,这可提高网络传输速度,提高性能.除了压缩代码之外,精简代码也是一种减小代码文件大 ...

  5. Web前端开发最佳实践（8）：还没有给CSS样式排序？其实你可以更专业一些

    前言 CSS样式排序是指按照一定的规则排列CSS样式属性的定义,排序并不会影响CSS样式的功能和性能,只是让代码看起来更加整洁.CSS代码的逻辑性并不强,一般的开发者写CSS样式也很随意,所以如果不借 ...

  6. Web前端开发最佳实践（7）：使用合理的技术方案来构建小图标

    大家都对网站上使用的小图标肯定都不陌生,这些小图标作为网站内容的点缀,增加了网站的美观度,提高了用户体验,可是你有没有看过在这些网站中使用的图标都是用什么技术实现的?虽然大部分网站还是使用普通的图片实 ...

  7. Web前端开发最佳实践（1）：前端开发概述

    引言 我从07年开始进入博客园,从最开始阅读别人的文章到自己开始尝试表达一些自己对技术的看法.可以说,博客园是我参与技术讨论的一个主要的平台.在这其间,随着接触技术的广度和深度的增加,也写了一些得到了 ...

  8. Web前端开发最佳实践（2）：前端代码重构

    前言 代码重构是业内经常讨论的一个热门话题,重构指的是在不改变代码外部行为的情况下进行源代码修改,所以重构之前需要考虑的是重构后如何才能保证外部行为不改变.对于后端代码来说,可以通过大量的自动化测试来 ...

  9. Web前端开发最佳实践（4）：在页面中添加必要的meta信息

    meta标签放置在HTML页面的head中,主要用于标识网站.其中基本上包含了网站的一些描述信息,例如,简介.作者等.这些信息有助于搜索引擎更准确地识别网页的内容,也有助于第三方工具抓取网站基本信息. ...

  10. Web前端开发最佳实践（5）：正确闭合HTML标签，停止使用不标准的标签和属性

    正确闭合HTML标签 HTML元素的内容模型定义了元素的结构,表明元素可以包含哪些内容以及元素可以有哪些属性.元素可以包含的内容包括其他元素和字符,但是也有一些元素是空元素,即不能包含任何内容,这些元 ...

随机推荐

  1. jmeter返回值作为参数传给后面的步骤使用的方法

    如,系统返回data 通过正则获取data后的数据,且名称定义为id 然后通过${id}的方式传参给需要使用的地方

  2. C#访问注册表

    注册表 .wiz-editor-body .wiz-code-container { position: relative; padding: 8px 0; margin: 5px 0; text-i ...

  3. .net core 使用redis

    参照: .NET 6使用Redis - Lulus - 博客园 (cnblogs.com) 九..net core(.NET 6)添加通用的Redis功能 - WeskyNet - 博客园 (cnbl ...

  4. Python3批量爬取美女照片并保存到本地（二）

    Python3批量爬取美女照片并保存到本地(二) 上一波写错了,很尴尬,就能爬显示的一部分照片,网站有限制,从上波的爬取可以看出来,返回的json中只有一部分图片,其余的需要登录才能下载,我们这次通过 ...

  5. Maven版本号管理规范：为何父POM是统一依赖版本的最佳实践？

    结论先行 在Maven多模块项目中,依赖的版本号应集中定义在父POM的<dependencyManagement>中,子模块通过继承父POM来引用版本号,通常无需在子POM中重复声明.这能 ...

  6. 【深入解析AQS】从设计模式到ReentrantLock实现再到自定义锁

    深入解析AQS:设计模式.ReentrantLock实现与自定义锁开发 一.模板方法模式:AQS的架构基石 1.1 模式核心思想 模板方法模式通过固定算法骨架+可变实现细节的设计,实现了代码复用与扩展 ...

  7. 代码随想录第十四天 | Leecode 103. 二叉树的层序遍历、226. 翻转二叉树、101. 对称二叉树、104. 二叉树的最大深度、111. 二叉树的最小深度

    写在前面 今天补一下昨天没有写的层序遍历,层序遍历有整整十道题,打算只在博客详细写一道,后续的题目就自己在Leecode上刷一刷得了,不准备全部写下来(计划是只在博客给出每一道题目的链接).除此之外还 ...

  8. java代码发起POST请求，并封装条件

    一.场景 不同的系统采用调用,这里我们是定时任务调用其他系统的接口获取数据并返回处理 二.代码 技术点: 发起Post请求 封装接口所需条件<key,vlaue> 将返回的{"c ...

  9. 鸿蒙NEXT开发实战教程—小红书app

    幽蓝君最近发现小红书是个好东西,一定要多逛 今天就浅浅模仿一下小红书app,主要是底部tab栏和主页部分. 首先看一下tabbar,由于中间有一个红色按钮的存在,所以这里我使用自定义导航栏来实现,自定 ...

  10. 解决ssh连接docker容器环境变量无效的问题

    问题缘由: 因在docker容器中的linux系统输入nvcc 等命令都是有效的,但通过ssh连接到docker容器内,就存在该命令未找到等问题,查询资料得知,这是因为通过ssh连接docker容器后 ...